supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #4201 from thelounge/maxleiter/accessiblityImprovements

Browse Source 
Initial accessibility improvements
This commit is contained in:
Max Leiter 2021-07-01 12:05:22 -07:00 committed by GitHub
commit 3e4b22255d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 55 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/components/App.vue
View File

@ -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" />

19
client/components/ChannelWrapper.vue
View File

@ -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) {

6
client/components/Chat.vue
View File

@ -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>

7
client/components/ChatUserList.vue
View File

@ -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"

20
client/components/Message.vue
View File

@ -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">&lt;</span>
<span class="only-copy" aria-hidden="true">&lt;</span>
<Username :user="message.from" :network="network" :channel="channel" />
<span class="only-copy">&gt; </span>
<span class="only-copy" aria-hidden="true">&gt; </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">

10
client/components/NetworkList.vue
View File

@ -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"

2
client/components/Sidebar.vue
View File

@ -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"

4
client/components/Windows/Settings.vue
View File

@ -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">

1
client/css/style.css
View File

@ -1147,6 +1147,7 @@ textarea.input {
#chat .chat-content {
display: flex;
flex-direction: row-reverse;
flex-grow: 1;
overflow: hidden;
position: relative;

4
client/index.html.tpl
View File

@ -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">