JavaScript Element ariaActiveDescendantElement Property

What You’ll Learn

Element.ariaActiveDescendantElement is an instance property that points to the current active descendant for widgets like listboxes and comboboxes. Learn how it relates to aria-activedescendant, why you can skip giving the target an id, how get/set reflection works, and how to feature-detect—with five examples and try-it labs.

Introduction

In many ARIA widgets, keyboard focus stays on a container (for example a listbox) while a child option is the “active” one announced to assistive technology. The classic way to express that is the aria-activedescendant attribute with an id string.

ariaActiveDescendantElement is the modern element reference form of the same idea: you assign (or read) a real DOM element instead of managing unique ids. MDN: unlike the attribute, the assigned element does not have to have an id.

listbox.ariaActiveDescendantElement = optionElement;
console.log(listbox.ariaActiveDescendantElement?.textContent);

Understanding the Property

MDN: the ariaActiveDescendantElement property of the Element interface represents the current active element when focus is on a composite widget, combobox, textbox, group, or application.

• Get / set — read the active descendant, or assign one (or null).
• Flexible alternative to the aria-activedescendant attribute.
• No id required on the target when you set the property.
• Reflection — reads valid in-scope id refs from the attribute; setting the property clears the attribute.

📝 Syntax

ariaActiveDescendantElement

Value

A subclass of HTMLElement that represents the active descendant, or null if there is no active descendant.

⚖️ Property vs aria-activedescendant Attribute

MDN: the property reflects the attribute when it is defined, but only for reference id values that match valid in-scope elements.

📋 MDN Listbox Shape

MDN’s example uses a role="listbox" container with aria-activedescendant pointing at an option id:

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

With the property supported, you can read the live element and its text without parsing the id string yourself.

Examples Gallery

Examples follow MDN Element: ariaActiveDescendantElement. Labs feature-detect first so older browsers still show a clear message.

if ("ariaActiveDescendantElement" in Element.prototype) {
  console.log("ariaActiveDescendantElement is supported");
} else {
  console.log("ariaActiveDescendantElement not supported by browser");
}

ariaActiveDescendantElement is supported

const streetType = document.getElementById("streetType");

if ("ariaActiveDescendantElement" in Element.prototype) {
  console.log("getAttribute():", streetType.getAttribute("aria-activedescendant"));
  console.log("ariaActiveDescendantElement:", streetType.ariaActiveDescendantElement);
  console.log("text:", streetType.ariaActiveDescendantElement?.textContent.trim());
} else {
  console.log("ariaActiveDescendantElement not supported by browser");
}

// HTML (MDN):
// <div id="streetType" role="listbox" aria-activedescendant="avenue">
//   <div>Street</div>
//   <div id="avenue">Avenue</div>
//   <div>Lane</div>
// </div>

getAttribute(): avenue
ariaActiveDescendantElement: [object HTMLDivElement]
text: Avenue

const listbox = document.createElement("div");
listbox.setAttribute("role", "listbox");
const optA = document.createElement("div");
optA.textContent = "Street";
const optB = document.createElement("div");
optB.textContent = "Avenue";
listbox.append(optA, optB);
document.body.appendChild(listbox);

if (!("ariaActiveDescendantElement" in listbox)) {
  console.log("Property not supported — fall back to aria-activedescendant ids");
} else {
  listbox.ariaActiveDescendantElement = optB;
  console.log({
    text: listbox.ariaActiveDescendantElement.textContent,
    attrAfterSet: listbox.getAttribute("aria-activedescendant"),
    note: "Setting the property clears the attribute (MDN)"
  });
}

{
  "text": "Avenue",
  "attrAfterSet": null,
  "note": "Setting the property clears the attribute (MDN)"
}

const widget = document.createElement("div");
widget.setAttribute("role", "listbox");
const item = document.createElement("div");
item.textContent = "Lane";
widget.appendChild(item);
document.body.appendChild(widget);

if (!("ariaActiveDescendantElement" in widget)) {
  console.log("Property not supported");
} else {
  widget.ariaActiveDescendantElement = item;
  console.log("before clear:", widget.ariaActiveDescendantElement?.textContent);
  widget.ariaActiveDescendantElement = null;
  console.log("after clear:", widget.ariaActiveDescendantElement);
}

before clear: Lane
after clear: null

const supported = "ariaActiveDescendantElement" in Element.prototype;
console.log({
  supported,
  descriptor: supported
    ? typeof Object.getOwnPropertyDescriptor(Element.prototype, "ariaActiveDescendantElement")
    : "n/a",
  tip: "Prefer element refs for dynamic widgets; keep attribute fallback for older browsers",
  status: "Baseline 2025 — newly available (feature-detect older engines)"
});

{
  "supported": true,
  "descriptor": "object",
  "tip": "Prefer element refs for dynamic widgets; keep attribute fallback for older browsers",
  "status": "Baseline 2025 — newly available (feature-detect older engines)"
}

🚀 Common Use Cases

• Listbox / menu keyboard navigation without inventing unique option ids.
• Combobox popup option highlight while focus stays on the input.
• Updating the active option across Shadow DOM where idrefs are awkward.
• Migrating widgets from string aria-activedescendant to element refs.
• Custom elements via ElementInternals.ariaActiveDescendantElement.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline 2025).
• Still feature-detect on older browsers.
• Setting the property clears aria-activedescendant (MDN).
• Also available on ElementInternals for custom elements.
• Related: activeViewTransition, Node, EventTarget, JavaScript hub.

💡 Best Practices