Input Search Table of Contents

• Accessibility support
• Development considerations
• Limitations
• Tests

Accessibility support# Keyboard Key / stateFunctionTab, Shift-TabMoves focus to the next (or previous) focusable element. ARIA enhancements External ARIA provided by the aria property: Use the aria property to pass supported attributes to the native <input> inside the shadow DOM, for example when you implement a combobox-style pattern (search field + suggestion list). ARIAUsageroleOverrides the implicit role when needed (e.g. combobox for an autocomplete pattern alongside a separate listbox).aria-autocompleteIndicates whether and how the component predicts text (none, inline, list, both).aria-controlsIdentifies the element(s) whose contents or presence are controlled by the input (e.g. the suggestion list’s id).aria-expandedIndicates whether the suggestion popup or related surface is expanded or collapsed.aria-haspopupIndicates that activating the input triggers a popup (e.g. listbox, dialog).aria-labelDefines an accessible name when the visible label is insufficient or hidden; prefer a visible label for most cases. You can pass a JSON object on the element (vanilla JS) or use your framework’s prop binding, for example aria={{ role: 'combobox', 'aria-expanded': isOpen, 'aria-haspopup': 'listbox' }}. Internal ARIA that is managed by the component: The following apply in addition to any aria values you pass. On the native search input, aria-describedby, aria-invalid, aria-disabled, and aria-readonly are always set by the component and take precedence over the same keys if they were supplied in aria. ARIAUsagearia-describedby="IDREF"Combines references for description, state message, and loading feedback on the native input.aria-invalid="true"When state is error.aria-disabled="true"When disabled or loading is active.aria-readonly="true"When readOnly is active.role="status", role="alert"When message and state or loading change, the status message region is exposed for announcements.aria-hidden="true"On decorative icons (e.g. search indicator). Development considerations# Disabled state In general, avoid using the disabled state. Disabled elements are no longer focusable and may be missed by screen reader users. They can also confuse sighted users if the reason they are disabled is not made clear. Combobox and suggestion lists For a search field that controls a separate list of suggestions, set the aria property so the input exposes the expected semantics supported by this component, for example: role: 'combobox' aria-controls referring to the id of the associated listbox (or other controlled region). Hint: currently not supported across shadow DOM boundaries aria-expanded reflecting open/closed state aria-haspopup indicating the presence of a popup (e.g. listbox) aria-autocomplete as required by your pattern Associate the suggestion list and keyboard interaction in the host application according to the ARIA combobox pattern you implement there. Limitations# Due to the nature of Web Components and shadow DOM, there are limitations when using some ARIA attributes to define (IDREF) relationships between elements across different shadow DOMs or shadow DOM/light DOM combinations. ARIASupportaria-owns🚫aria-activedescendant🚫 Tests# Automated TechnologySupportAXE-Core (WCAG 2.2 AA, Best-Practice)✅High-Contrast Mode (light/dark)✅Text-Zoom (200%)✅ Manual TechnologySupportKeyboard✅Screen reader (VoiceOver, NVDA)✅