<
html>
<
head>
<
title>Accessible description change event testing</
title>
<
link rel=
"stylesheet" type=
"text/css"
href=
"chrome://mochikit/content/tests/SimpleTest/test.css" />
<
script src=
"chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></
script>
<
script src=
"chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></
script>
<
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(
"chrome://mochitests/content/a11y/accessible/tests/mochitest/promisified-events.js",
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"
href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=991969"
title=
"Event not fired when description changes">
Bug
991969
</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>
