Shadow DOM label and help

Role on the host via ElementInternals. Label and help containers live in shadow DOM with <slot name="label"> and <slot name="help-text"> for slottable text. Wiring uses internals.ariaLabelledByElements and internals.ariaDescribedByElements on those shadow elements, with mirrored internals.ariaLabel / ariaDescription.

Textfield

Email address Role is on the host; the inner input is presentational.

Resolved ARIA references

Checkbox

Subscribe to newsletter Space toggles; role and aria-checked are on the host.

Resolved ARIA references

Progress bar

Upload progress Label and description are in shadow; role and value live on internals.

Resolved ARIA references

Combobox

Favorite fruit Choose a fruit from the list. Arrow keys navigate; Enter selects.

Apple

Banana

Cherry

Date

Elderberry

Resolved ARIA references

Button

Save changes Role and accessible name are on the host; Enter and Space activate.