vue-accordion
A behavioural and accessible accordion component.
Install
$ npm install @voorhoede/vue-accordion
Demo
View the demo.
Keyboard support
| Key | Function |
|---|---|
| Space or Enter | When focus is on the accordion header of a collapsed panel, expands the panel. When another panel is expanded, it collapses this panel. |
| Tab | - Moves focus to the next focusable element. - All focusable elements in the accordion are included in the Tab sequence. |
| Shift + Tab | - Moves focus to the previous focusable element. - All focusable elements in the accordion are included in the Tab sequence. |
| Down arrow | - When focus is on an accordion header, moves focus to the next accordion header. - When focus is on last accordion header, moves focus to first accordion header. |
| Up arrow | - When focus is on an accordion header, moves focus to the previous accordion header. - When focus is on first accordion header, moves focus to last accordion header. |
| Home | When focus is on an accordion header, moves focus to the first accordion header. |
| End | When focus is on an accordion header, moves focus to the last accordion header. |
Source: w3.org
Accessibility
Component has been tested on: