Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<html>
<head>
<title>Accessible description change event testing</title>
<link rel="stylesheet" type="text/css"
<script type="application/javascript"
src="../common.js"></script>
<script type="application/javascript"
src="../events.js"></script>
<script type="application/javascript"
src="../role.js"></script>
<script type="application/javascript"
src="../states.js"></script>
<script type="application/javascript">
let PromEvents = {};
Services.scriptloader.loadSubScript(
PromEvents);
// //////////////////////////////////////////////////////////////////////////
// Invokers
function setAttr(aID, aAttr, aValue, aChecker) {
this.eventSeq = [ aChecker ];
this.invoke = function setAttr_invoke() {
getNode(aID).setAttribute(aAttr, aValue);
};
this.getID = function setAttr_getID() {
return "set attr '" + aAttr + "', value '" + aValue + "'";
};
}
// //////////////////////////////////////////////////////////////////////////
// Do tests
// gA11yEventDumpToConsole = true; // debuggin
var gQueue = null;
async function doTests() {
gQueue = new eventQueue();
// Later tests use await.
let queueFinished = new Promise(resolve => {
gQueue.onFinish = function() {
resolve();
return DO_NOT_FINISH_TEST;
};
});
gQueue.push(new setAttr("tst1", "aria-describedby", "display",
new invokerChecker(EVENT_DESCRIPTION_CHANGE, "tst1")));
gQueue.push(new setAttr("tst1", "title", "title",
new unexpectedInvokerChecker(EVENT_DESCRIPTION_CHANGE, "tst1")));
// A title has lower priority over text content. There should be no name change event.
gQueue.push(new setAttr("tst2", "title", "title",
new unexpectedInvokerChecker(EVENT_NAME_CHANGE, "tst2")));
gQueue.invoke();
await queueFinished;
// Tests beyond this point use await rather than eventQueue.
const describedBy = getNode("describedBy");
const description = getNode("description");
let descChanged = PromEvents.waitForEvent(
EVENT_DESCRIPTION_CHANGE,
describedBy
);
info("Changing text of aria-describedby target");
description.textContent = "d2";
await descChanged;
descChanged = PromEvents.waitForEvent(
EVENT_DESCRIPTION_CHANGE,
describedBy
);
info("Adding node to aria-describedby target");
description.innerHTML = '<p id="descriptionChild">d3</p>';
await descChanged;
descChanged = PromEvents.waitForEvent(
EVENT_DESCRIPTION_CHANGE,
describedBy
);
info("Changing text of aria-describedby target's child");
getNode("descriptionChild").textContent = "d4";
await descChanged;
const lateDescribedBy = getNode("lateDescribedBy");
descChanged = PromEvents.waitForEvent(
EVENT_DESCRIPTION_CHANGE,
lateDescribedBy
);
info("Setting aria-describedby");
lateDescribedBy.setAttribute("aria-describedby", "lateDescription");
await descChanged;
descChanged = PromEvents.waitForEvent(
EVENT_DESCRIPTION_CHANGE,
lateDescribedBy
);
info("Changing text of late aria-describedby target's child");
getNode("lateDescriptionChild").textContent = "d2";
await descChanged;
SimpleTest.finish();
}
SimpleTest.waitForExplicitFinish();
addA11yLoadEvent(doTests);
</script>
</head>
<body>
<a target="_blank"
title="Event not fired when description changes">
</a>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test">
</pre>
<button id="tst1">btn1</button>
<button id="tst2">btn2</button>
<div id="describedBy" aria-describedby="description"></div>
<div id="description">d1</div>
<div id="lateDescribedBy"></div>
<div id="lateDescription"><p id="lateDescriptionChild">d1</p></div>
<div id="eventdump"></div>
</body>
</html>