mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-23 18:26:15 +00:00
Bug 1506382 - Make the new "about:config" page more easily navigable with accessibility technology. r=Jamie,flod
Differential Revision: https://phabricator.services.mozilla.com/D17125 --HG-- extra : rebase_source : ce4e4a18b019d825c9bd32e52c1109337503c5fa
This commit is contained in:
parent
0035b06ef9
commit
dcf226d693
@ -70,16 +70,19 @@ body.config-warning {
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
||||
#prefs > tr > td {
|
||||
#prefs > tr > td,
|
||||
#prefs > tr > th {
|
||||
padding: 4px;
|
||||
width: 50%;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
#prefs > tr > td.cell-name {
|
||||
#prefs > tr > th {
|
||||
text-align: unset;
|
||||
padding-inline-start: 30px;
|
||||
}
|
||||
|
||||
#prefs > tr.deleted > td.cell-name {
|
||||
#prefs > tr.deleted > th {
|
||||
font-weight: bold;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
@ -90,7 +90,7 @@ class PrefRow {
|
||||
|
||||
_setupElement() {
|
||||
this.element.textContent = "";
|
||||
let nameCell = document.createElement("td");
|
||||
let nameCell = document.createElement("th");
|
||||
this.element.append(
|
||||
nameCell,
|
||||
this.valueCell = document.createElement("td"),
|
||||
@ -102,7 +102,7 @@ class PrefRow {
|
||||
);
|
||||
delete this.resetButton;
|
||||
|
||||
nameCell.className = "cell-name";
|
||||
nameCell.setAttribute("scope", "row");
|
||||
this.valueCell.className = "cell-value";
|
||||
this.editCell.className = "cell-edit";
|
||||
|
||||
@ -125,8 +125,18 @@ class PrefRow {
|
||||
// text copied to the clipboard includes all whitespace.
|
||||
let span = document.createElement("span");
|
||||
span.textContent = this.value;
|
||||
// We additionally need to wrap this with another "span" element to convey
|
||||
// the state to screen readers without affecting the visual presentation.
|
||||
span.setAttribute("aria-hidden", "true");
|
||||
let outerSpan = document.createElement("span");
|
||||
let spanL10nId = this.hasUserValue
|
||||
? "about-config-pref-accessible-value-custom"
|
||||
: "about-config-pref-accessible-value-default";
|
||||
document.l10n.setAttributes(outerSpan, spanL10nId,
|
||||
{ value: "" + this.value });
|
||||
outerSpan.appendChild(span);
|
||||
this.valueCell.textContent = "";
|
||||
this.valueCell.append(span);
|
||||
this.valueCell.append(outerSpan);
|
||||
if (this.type == "Boolean") {
|
||||
document.l10n.setAttributes(this.editButton, "about-config-pref-toggle");
|
||||
this.editButton.className = "button-toggle";
|
||||
|
@ -19,3 +19,14 @@ about-config-pref-edit = Edit
|
||||
about-config-pref-save = Save
|
||||
about-config-pref-reset = Reset
|
||||
about-config-pref-delete = Delete
|
||||
|
||||
## Preferences with a non-default value are differentiated visually, and at the
|
||||
## same time the state is made accessible to screen readers using an aria-label
|
||||
## that won't be visible or copied to the clipboard.
|
||||
##
|
||||
## Variables:
|
||||
## $value (String): The full value of the preference.
|
||||
about-config-pref-accessible-value-default =
|
||||
.aria-label = { $value } (default)
|
||||
about-config-pref-accessible-value-custom =
|
||||
.aria-label = { $value } (custom)
|
||||
|
@ -3,6 +3,7 @@ skip-if = asan # Bug 1520398
|
||||
support-files =
|
||||
head.js
|
||||
|
||||
[browser_accessibility.js]
|
||||
[browser_basic.js]
|
||||
[browser_clipboard.js]
|
||||
skip-if = debug # Bug 1507747
|
||||
|
@ -0,0 +1,26 @@
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
* http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
add_task(async function setup() {
|
||||
await SpecialPowers.pushPrefEnv({
|
||||
set: [
|
||||
["test.aboutconfig.added", true],
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
add_task(async function test_accessible_value() {
|
||||
await AboutConfigTest.withNewTab(async function() {
|
||||
for (let [name, expectHasUserValue] of [
|
||||
[PREF_BOOLEAN_DEFAULT_TRUE, false],
|
||||
[PREF_BOOLEAN_USERVALUE_TRUE, true],
|
||||
["test.aboutconfig.added", true],
|
||||
]) {
|
||||
let span = this.getRow(name).valueCell.querySelector("span");
|
||||
let expectedL10nId = expectHasUserValue
|
||||
? "about-config-pref-accessible-value-custom"
|
||||
: "about-config-pref-accessible-value-default";
|
||||
Assert.equal(span.getAttribute("data-l10n-id"), expectedL10nId);
|
||||
}
|
||||
});
|
||||
});
|
@ -34,7 +34,7 @@ class AboutConfigRowTest {
|
||||
}
|
||||
|
||||
get nameCell() {
|
||||
return this.querySelector("td");
|
||||
return this.querySelector("th");
|
||||
}
|
||||
|
||||
get name() {
|
||||
|
Loading…
Reference in New Issue
Block a user