deblan-mirror/thelounge
deblan-mirror/thelounge
1
0
Fork 0
mirror of https://github.com/thelounge/thelounge.git synced 2024-04-26 12:02:00 +02:00
Code Issues Projects Releases Wiki Activity

Initial accessibility improvements

Browse source 
Set aria-hidden to true for cosmetic and repetitive elements
Improve channel/network aria labels in network list
Experiment with different aria-roles for landmarks
This commit is contained in:
Max Leiter 2021-04-20 18:04:31 -07:00
parent 0fb6dae8a6
commit 0aabacd549
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
8 changed files with 42 additions and 19 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" />

15
client/components/ChannelWrapper.vue
View file

@ -52,17 +52,26 @@ 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 `${type}: ${this.channel.name} (${extra.join(", ")})`;
}
return this.channel.name;

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

20
client/components/Message.vue
View file

@ -9,8 +9,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>
@ -40,23 +44,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" />
<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" />
<span class="only-copy">- </span>
<span class="only-copy" aria-hidden="true">- </span>
</template>
</span>
<span class="content" dir="auto">

5
client/components/NetworkList.vue
View file

@ -1,8 +1,8 @@
<template>
<div v-if="$store.state.networks.length === 0" class="empty">
<div v-if="$store.state.networks.length === 0" class="empty" role="navigation">
You are not connected to any networks yet.
</div>
<div v-else ref="networklist">
<div v-else ref="networklist" role="navigation">
<div class="jump-to-input">
<input
ref="searchInput"
@ -74,6 +74,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">

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