The counter component is itself a focusable element. There are no sub-parts that are separately focusable.
When multiple counters are placed inside a counter group the component behaves as an auro-dropdown. The trigger element renders a counter group label and a summary of all counter labels and current values. The dropdown bib renders all counters inside of the group.
The trigger is a focusable element and participates in the standard tab order, responding to Tab and Shift+Tab key events per
When the component is disabled it is removed from the tabindex sequence. VoiceOver's virtual cursor (swipe navigation) can still encounter the component, but standard keyboard Tab navigation skips it.
When the bib is collapsed, the bib content is excluded from the tab sequence. When expanded, focusable elements within the bib content are included in the natural tab order. In fullscreen mode, focus is trapped within the bib, and the tab sequence cycles through the bib content focusable elements until the bib is closed or the viewport no longer meets the fullscreen condition and is rendered as a popover.
| Key | Modifier | Current State | Focus Element | Behavior |
|---|---|---|---|---|
| ArrowDown | - | * | Trigger element. | Decrements the counter value by 1. |
| ArrowUp | - | * | Trigger element. | Increments the counter value by 1. |
Note: The following keyboard behavior is unsupported at this time:
- Home: sets the counter value to the defined minimum (default 0)
- End: sets the counter value to the defined maximum (default 9)
- PageUp: (optional) Increases the value by a larger step than Up Arrow.
- PageDown: (optional) Decreases the value by a larger step than Down Arrow.
The counter group itself does not have any key event handlers other than those inherited from the dropdown component. However, when the counter group is expanded or opened the first counter in the bib receives focus. When the counter group is collapsed or closed by any method other than the Tab key (e.g., the Escape key), focus moves to the trigger element.
| Key | Modifier | Current State | Focus Element | Behavior |
|---|---|---|---|---|
| Enter | - | Collapsed | Trigger or any focusable element within the trigger. | Opens the bib. |
| - | Expanded | Trigger or any focusable element within the trigger. | Closes the bib. | |
| Escape | - | Expanded |
Component :host or any focusable element within the component.
|
Closes the bib. |
| Space | - | Collapsed | Trigger or any focusable element within the trigger. | Opens the bib. |
| - | Expanded | Trigger or any focusable element within the trigger. | Closes the bib. |