Merge pull request #4201 from thelounge/maxleiter/accessiblityImprovements
Initial accessibility improvements
This commit is contained in:
commit
3e4b22255d
@ -1,7 +1,12 @@
|
||||
<template>
|
||||
<div id="viewport" :class="viewportClasses" role="tablist">
|
||||
<Sidebar v-if="$store.state.appLoaded" :overlay="$refs.overlay" />
|
||||
<div id="sidebar-overlay" ref="overlay" @click="$store.commit('sidebarOpen', false)" />
|
||||
<div
|
||||
aria-hidden="true"
|
||||
id="sidebar-overlay"
|
||||
ref="overlay"
|
||||
@click="$store.commit('sidebarOpen', false)"
|
||||
/>
|
||||
<router-view ref="window"></router-view>
|
||||
<Mentions />
|
||||
<ImageViewer ref="imageViewer" />
|
||||
|
@ -54,20 +54,25 @@ export default {
|
||||
methods: {
|
||||
getAriaLabel() {
|
||||
const extra = [];
|
||||
const type = this.channel.type;
|
||||
|
||||
if (this.channel.unread > 0) {
|
||||
extra.push(`${this.channel.unread} unread`);
|
||||
if (this.channel.unread > 1) {
|
||||
extra.push(`${this.channel.unread} unread messages`);
|
||||
} else {
|
||||
extra.push(`${this.channel.unread} unread message`);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.channel.highlight > 0) {
|
||||
extra.push(`${this.channel.highlight} mention`);
|
||||
if (this.channel.highlight > 1) {
|
||||
extra.push(`${this.channel.highlight} mentions`);
|
||||
} else {
|
||||
extra.push(`${this.channel.highlight} mention`);
|
||||
}
|
||||
}
|
||||
|
||||
if (extra.length > 0) {
|
||||
return `${this.channel.name} (${extra.join(", ")})`;
|
||||
}
|
||||
|
||||
return this.channel.name;
|
||||
return `${type}: ${this.channel.name} ${extra.length ? `(${extra.join(", ")})` : ""}`;
|
||||
},
|
||||
click() {
|
||||
if (this.isFiltering) {
|
||||
|
@ -18,7 +18,9 @@
|
||||
>
|
||||
<div class="header">
|
||||
<SidebarToggle />
|
||||
<span class="title">{{ channel.name }}</span>
|
||||
<span class="title" :aria-label="'Currently open ' + channel.type">{{
|
||||
channel.name
|
||||
}}</span>
|
||||
<div v-if="channel.editTopic === true" class="topic-container">
|
||||
<input
|
||||
ref="topicInput"
|
||||
@ -93,13 +95,13 @@
|
||||
>
|
||||
<div class="scroll-down-arrow" />
|
||||
</div>
|
||||
<ChatUserList v-if="channel.type === 'channel'" :channel="channel" />
|
||||
<MessageList
|
||||
ref="messageList"
|
||||
:network="network"
|
||||
:channel="channel"
|
||||
:focused="focused"
|
||||
/>
|
||||
<ChatUserList v-if="channel.type === 'channel'" :channel="channel" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<aside ref="userlist" class="userlist" @mouseleave="removeHoverUser">
|
||||
<aside
|
||||
ref="userlist"
|
||||
class="userlist"
|
||||
@mouseleave="removeHoverUser"
|
||||
:aria-label="'User list for ' + channel.name"
|
||||
>
|
||||
<div class="count">
|
||||
<input
|
||||
ref="input"
|
||||
|
@ -13,8 +13,12 @@
|
||||
:data-command="message.command"
|
||||
:data-from="message.from && message.from.nick"
|
||||
>
|
||||
<span :aria-label="messageTimeLocale" class="time tooltipped tooltipped-e"
|
||||
>{{ messageTime }}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
:aria-label="messageTimeLocale"
|
||||
class="time tooltipped tooltipped-e"
|
||||
>
|
||||
{{ messageTime }}
|
||||
</span>
|
||||
<template v-if="message.type === 'unhandled'">
|
||||
<span class="from">[{{ message.command }}]</span>
|
||||
@ -47,23 +51,23 @@
|
||||
<template v-else>
|
||||
<span v-if="message.type === 'message'" class="from">
|
||||
<template v-if="message.from && message.from.nick">
|
||||
<span class="only-copy"><</span>
|
||||
<span class="only-copy" aria-hidden="true"><</span>
|
||||
<Username :user="message.from" :network="network" :channel="channel" />
|
||||
<span class="only-copy">> </span>
|
||||
<span class="only-copy" aria-hidden="true">> </span>
|
||||
</template>
|
||||
</span>
|
||||
<span v-else-if="message.type === 'plugin'" class="from">
|
||||
<template v-if="message.from && message.from.nick">
|
||||
<span class="only-copy">[</span>
|
||||
<span class="only-copy" aria-hidden="true">[</span>
|
||||
{{ message.from.nick }}
|
||||
<span class="only-copy">] </span>
|
||||
<span class="only-copy" aria-hidden="true">] </span>
|
||||
</template>
|
||||
</span>
|
||||
<span v-else class="from">
|
||||
<template v-if="message.from && message.from.nick">
|
||||
<span class="only-copy">-</span>
|
||||
<span class="only-copy" aria-hidden="true">-</span>
|
||||
<Username :user="message.from" :network="network" :channel="channel" />
|
||||
<span class="only-copy">- </span>
|
||||
<span class="only-copy" aria-hidden="true">- </span>
|
||||
</template>
|
||||
</span>
|
||||
<span class="content" dir="auto">
|
||||
|
@ -1,8 +1,13 @@
|
||||
<template>
|
||||
<div v-if="$store.state.networks.length === 0" class="empty">
|
||||
<div
|
||||
v-if="$store.state.networks.length === 0"
|
||||
class="empty"
|
||||
role="navigation"
|
||||
aria-label="Network and Channel list"
|
||||
>
|
||||
You are not connected to any networks yet.
|
||||
</div>
|
||||
<div v-else ref="networklist">
|
||||
<div v-else ref="networklist" role="navigation" aria-label="Network and Channel list">
|
||||
<div class="jump-to-input">
|
||||
<input
|
||||
ref="searchInput"
|
||||
@ -74,6 +79,7 @@
|
||||
}"
|
||||
class="network"
|
||||
role="region"
|
||||
aria-live="polite"
|
||||
>
|
||||
<NetworkLobby
|
||||
:network="network"
|
||||
|
@ -6,11 +6,13 @@
|
||||
:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg.svg`"
|
||||
class="logo"
|
||||
alt="The Lounge"
|
||||
role="presentation"
|
||||
/>
|
||||
<img
|
||||
:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg-inverted.svg`"
|
||||
class="logo-inverted"
|
||||
alt="The Lounge"
|
||||
role="presentation"
|
||||
/>
|
||||
<span
|
||||
v-if="isDevelopment"
|
||||
|
@ -91,7 +91,7 @@
|
||||
type="checkbox"
|
||||
name="showSeconds"
|
||||
/>
|
||||
Show seconds in timestamp
|
||||
Include seconds in timestamp
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
@ -101,7 +101,7 @@
|
||||
type="checkbox"
|
||||
name="use12hClock"
|
||||
/>
|
||||
Show 12-hour timestamps
|
||||
Use 12-hour timestamps
|
||||
</label>
|
||||
</div>
|
||||
<div v-if="!$store.state.serverConfiguration.public && $store.state.settings.advanced">
|
||||
|
@ -1147,6 +1147,7 @@ textarea.input {
|
||||
|
||||
#chat .chat-content {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
@ -52,8 +52,8 @@
|
||||
<div id="loading">
|
||||
<div class="window">
|
||||
<div id="loading-status-container">
|
||||
<img src="img/logo-vertical-transparent-bg.svg" class="logo" alt="The Lounge" width="256" height="170">
|
||||
<img src="img/logo-vertical-transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge" width="256" height="170">
|
||||
<img src="img/logo-vertical-transparent-bg.svg" class="logo" alt="" width="256" height="170">
|
||||
<img src="img/logo-vertical-transparent-bg-inverted.svg" class="logo-inverted" alt="" width="256" height="170">
|
||||
<p id="loading-page-message">The Lounge requires a modern browser with JavaScript enabled.</p>
|
||||
</div>
|
||||
<div id="loading-reload-container">
|
||||
|
Loading…
Reference in New Issue
Block a user