Element: ariaActiveDescendantElement Eigenschaft

Eine Unterklasse von HTMLElement, die den aktiven Nachfahren repräsentiert, oder null, wenn kein aktiver Nachfahre existiert.

Die Eigenschaft ist eine flexible Alternative zur Verwendung des aria-activedescendant-Attributs. Im Gegensatz zu aria-activedescendant muss das einem Element zugewiesene Objekt kein id-Attribut haben.

Die Eigenschaft spiegelt das aria-activedescendant-Attribut eines Elements wider, wenn es definiert ist, jedoch nur für Referenz-id-Werte, die gültigen im Geltungsbereich befindlichen Elementen entsprechen. Wenn die Eigenschaft gesetzt wird, wird das entsprechende Attribut gelöscht. Weitere Informationen zu referenzierten Elementeigenschaften und Geltungsbereichen finden Sie unter Reflektierte Elemente-Referenzen im Reflektierte Attribute-Leitfaden.

Dieses Beispiel zeigt, wie ariaActiveDescendantElement verwendet werden kann, um den aktuellen aktiven Nachfahren zu bekommen.

HTML

Das HTML definiert eine Listbox zur Auswahl verschiedener Straßenarten, bestehend aus einem <div>-Element mit der listbox-Rolle und verschachtelten <div>-Elementen für jede der Optionen. Der aktive Nachfahre wird zunächst auf das Element mit id avenue unter Verwendung von aria-activedescendant gesetzt.

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

<pre id="log"></pre>

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

JavaScript

Der unten stehende Code überprüft zuerst, ob ariaActiveDescendantElement unterstützt wird. Wenn die Eigenschaft unterstützt wird, gibt der Code dann den Wert von aria-activedescendant (die id des referenzierten Elements) unter Verwendung von Element.getAttribute(), das Eigenschaftselement und den Textinhalt des Elements aus.

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");
}

Ergebnis

Das untenstehende Protokoll zeigt die Ausgabe des obigen Codes. Der von der Eigenschaft aria-activedescendant zurückgegebene Wert sollte "avenue" sein, das zugeordnete Element sollte ein HTMLDivElement-Element sein, und der Text in diesem Element sollte Avenue lauten.

• aria-activedescendant-Attribut
• ElementInternals.ariaActiveDescendantElement
• Reflektierte Elemente-Referenzen im Attribute reflection-Leitfaden.