demo · v133

Listbox + fieldset across shadow roots

A <ds-listbox> with an internal role="listbox" element. External aria-activedescendant on the field can now reference that internal element by id through shadowrootreferencetarget — the use case ARIA's group/listbox/composite-widget patterns depend on.

Inspect with the accessibility tree (DevTools → Elements → Accessibility) to see the role, name, and active descendant resolve into the shadow tree.
colour palette
aria-activedescendant on the host points at #opt-blue — an id that lives inside the component's shadow tree. The reference resolves because the component declared shadowrootreferencetarget="opt-blue" on its shadow root.

component definition

class DSListbox extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({
      mode: "open",
      shadowRootReferenceTarget: "opt-blue"
    }).innerHTML = `
      <ul role="listbox">
        <li id="opt-red"   role="option">red</li>
        <li id="opt-blue"  role="option" aria-selected="true">blue</li>
        <li id="opt-green" role="option">green</li>
      </ul>`;
  }
}
customElements.define("ds-listbox", DSListbox);

see also

scenario focus

Select a scenario to focus its rendered example and summary.