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

When focus moves to the trigger the following is announced:

1. Label: The trigger content or aria-label value
2. Role: "button" or "pop-up button"
3. State hints:

   State	What gets announced
   Expanded	"collapsed" or "expanded"
   Disabled	"dimmed"

4. Additional description: helpText slot content if present

When the dropdown is expanded or collapsed, VoiceOver announces the state change.

The dropdown may be closed | collapsed using a gesture.

• iOS VoiceOver: The two-finger "scrub" (zigzag / a "Z" shape) gesture acts as the 'Escape' key.
• Android TalkBack: Swipe down then left (an "L" gesture) or use the back gesture.

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

1. Focus trigger: Announces the trigger label and state
2. Open | Expand: Activating the trigger opens the dropdown bib; focus moves to the first focusable element within the bib
3. Navigate bib content: Tab through focusable elements within the bib
4. Close | Collapse: Pressing Escape or clicking outside collapses the dropdown

Examples: mobile phone, very small desktop browser window

1. Focus trigger: Announces the trigger label and state
2. Open | Expand: Opens a fullscreen modal; focus is trapped within the bib content
3. Navigate bib content: Swipe or Tab through focusable elements
4. Close: Activate the close button or use the scrub gesture (two-finger zigzag) to dismiss

What VoiceOver does:

• Focuses the element and announces it with "dimmed", indicating the control is disabled.
• The element remains in the focus order but cannot be operated.
• The dropdown cannot be opened.