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: