Element : propriété ariaActiveDescendantElement

Value

Une sous-classe de l'objet HTMLElement qui représente le descendant actif, ou null s'il n'y a pas de descendant actif.

Description

La propriété est une alternative flexible à l'utilisation de l'attribut aria-activedescendant. Contrairement à aria-activedescendant, l'élément affecté à cette propriété n'a pas besoin d'avoir un attribut id.

La propriété reflète l'attribut aria-activedescendant de l'élément lorsqu'il est défini, mais uniquement pour les valeurs de id de référence qui correspondent à des éléments valides dans la portée. Si la propriété est définie, l'attribut correspondant est effacé. Pour plus d'informations sur les références d'éléments réfléchis et la portée, voir Références d'éléments réfléchis dans le guide Réflexion des attributs.

Exemples

Obtenir le descendant actif

Cet exemple montre comment utiliser ariaActiveDescendantElement pour obtenir le descendant actif actuel.

HTML

Le HTML définit une liste de boîtes de sélection pour différents types de rues, composée d'un élément HTML <div> avec le rôle listbox et des éléments <div> imbriqués pour chaque option. Le descendant actif est initialement défini sur l'élément avec un id de avenue en utilisant aria-activedescendant.

<div id="typeRue" role="listbox" aria-activedescendant="avenue">
  <div>Rue</div>
  <div id="avenue">Avenue</div>
  <div>Allée</div>
</div>

<pre id="journal"></pre>

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

JavaScript

Le code ci-dessous vérifie d'abord si ariaActiveDescendantElement est pris en charge. Si la propriété est prise en charge, le code enregistre ensuite la valeur de aria-activedescendant (un id de l'élément référencé) en utilisant Element.getAttribute(), l'élément de la propriété et le contenu textuel de l'élément.

const elementJournal = document.querySelector("#journal");
function journaliser(texte) {
  elementJournal.innerText = `${elementJournal.innerText}${texte}\n`;
  elementJournal.scrollTop = elementJournal.scrollHeight;
}

// Feature test for ariaActiveDescendantElement
if ("ariaActiveDescendantElement" in Element.prototype) {
  journaliser(
    `getAttribute(): ${typeRue.getAttribute("aria-activedescendant")}`,
  );
  journaliser(
    `ariaActiveDescendantElement: ${typeRue.ariaActiveDescendantElement}`,
  );
  journaliser(
    `text: ${typeRue.ariaActiveDescendantElement?.textContent.trim()}`,
  );
} else {
  journaliser(
    "ariaActiveDescendantElement n'est pas pris en charge par le navigateur",
  );
}

Résultat

Le journal ci-dessous montre la sortie du code ci-dessus. La valeur retournée par la propriété aria-activedescendant doit être "avenue", l'élément associé doit être un élément HTMLDivElement, et le texte de cet élément doit être Avenue.

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'attribut ARIA aria-activedescendant
• La propriété ElementInternals.ariaActiveDescendantElement
• Références d'éléments réfléchis dans le guide Réflexion des attributs.