// 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 || label.classList.contains("test-changetext")) {
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."
);
});
add_task(async function testAccesskeyTextContentChange() {
const ORIG_TEXT = "It has text";
const NEW_TEXT = "New text";
const ACCESSKEY = "t";
let [accesskeyLabel, shownaccesskeyLabel] =
document.querySelectorAll(".test-changetext");
is(
accesskeyLabel.textContent,
ORIG_TEXT, "Original text is correct accesskey"
);
is(
shownaccesskeyLabel.textContent,
ORIG_TEXT, "Original text is correct shownaccesskey"
);
let getWrapper = label => label.querySelector(".accesskey");
is(
getWrapper(accesskeyLabel).textContent,
ACCESSKEY, "Original accesskey character is wrapped accesskey"
);
is(
getWrapper(shownaccesskeyLabel).textContent,
ACCESSKEY, "Original accesskey character is wrapped accesskey"
);
// Set the textContent on the inner span so we don't hit `set textContent`
accesskeyLabel.firstElementChild.textContent = NEW_TEXT;
is(
accesskeyLabel.textContent,
NEW_TEXT, "Updated text is correct accesskey"
);
ok(!getWrapper(accesskeyLabel), "Accesskey span was removed accesskey");
// formatAccessKey waits a tick so we don't get infinite observer looping
await new Promise(r => queueMicrotask(r));
is(
getWrapper(accesskeyLabel).textContent,
ACCESSKEY, "Updated accesskey character is wrapped accesskey"
);
shownaccesskeyLabel.firstElementChild.textContent = NEW_TEXT;
is(
shownaccesskeyLabel.textContent,
NEW_TEXT, "Updated text is correct shownaccesskey"
);
ok(
!getWrapper(shownaccesskeyLabel), "Accesskey span was removed shownaccesskey"
);
// formatAccessKey waits a tick so we don't get infinite observer looping
await new Promise(r => queueMicrotask(r));
is(
getWrapper(shownaccesskeyLabel).textContent,
ACCESSKEY, "Updated accesskey character is wrapped accesskey"
);
});
</script>
</body>
</html>
Die Informationen auf dieser Webseite wurden
nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit,
noch Qualität der bereit gestellten Informationen zugesichert.
Bemerkung:
Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.
