corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1704483 - improve a11y labeling of disconnected/errored account item in the hamburger menu, r=morgan

Browse Source 
The full text is split into 2 labels, one describing state and one containing the e-mail address.
To sighted users, both are visible. When this happens, let's use aria-labelledby to ensure both
labels are associated with the button control, so that both are read by screenreaders.

In the signed in and signed out state, the label is already correct (and either doesn't include
an email address, or doesn't include anything *but* the email address).

Note that in non-proton, the only label (both visible and otherwise) is the
state (the e-mail is not shown/used).

Differential Revision: https://phabricator.services.mozilla.com/D113657
This commit is contained in:
Gijs Kruitbosch
2021-04-28 18:27:47 +00:00
parent 4b2fa2c7b0
commit 2799396ec0
1 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
browser/base/content/browser-sync.js
View File

@@ -1045,6 +1045,7 @@ var gSync = {
const status = state.status;
// Reset the status bar to its original state.
appMenuLabel.setAttribute("label", defaultLabel);
appMenuLabel.removeAttribute("aria-labelledby");
appMenuStatus.removeAttribute("fxastatus");
appMenuAvatar.style.removeProperty("list-style-image");
@@ -1077,12 +1078,19 @@ var gSync = {
"account-disconnected2"
);
appMenuStatus.setAttribute("tooltiptext", tooltipDescription);
appMenuLabel.setAttribute("label", errorLabel);
if (PanelUI.protonAppMenuEnabled) {
appMenuLabel.classList.add("subviewbutton-nav");
appMenuHeaderTitle.hidden = false;
appMenuHeaderTitle.value = errorLabel;
appMenuHeaderDescription.value = state.email;
appMenuLabel.removeAttribute("label");
appMenuLabel.setAttribute(
"aria-labelledby",
`${appMenuHeaderTitle.id},${appMenuHeaderDescription.id}`
);
} else {
appMenuLabel.setAttribute("label", errorLabel);
}
return;
} else if (status == UIState.STATUS_NOT_VERIFIED) {
@@ -1095,12 +1103,19 @@ var gSync = {
"account-finish-account-setup"
);
appMenuStatus.setAttribute("tooltiptext", tooltipDescription);
appMenuLabel.setAttribute("label", unverifiedLabel);
if (PanelUI.protonAppMenuEnabled) {
appMenuLabel.classList.add("subviewbutton-nav");
appMenuHeaderTitle.hidden = false;
appMenuHeaderTitle.value = unverifiedLabel;
appMenuHeaderDescription.value = state.email;
appMenuLabel.removeAttribute("label");
appMenuLabel.setAttribute(
"aria-labelledby",
`${appMenuHeaderTitle.id},${appMenuHeaderDescription.id}`
);
} else {
appMenuLabel.setAttribute("label", unverifiedLabel);
}
return;
}