This page documents the VoiceOver experience when using the <auro-combobox> component. It covers announcements, gestures, and workflows for both large and small viewports.

When focus is given to the component trigger the following is announced:

1. Label: label slot content
2. Current value: [current value or "no selection"]
3. Role: "combo box"
4. State hints:

   State	What gets announced
   Expanded	"collapsed" or "expanded"
   Required	"required"
   Invalid	"invalid data"
   Disabled	"dimmed"
   autocomplete	"has auto complete"

5. Additional description: helptext slot content if present (after a brief pause)

Announces each option "[option label], ["selected" if selected], ["dimmed" if disabled]" as you move.

3 finger swipe gesture may be used to scroll the option list.

The component may be closed | collapsed using a gesture.

• iOS VoiceOver: The two-finger "scrub" (zigzag / a "Z" shape) gesture acts as the 'Escape' key, commonly used to dismiss modal views.
• Android TalkBack: users typically swipe down then left (an "L" gesture) or use the back gesture to go back/close.
  
  How to Perform Android back/close gesture: Swipe inwards from either the left or right edge of the screen, typically from the middle-edge, to go to the previous screen.

When the component is closed | collapsed announces the expanded state change.

Examples: large tablet, typical size or larger desktop browser window

1. Focus
2. Open | Expand: When the component is opened | expanded announces the active option "[option label], ['selected' if selected]".
   Note: disabled options can not be active, this state would never be included in this announcement.
3. Navigate options
4. Select an option: Collapses the list, announces the expanded state change.

   ~OR~

   Close | Collapse without selecting an option: Collapses the list, announces the expanded state change.

Examples: mobile phone, very small desktop browser window

1. Focus
2. Open | Expand: Focus is moved to the fullscreen modal dialog Close button, announces the active option "[option label], ['selected' if selected]".
   Note: disabled options can not be active, this state would never be included in this announcement.
3. Navigate options
4. Select option: Closes the fullscreen modal dialog, announces the expanded state change.

   ~OR~

   Close | Collapse without selecting an option: Closes the fullscreen modal dialog, announces the expanded state change.

Key characteristics across both platforms:

• The label is always read first.
• The component role is announced as "combo box".
• disabled options are announced as "dimmed" and cannot be selected.

What VoiceOver does:

• Focuses the element and announces it (e.g., "[label], dimmed, combo box" on macOS / "[label], dimmed" on iOS).
• The word "dimmed" is VoiceOver's way of indicating disabled.
• The element remains in the focus order (Tab still reaches it).
• The user cannot interact with it — the option list can not be expanded, and no selection can be made.

Key distinction from aria-hidden: A disabled element is reachable but not operable. If you want VoiceOver to skip it entirely, you would need aria-hidden="true" or tabindex="-1", but that is generally not recommended for disabled controls — users benefit from knowing the field exists and why it may be unavailable.

This is consistent across NVDA and JAWS as well, though the announcement wording differs (e.g., NVDA says "unavailable").

When an <auro-combobox> is invalid the following occurs:

• Focus — VoiceOver announces "invalid data" (macOS) or "invalid entry" (iOS) after the element's label.
• The Help Text will render the error message and it will be included in the VoiceOver focus announcement.

Example: when focusing on an invalid <auro-combobox> the VoiceOver announces something like "Destination, invalid data, combo box, Please select a destination".