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

Turn channel list into an accessible tablist

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) %>"> <body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
<div id="wrap"> <div id="wrap">
<div id="viewport"> <div id="viewport" role="tablist">
<aside id="sidebar"> <aside id="sidebar">
<div class="networks"></div> <div class="networks"></div>
<div class="empty"> <div class="empty">
@ -40,10 +40,10 @@
</div> </div>
</aside> </aside>
<footer id="footer"> <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="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"></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"></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"></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> <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> </footer>
<div id="main"> <div id="main">
@ -84,10 +84,10 @@
</div> </div>
</form> </form>
</div> </div>
<div id="sign-in" class="window"></div> <div id="sign-in" class="window" role="tabpanel"></div>
<div id="connect" class="window"></div> <div id="connect" class="window" role="tabpanel"></div>
<div id="settings" class="window"></div> <div id="settings" class="window" role="tabpanel"></div>
<div id="help" class="window"></div> <div id="help" class="window" role="tabpanel"></div>
<div id="changelog" class="window"></div> <div id="changelog" class="window"></div>
</div> </div>
</div> </div>

2
client/js/autocompletion.js
View File

@ -292,7 +292,7 @@ function completeChans(word) {
.each(function() { .each(function() {
const self = $(this); const self = $(this);
if (!self.hasClass("lobby")) { 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 // Toggle content of tooltip
const tooltip = network.find(".add-channel-tooltip"); const tooltip = network.find(".add-channel-tooltip");
const altLabel = tooltip.data("alt-label"); const altLabel = tooltip.data("alt-label");
tooltip.data("alt-label", tooltip.prop("aria-label")); tooltip.data("alt-label", tooltip.attr("aria-label"));
tooltip.prop("aria-label", altLabel); tooltip.attr("aria-label", altLabel);
} }
function closeForm(network) { function closeForm(network) {

20
client/js/lounge.js
View File

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

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

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

2
client/js/utils.js
View File

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

10
client/views/chan.tpl
View File

@ -1,5 +1,13 @@
{{#each channels}} {{#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"}} {{#equal type "lobby"}}
<span class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch" aria-label="Join a channel…" data-alt-label="Cancel"> <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> <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}}" id="chan-{{id}}"
class="chan {{type}}" class="chan {{type}}"
data-id="{{id}}" data-id="{{id}}"
data-title="{{name}}"
data-type="{{type}}" data-type="{{type}}"
role="tabpanel"
aria-label="{{name}}"
> >
<div class="header"> <div class="header">
<button class="lt" aria-label="Toggle channel list"></button> <button class="lt" aria-label="Toggle channel list"></button>