TheariaActiveDescendantElement property of theElement interface represents the current active element when focus is on acomposite widget,combobox,textbox,group, orapplication.

Thearia-activedescendant topic contains additional information about how the attribute and property should be used.

Value

A subclass ofHTMLElement that represents the active descendant, ornull if there is no active descendant.

Description

The property is a flexible alternative to using thearia-activedescendant attribute.Unlikearia-activedescendant, the element assigned to this property does not have to have anid attribute.

The property reflects the element'saria-activedescendant attribute when it is defined, but only for referenceid values that match valid in-scope elements.If the property is set, then the corresponding attribute is cleared.For more information about reflected element references and scope seeReflected element references in theReflected attributes guide.

Examples

Get the active descendant

This example shows howariaActiveDescendantElement can be used to get the current active descendant.

HTML

The HTML defines a listbox for selecting different kinds of streets, consisting of a<div> element with thelistbox role and nested<div> items for each of the options.The active descendant is initially set to the element withid ofavenue usingaria-activedescendant.

<div role="listbox" aria-activedescendant="avenue">  <div>Street</div>  <div>Avenue</div>  <div>Lane</div></div>

<pre></pre>

#log {  height: 70px;  overflow: scroll;  padding: 0.5rem;  border: 1px solid black;}

JavaScript

The code below first checks whether theariaActiveDescendantElement is supported.It the property is supported the code then logs the value ofaria-activedescendant (theid of the referenced element) usingElement.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 ariaActiveDescendantElementif ("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");}

Result

The log below shows the output of the above code.The value returned from thearia-activedescendant property should be"avenue", the associated element should be aHTMLDivElement element, and the text in that element should beAvenue.

Specifications

Browser compatibility

See also

• aria-activedescendant attribute
• ElementInternals.ariaActiveDescendantElement
• Reflected element references in theAttribute reflection guide.