Element: ariaControlsElements-Eigenschaft

Ein Array von Unterklassen von HTMLElement, das die Elemente darstellt, die von diesem Element kontrolliert werden.

Beim Lesen ist das zurückgegebene Array statisch und schreibgeschützt. Beim Schreiben wird das zugewiesene Array kopiert: Nachfolgende Änderungen am Array beeinflussen den Wert der Eigenschaft nicht.

Die Eigenschaft ist eine flexible Alternative zur Verwendung des aria-controls-Attributs, um die kontrollierten Elemente festzulegen. Im Gegensatz zu aria-controls müssen die Elemente, die dieser Eigenschaft zugewiesen sind, kein id-Attribut haben.

Die Eigenschaft spiegelt das aria-controls-Attribut wider, wenn es definiert ist, jedoch nur für aufgelistete 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 reflektierten Elementreferenzen und Geltungsbereichen finden Sie unter Reflektierte Elementreferenzen im Reflexionsattribute-Leitfaden.

Dieses Beispiel zeigt, wie ariaControlsElements verwendet werden kann, um die kontrollierten Elemente abzurufen, die mit aria-controls festgelegt wurden.

HTML

Das HTML definiert zuerst ein <button>-Element und zwei <div>-Elemente, panel1 und panel2, die es kontrolliert. Die Referenzen zu den kontrollierten Panels sind im aria-controls-Attribut des Buttons aufgelistet.

<button id="toggleButton" aria-controls="panel1 panel2" aria-expanded="false">
  Show Details
</button>

<div class="panel" id="panel1" aria-hidden="true">
  <p>Panel1 opened/closed by button.</p>
</div>

<div class="panel" id="panel2" aria-hidden="true">
  <p>Panel2 opened/closed by button.</p>
</div>

.panel {
  display: none; /* Initially hidden */
  border: 1px solid #ccc;
  padding: 5px;
  margin-top: 5px;
}

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

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

JavaScript

Der Code richtet zunächst die Panels so ein, dass sie basierend auf dem aria-expanded-Attribut des Buttons ein- oder ausgeblendet werden.

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

const toggleButton = document.querySelector("#toggleButton");
const panel1 = document.querySelector("#panel1");
const panel2 = document.querySelector("#panel2");

toggleButton.addEventListener("click", () => {
  const isExpanded = toggleButton.getAttribute("aria-expanded") === "true";

  toggleButton.setAttribute("aria-expanded", !isExpanded);
  panel1.style.display = isExpanded ? "none" : "block";
  panel1.setAttribute("aria-hidden", isExpanded); //true when hidden, false when shown.

  panel2.style.display = isExpanded ? "none" : "block";
  panel2.setAttribute("aria-hidden", isExpanded); //true when hidden, false when shown.
});

Als Nächstes holt das Beispiel den Wert des aria-controls-Attributs mit Element.getAttribute() (einem String, der die id-Werte der referenzierten Elemente auflistet). Dann wird geprüft, ob die ariaControlsElements-Eigenschaft unterstützt wird, und falls ja, wird deren Wert protokolliert. Schließlich wird der inhaltliche Text für jedes der kontrollierten Elemente zurückgegeben und protokolliert.

log(`aria-controls: ${toggleButton.getAttribute("aria-controls")}`);
// Feature test for ariaControlsElements
if ("ariaControlsElements" in Element.prototype) {
  // Get ariaControlsElements
  const controlledElements = toggleButton.ariaControlsElements;
  log(`ariaControlsElements: ${controlledElements}`);

  // List innerText for each of the ariaControlsElements
  controlledElements.forEach((controlled) => {
    log(` Controlled element text: ${controlled.textContent.trim()}`);
  });
} else {
  log("element.ariaControlsElements: not supported by browser");
}

Ergebnis

Klicken Sie unten auf die Schaltfläche, um die Panels anzuzeigen und auszublenden. Das Protokoll zeigt die ursprünglichen Elementreferenzen, die zugeordneten/zurückgegebenen Elemente und den inhaltlichen Text jedes Elements.

• aria-controls-Attribut
• ElementInternals.ariaControlsElements
• Reflektierte Elementreferenzen im Attributreflexion-Leitfaden