Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>MozLabel tests</title>
<link
rel="stylesheet"
/>
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
<script
type="module"
src="chrome://global/content/elements/moz-label.mjs"
></script>
</head>
<body>
<p id="display"></p>
<div id="content">
<label is="moz-label" for="checkbox" accesskey="c"
>For the checkbox:</label
>
<input type="checkbox" id="checkbox" />
<label is="moz-label" accesskey="n">
For the nested checkbox:
<input type="checkbox" />
</label>
<label is="moz-label" for="radio" accesskey="r">For the radio:</label>
<input type="radio" id="radio" />
<label is="moz-label" accesskey="F">
For the nested radio:
<input type="radio" />
</label>
<label is="moz-label" for="button" accesskey="b">For the button:</label>
<button id="button">Click me</button>
<label is="moz-label" accesskey="u">
For the nested button:
<button>Click me too</button>
</label>
<label is="moz-label" shownaccesskey="k" class="test-shownaccesskey">
Shownaccesskey highlights the key
<input type="checkbox" />
</label>
</div>
<script class="testbody" type="application/javascript">
let labels = document.querySelectorAll("label[is='moz-label']");
let isMac = navigator.platform.includes("Mac");
function performAccessKey(key) {
synthesizeKey(
key,
navigator.platform.includes("Mac")
? { altKey: true, ctrlKey: true }
: { altKey: true, shiftKey: true }
);
}
// Accesskey underlining is disabled by default on Mac.
// Reload the window and wait for load to ensure pref is applied.
add_setup(async function setup() {
if (isMac && !SpecialPowers.getIntPref("ui.key.menuAccessKey")) {
await SpecialPowers.pushPrefEnv(
{ set: [["ui.key.menuAccessKey", 1]] },
async () => {
window.location.reload();
await new Promise(resolve => {
addEventListener("load", resolve, { once: true });
});
}
);
}
});
add_task(async function testAccesskeyUnderlined() {
labels.forEach(label => {
let accessKey =
label.getAttribute("accesskey") ||
label.getAttribute("shownaccesskey");
let wrapper = label.querySelector(".accesskey");
is(
wrapper.textContent,
accessKey,
"The accesskey character is wrapped."
);
let textDecoration = getComputedStyle(wrapper)["text-decoration"];
ok(
textDecoration.includes("underline"),
"The accesskey character is underlined."
);
});
});
add_task(async function testAccesskeyFocus() {
labels.forEach(label => {
let accessKey = label.getAttribute("accesskey");
if (!accessKey) {
return;
}
// Find the labelled element via the "for" attr if there's an ID
// association, or select the lastElementChild for nested elements
let element =
document.getElementById(label.getAttribute("for")) ||
label.lastElementChild;
isnot(
document.activeElement,
element,
"Focus is not on the associated element."
);
performAccessKey(accessKey);
is(
document.activeElement,
element,
"Focus moved to the associated element."
);
});
});
add_task(async function testAccesskeyChange() {
let label = labels[0];
let nextAccesskey = "x";
let originalAccesskey = label.getAttribute("accesskey");
let getWrapper = () => label.querySelector(".accesskey");
is(
getWrapper().textContent,
originalAccesskey,
"Original accesskey character is wrapped."
);
label.setAttribute("accesskey", nextAccesskey);
is(
getWrapper().textContent,
nextAccesskey,
"New accesskey character is wrapped."
);
let elementId = label.getAttribute("for");
let focusedEl = document.getElementById(elementId);
performAccessKey(originalAccesskey);
isnot(
document.activeElement.id,
focusedEl.id,
"Focus has not moved to the associated element."
);
performAccessKey(nextAccesskey);
is(
document.activeElement.id,
focusedEl.id,
"Focus moved to the associated element."
);
});
add_task(async function testAccesskeyAppended() {
let label = labels[0];
let originalText = label.textContent;
let accesskey = "z"; // Letter not included in the label text.
label.setAttribute("accesskey", accesskey);
let expectedText = `${originalText} (Z):`;
is(
label.textContent,
expectedText,
"Access key is appended when not included in label text."
);
});
add_task(async function testLabelClick() {
let label = labels[0];
let input = document.getElementById(label.getAttribute("for"));
is(input.checked, false, "The associated input is not checked.");
// Input state changes on label click.
synthesizeMouseAtCenter(label, {});
ok(input.checked, "The associated input is checked.");
// Input state doesn't change on label click when input is disabled.
input.disabled = true;
synthesizeMouseAtCenter(label, {});
ok(input.checked, "The associated input is still checked.");
});
add_task(async function testShownaccesskey() {
let label = [...labels].find(l =>
l.classList.contains("test-shownaccesskey")
);
let input = label.querySelector("input");
is(input.checked, false, "The associated input is not checked.");
// Input state changes on label click.
performAccessKey("k");
is(
input.checked,
false,
"The associated input is not triggered by accesskey."
);
});
</script>
</body>
</html>