This example shows how ariaActiveDescendantElement can be used to get the current active descendant.
The HTML defines a listbox for selecting different kinds of streets, consisting of a <div> element with the listbox role and nested <div> items for each of the options. The active descendant is initially set to the element with id of avenue using aria-activedescendant.
<div id="streetType" role="listbox" aria-activedescendant="avenue">
<div>Street</div>
<div id="avenue">Avenue</div>
<div>Lane</div>
</div>
#log {
height: 70px;
overflow: scroll;
padding: 0.5rem;
border: 1px solid black;
}
The code below first checks whether the ariaActiveDescendantElement is supported. It the property is supported the code then logs the value of aria-activedescendant (the id of the referenced element) using Element.getAttribute(), the property element, and the element's text content.
const logElement = document.querySelector("#log");
function log(text) {
logElement.innerText = `${logElement.innerText}${text}\n`;
logElement.scrollTop = logElement.scrollHeight;
}
// Feature test for ariaActiveDescendantElement
if ("ariaActiveDescendantElement" in Element.prototype) {
log(`getAttribute(): ${streetType.getAttribute("aria-activedescendant")}`);
log(`ariaActiveDescendantElement: ${streetType.ariaActiveDescendantElement}`);
log(`text: ${streetType.ariaActiveDescendantElement?.textContent.trim()}`);
} else {
log("ariaActiveDescendantElement not supported by browser");
}
The log below shows the output of the above code. The value returned from the aria-activedescendant property should be "avenue", the associated element should be a HTMLDivElement element, and the text in that element should be Avenue.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4