Turn channel list into an accessible tablist
This commit is contained in:
parent
c8418a638d
commit
e448dc711c
@ -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>
|
||||
|
@ -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"));
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -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) {
|
||||
|
@ -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");
|
||||
|
@ -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:";
|
||||
|
@ -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();
|
||||
}
|
||||
|
@ -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,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>
|
||||
|
Loading…
Reference in New Issue
Block a user