Shadow DOM accessibility: focus and cross-boundary ARIA

WHAT THIS TESTS This probes deep knowledge of Shadow DOM encapsulation and its specific clash with ARIA, which depends heavily on ID references that do not cross shadow boundaries.

A GOOD ANSWER COVERS The root problem is ID scoping. Many ARIA relationships are expressed as IDREFs, aria-labelledby, aria-describedby, aria-controls, aria-owns, and aria-activedescendant, and an IDREF can only reference an element in the same DOM tree, that is, the same shadow root or the light DOM, not across the boundary. So a label in the light DOM cannot label an input inside a component's shadow root by id, and a combobox cannot point aria-activedescendant at an option in a different root. Focus traversal is also affected: focus does move into shadow trees, but a custom element is not focusable by default, and you often want a click or Tab on the host to land on an inner control, which requires delegatesFocus on the shadow root. Mitigations: keep elements that must reference each other inside the same shadow root; use delegatesFocus true for focus delegation; set ARIA properties programmatically via ElementInternals and the ARIAMixin reflective properties like ariaLabel and role instead of cross-boundary IDREFs; pass plain string labels through attributes rather than id references; and watch the emerging cross-root ARIA reference proposals. Slotted light-DOM content keeps its own IDs usable within the light tree.

COMMON WRONG ANSWERS Assuming aria-labelledby and friends just work across the shadow boundary. Forgetting delegatesFocus so the host is not properly focusable. Exposing inner ids and telling consumers to reference them across the boundary. Ignoring that role and label must often be set via ElementInternals.

LIKELY FOLLOW-UPS What does delegatesFocus do exactly. How does ElementInternals help expose semantics. How do slotted nodes differ from shadow nodes for ARIA.

ONE CONCRETE EXAMPLE A custom text-field has its input inside a shadow root; a page label cannot aria-labelledby that input by id across the boundary, so instead the component accepts a label string attribute and applies it to the input via ElementInternals ariaLabel, while delegatesFocus true ensures Tab and clicks on the host focus the inner input.