Shadow role — hybrid label & description

Each component has a shadow DOM label and description (with named slots). When slot content is present the component uses ariaLabelledByElements pointing at the shadow span. When slots are empty it falls back to ariaLabelledByElements pointing at the light DOM sibling set via the labelledby / describedby properties. Toggle the button below to switch modes and watch the debug panels update.

Current mode: slotted

Textfield

Email address We'll never share your email.

Checkbox

Subscribe to newsletter You can unsubscribe at any time.

Progress bar

Upload progress Uploading your files to the server.

Combobox

Favorite fruit Arrow keys navigate, Enter or Space selects.