The `auro-select` component follows the W3C APG Select-Only Combobox pattern. This page documents the ARIA semantics, screen reader announcements, and other accessibility behaviors built into the component. For keyboard interaction details, see the Keyboard Behavior page. ARIA Roles and Attributes Trigger The trigger element exposes the following ARIA attributes: | Attribute | Value | Description | |---|---|---| | `role` | `combobox` | Identifies the trigger as a combobox control. | | `aria-expanded` | `true` / `false` | Reflects whether the bib (listbox) is currently open. | | `aria-controls` | `{bib-id}` | References the bib element that the trigger controls. | | `aria-labelledby` | `{label-id}` | Associates the trigger with its visible label text. | | `aria-activedescendant` | `{option-id}` | Points to the currently highlighted option when the bib is open. Cleared when the bib closes. | Menu Options Each menu option exposes the following ARIA attributes: | Attribute | Value | Description | |---|---|---| | `role` | `option` | Identifies each item as a selectable option. | | `aria-selected` | `true` / `false` | Indicates whether the option is currently selected. | | `aria-setsize` | `{count}` | Total number of options available, so screen readers can announce "option X of Y." | | `aria-posinset` | `{index}` | The 1-based position of the option within the set. | Help Text and Errors - Help text is associated with the component so screen readers can announce contextual guidance. - When validation fails, the error message is rendered with `role="alert"` and `aria-live="assertive"` to ensure it is announced immediately. Active Descendant Focus management in `auro-select` follows the **active descendant** pattern rather than moving DOM focus between options: 1. When the bib opens, focus remains on the **trigger** element. 2. Arrow keys update `aria-activedescendant` on the trigger to reference the currently highlighted option. 3. This allows screen readers to announce each option as the user navigates without moving focus away from the trigger. When the bib closes, `aria-activedescendant` is cleared so stale references are not announced. Screen Reader Announcements The component uses a visually hidden live region (`aria-live="polite"`) to announce state changes: - **Option highlighted** — When an option becomes active (via arrow keys or type-ahead), the live region announces the option text along with its selected state (e.g. "Apples, not selected"). - **Option selected** — After an option is selected, the live region announces the selected value (e.g. "Apples, selected"). This announcement is slightly delayed to avoid being overridden by the bib's collapse announcement. Accessible Labels - The `label` slot content is used as the accessible name for both the trigger (via `aria-labelledby`) and the menu (via `aria-label`). - A label is required. Without it, assistive technology users will not have context for what the select controls. - The `(optional)` label is automatically appended when the `required` attribute is not set. Fullscreen (Modal) Behavior On smaller viewports, the bib opens as a fullscreen modal dialog: - The dialog is opened with `showModal()`, which provides **native focus trapping** — only elements inside the dialog are reachable via Tab. - Content outside the dialog is automatically made **inert** by the browser, preventing interaction with the page behind it. - The dialog receives an accessible label derived from the component's `label` slot text via `aria-labelledby`. - A close button inside the dialog is focused when the modal opens, giving screen reader users an immediate action to dismiss it. - Touch scrolling on the page behind the dialog is blocked to prevent the background from scrolling into view. Modifier Keys The **Meta** key (Command on macOS, Windows/Super elsewhere) is intentionally not used as a modifier for select keyboard shortcuts. On Windows, Linux, and ChromeOS, the operating system intercepts `Meta` + Arrow combinations for window management (e.g. window snapping) before the browser receives the event, so any shortcut bound to `Meta` + Arrow would work only on macOS and silently fail on other platforms. To jump to the first or last option in a way that works uniformly across platforms, use **Home** and **End**, which follow the WAI-ARIA Select-Only Combobox pattern. Reduced Motion The component respects the `prefers-reduced-motion` media query. When the user has requested reduced motion, scroll animations (e.g. scrolling the selected or active option into view) use instant scrolling instead of smooth scrolling. Form Participation A hidden native `` element is rendered alongside the custom component with `aria-hidden="true"`. This element: - Participates in HTML form submissions, ensuring the selected value is included in form data. - Supports the `required` and `disabled` attributes. - Is invisible and unreachable by assistive technology — all user interaction goes through the custom component.