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

Turn channel list into an accessible tablist

Browse Source
This commit is contained in:
Pavel Djundik 2017-12-28 14:15:28 +02:00
parent c8418a638d
commit e448dc711c
8 changed files with 39 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/index.html.tpl
View File

@ -32,7 +32,7 @@
<body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
<div id="wrap">
<div id="viewport">
<div id="viewport" role="tablist">
<aside id="sidebar">
<div class="networks"></div>
<div class="empty">
@ -40,10 +40,10 @@
</div>
</aside>
<footer id="footer">
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"><button class="icon sign-in" data-target="#sign-in" aria-label="Sign in"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Connect to network"><button class="icon connect" data-target="#connect" aria-label="Connect to network"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"><button class="icon settings" data-target="#settings" aria-label="Settings"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"><button class="icon help" data-target="#help" aria-label="Help"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"><button class="icon sign-in" data-target="#sign-in" aria-label="Sign in" role="tab" aria-controls="sign-in" aria-selected="false"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Connect to network"><button class="icon connect" data-target="#connect" aria-label="Connect to network" role="tab" aria-controls="connect" aria-selected="false"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"><button class="icon settings" data-target="#settings" aria-label="Settings" role="tab" aria-controls="settings" aria-selected="false"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"><button class="icon help" data-target="#help" aria-label="Help" role="tab" aria-controls="help" aria-selected="false"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign out"><button class="icon sign-out" id="sign-out" aria-label="Sign out"></button></span>
</footer>
<div id="main">
@ -84,10 +84,10 @@
</div>
</form>
</div>
<div id="sign-in" class="window"></div>
<div id="connect" class="window"></div>
<div id="settings" class="window"></div>
<div id="help" class="window"></div>
<div id="sign-in" class="window" role="tabpanel"></div>
<div id="connect" class="window" role="tabpanel"></div>
<div id="settings" class="window" role="tabpanel"></div>
<div id="help" class="window" role="tabpanel"></div>
<div id="changelog" class="window"></div>
</div>
</div>

2
client/js/autocompletion.js
View File

@ -292,7 +292,7 @@ function completeChans(word) {
.each(function() {
const self = $(this);
if (!self.hasClass("lobby")) {
words.push(self.data("title"));
words.push(self.attr("aria-label"));
}
});

4
client/js/join-channel.js
View File

@ -20,8 +20,8 @@ function toggleButton(network) {
// Toggle content of tooltip
const tooltip = network.find(".add-channel-tooltip");
const altLabel = tooltip.data("alt-label");
tooltip.data("alt-label", tooltip.prop("aria-label"));
tooltip.prop("aria-label", altLabel);
tooltip.data("alt-label", tooltip.attr("aria-label"));
tooltip.attr("aria-label", altLabel);
}
function closeForm(network) {

20
client/js/lounge.js
View File

@ -123,7 +123,7 @@ $(function() {
output = templates.contextmenu_item({
class: itemClass,
action: "focusChan",
text: target.data("title"),
text: target.attr("aria-label"),
data: target.data("target"),
});
output += templates.contextmenu_divider();
@ -355,8 +355,12 @@ $(function() {
self.data("id")
);
sidebar.find(".active").removeClass("active");
sidebar.find(".active")
.removeClass("active")
.attr("aria-selected", false);
self.addClass("active")
.attr("aria-selected", true)
.find(".badge")
.removeClass("highlight")
.empty();
@ -392,17 +396,21 @@ $(function() {
.trigger("show");
let title = $(document.body).data("app-name");
if (chan.data("title")) {
title = chan.data("title") + " — " + title;
const chanTitle = chan.attr("aria-label");
if (chanTitle.length > 0) {
title = `${chanTitle} — ${title}`;
}
document.title = title;
const type = chan.data("type");
var placeholder = "";
if (type === "channel" || type === "query") {
placeholder = `Write to ${chan.data("title")}`;
placeholder = `Write to ${chanTitle}`;
}
input.prop("placeholder", placeholder).prop("aria-label", placeholder);
input
.prop("placeholder", placeholder)
.attr("aria-label", placeholder);
if (self.hasClass("chan")) {
$("#chat-container").addClass("active");

2
client/js/socket-events/msg.js
View File

@ -141,7 +141,7 @@ function notifyMessage(targetId, channel, msg) {
} else {
title = msg.from.nick;
if (!button.hasClass("query")) {
title += " (" + button.data("title").trim() + ")";
title += " (" + button.attr("aria-label").trim() + ")";
}
if (msg.type === "message") {
title += " says:";

2
client/js/utils.js
View File

@ -30,7 +30,7 @@ function findCurrentNetworkChan(name) {
.parent(".network")
.find(".chan")
.filter(function() {
return $(this).data("title").toLowerCase() === name;
return $(this).attr("aria-label").toLowerCase() === name;
})
.first();
}

10
client/views/chan.tpl
View File

@ -1,5 +1,13 @@
{{#each channels}}
<div data-id="{{id}}" data-target="#chan-{{id}}" data-title="{{name}}" class="chan {{type}} chan-{{slugify name}}">
<div
class="chan {{type}} chan-{{slugify name}}"
data-id="{{id}}"
data-target="#chan-{{id}}"
role="tab"
aria-label="{{name}}"
aria-controls="chan-{{id}}"
aria-selected="false"
>
{{#equal type "lobby"}}
<span class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch" aria-label="Join a channel…" data-alt-label="Cancel">
<button class="add-channel" aria-label="Join a channel…" data-id="{{id}}"></button>

3
client/views/chat.tpl
View File

@ -3,8 +3,9 @@
id="chan-{{id}}"
class="chan {{type}}"
data-id="{{id}}"
data-title="{{name}}"
data-type="{{type}}"
role="tabpanel"
aria-label="{{name}}"
>
<div class="header">
<button class="lt" aria-label="Toggle channel list"></button>