@progress/wct-a11y-spec/dist/angular/keyboard/timeline_keyboard.md

Contains accessibility and keyboard navigation specification of Telerik and Kendo web components.

## Managing the Focus


The Timeline component features two very different modes of rendering: vertical and horizontal. Those two modes require two very different approaches in terms of focus management:


 - Horizontal Timeline: should be implement as a `role: tablist` component. As a consequence it exposes to the page tab sequence only the currently active Tab (node on the timeline) and its tabpanel (the card element containing the item full description). The tab items focusing mechanism is roving tabindex. Only the active tab should have `tabindex="0"`, the remaining tabs should not be part of the tab sequence. Moreover, the component implements the selection follows focus strategy, meaning that when focus moves to a new tab, it gets activated and its tabpanel is made visible.
 - Vertical Timeline should be implemented as a collection of Buttons. Each event on the Timeline is a Button and it is part of the page tab sequence.

## Keyboard Shortcuts

### Shortcuts applicable to the Horizontal Timeline


When end is reached, the first tab is focused. When start is reached, the last tab is focused.

| Shortcut | Behavior |
| -------- | -------- |
| `Left Arrow` | Activates the previous tab (item). |
| `Right Arrow` | Activates the next tab (item). |
| `Home` | Focuses the first item and activates it. |
| `End` | Focuses the last item and activates it. |

### Shortcuts applicable to the Vertical Timeline

| Shortcut | Behavior |
| -------- | -------- |
| `Shift + Tab` | Focuses the previous item (button) in the Timeline. |
| `Tab` | Focuses the next item (button) in the Timeline. |
| `Enter` | If expandable, expands/collapses the currently focused item. |
| `Space` | If expandable, expands/collapses the currently focused item. |

## Resources

[ARIA Authoring Practices: Tabs with Automatic Activation](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/)

[ARIA Authoring Practices: Selection Follows Focus](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#decidingwhentomakeselectionautomaticallyfollowfocus)