From e448dc711c164f26ee2d3bd16e1958cb9677320c Mon Sep 17 00:00:00 2001 From: Pavel Djundik Date: Thu, 28 Dec 2017 14:15:28 +0200 Subject: [PATCH] Turn channel list into an accessible tablist --- client/index.html.tpl | 18 +++++++++--------- client/js/autocompletion.js | 2 +- client/js/join-channel.js | 4 ++-- client/js/lounge.js | 20 ++++++++++++++------ client/js/socket-events/msg.js | 2 +- client/js/utils.js | 2 +- client/views/chan.tpl | 10 +++++++++- client/views/chat.tpl | 3 ++- 8 files changed, 39 insertions(+), 22 deletions(-) diff --git a/client/index.html.tpl b/client/index.html.tpl index 9ecaaa2c..6c788014 100644 --- a/client/index.html.tpl +++ b/client/index.html.tpl @@ -32,7 +32,7 @@ " data-transports="<%- JSON.stringify(transports) %>">
-
+
- - - - + + + +
@@ -84,10 +84,10 @@
-
-
-
-
+
+
+
+
diff --git a/client/js/autocompletion.js b/client/js/autocompletion.js index df778041..f6080a20 100644 --- a/client/js/autocompletion.js +++ b/client/js/autocompletion.js @@ -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")); } }); diff --git a/client/js/join-channel.js b/client/js/join-channel.js index da1c2d93..9275e4e6 100644 --- a/client/js/join-channel.js +++ b/client/js/join-channel.js @@ -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) { diff --git a/client/js/lounge.js b/client/js/lounge.js index 4a75f12e..fd870d74 100644 --- a/client/js/lounge.js +++ b/client/js/lounge.js @@ -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"); diff --git a/client/js/socket-events/msg.js b/client/js/socket-events/msg.js index 2d5e196f..925b15b7 100644 --- a/client/js/socket-events/msg.js +++ b/client/js/socket-events/msg.js @@ -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:"; diff --git a/client/js/utils.js b/client/js/utils.js index 2203cf3e..a3ff9835 100644 --- a/client/js/utils.js +++ b/client/js/utils.js @@ -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(); } diff --git a/client/views/chan.tpl b/client/views/chan.tpl index 8c3be491..e40f8122 100644 --- a/client/views/chan.tpl +++ b/client/views/chan.tpl @@ -1,5 +1,13 @@ {{#each channels}} -
+