Element: ariaControlsElements-Eigenschaft

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

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 gesteuerten Elemente festzulegen. Im Gegensatz zu aria-controls müssen die dieser Eigenschaft zugewiesenen Elemente 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 mit gültigen In-Scope-Elementen übereinstimmen. Wenn die Eigenschaft festgelegt ist, wird das entsprechende Attribut gelöscht. Weitere Informationen zu reflektierten Elementreferenzen und dem Umfang finden Sie unter Reflected element references im Reflected attributes-Leitfaden.

Dieses Beispiel zeigt, wie ariaControlsElements verwendet werden kann, um die gesteuerten 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 steuert. Die Verweise auf die gesteuerten 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 geöffnet 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() (ein String, der die id-Werte der referenzierten Elemente auflistet). Es prüft dann, ob die ariaControlsElements-Eigenschaft unterstützt wird, und wenn ja, protokolliert es ihren Wert. Schließlich gibt es den inneren Text für jedes der gesteuerten Elemente zurück und protokolliert diesen.

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 auf den Button unten, um die Panels anzuzeigen und auszublenden. Das Protokoll zeigt die ursprünglichen Elementreferenzen, die zugeordneten/zurückgegebenen Elemente und den inneren Text jedes Elements.

• aria-controls-Attribut
• ElementInternals.ariaControlsElements
• Reflected element references im Attribute reflection-Leitfaden