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="../promisified-events.js"></script>
<script type="application/javascript"
src="../role.js"></script>
<script type="application/javascript"
src="../states.js"></script>
<script type="application/javascript">
// //////////////////////////////////////////////////////////////////////////
// Do tests
// gA11yEventDumpToConsole = true; // debuggin
async function doTests() {
let descChanged = waitForEvent(EVENT_DESCRIPTION_CHANGE, "tst1");
getNode("tst1").setAttribute("aria-describedby", "display");
await descChanged;
let unexpected = new UnexpectedEvents([
[EVENT_DESCRIPTION_CHANGE, "tst1"],
]);
getNode("tst1").setAttribute("title", "title");
await unexpected.flush();
unexpected.stop();
// A title has lower priority over text content. There should be no name change event.
unexpected = new UnexpectedEvents([[EVENT_NAME_CHANGE, "tst2"]]);
getNode("tst2").setAttribute("title", "title");
await unexpected.flush();
unexpected.stop();
const describedBy = getNode("describedBy");
const description = getNode("description");
descChanged = waitForEvent(EVENT_DESCRIPTION_CHANGE, describedBy);
info("Changing text of aria-describedby target");
description.textContent = "d2";
await descChanged;
descChanged = waitForEvent(EVENT_DESCRIPTION_CHANGE, describedBy);
info("Adding node to aria-describedby target");
description.innerHTML = '<p id="descriptionChild">d3</p>';
await descChanged;
descChanged = 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 = waitForEvent(EVENT_DESCRIPTION_CHANGE, lateDescribedBy);
info("Setting aria-describedby");
lateDescribedBy.setAttribute("aria-describedby", "lateDescription");
await descChanged;
descChanged = 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>