This page documents the VoiceOver experience when using the <auro-counter> component. It covers announcements and gestures for interacting with standalone counters, counter groups, and dropdown counter groups.

When focus moves to a counter's spinbutton the following is announced:

1. Label: The counter label text (from the default slot)
2. Role: "incrementable" or "stepper" (spinbutton)
3. Current value: The current numeric value
4. Range: "from [min] to [max]" when min/max are set
5. State hints:

   State	What gets announced
   Disabled	"dimmed"
   Invalid	"invalid data"

When focus moves to a counter button the following is announced:

1. Label: The button's accessible label (e.g. "decrease [counter label]" or "increase [counter label]")
2. Role: "button"
3. State: "dimmed" when the counter is at its min or max boundary

Custom button labels can be provided using the ariaLabel.minus and ariaLabel.plus slots.

When the counter value changes (via button activation or arrow keys), VoiceOver announces the updated value through the aria-valuenow attribute on the spinbutton.

1. Focus decrement button: Announces button label and state
2. Focus spinbutton: Announces label, value, and range
3. Focus increment button: Announces button label and state
4. Interact: Activate buttons or use arrow keys to change the value

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

1. Focus trigger: Announces the label and current summary value
2. Open | Expand: Activating the trigger expands the dropdown bib containing the counters
3. Navigate counters: Tab through individual counter controls within the bib
4. Close | Collapse: Pressing Escape collapses the dropdown

Examples: mobile phone, very small desktop browser window

1. Focus trigger: Announces the label and current summary value
2. Open | Expand: Opens a fullscreen modal dialog; focus moves to the close button
3. Navigate counters: Swipe or Tab through individual counter controls
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.
• Increment and decrement buttons are also announced as "dimmed" and cannot be activated.

When the counter reaches its minimum or maximum value:

• The corresponding button (decrement at min, increment at max) is announced as "dimmed".
• The button cannot be activated, preventing the value from going out of range.