# Awesome Accessible Tabpanel

By @pankajparashar | Based on @thierrykoblentz's article

### Color

- Blue
- White
- Red

### Size

- X-Small
- X-Small
- Small
- Medium
- Large
- X-Large

### Material

- Whool
- Coton
- Silk

### Variable height
tab

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo impedit expedita praesentium illum sunt voluptates itaque et placeat, est, fugit nesciunt voluptatem consequuntur, reiciendis beatae ducimus. Ex earum nihil, eum..

### Blank panel

Here is a link to the article . This link is here to better test the sequential navigation.

## Features

1. Supports keyboard navigation.
2. First class support for screen readers. Designed with accessibility in mind.
3. RTL support.
4. Markup is devoid of any jump links.
5. Tabpanel switches to an Accordion when the last tab header wraps ( `:resize` , `:load` ).
6. Can work as an Accordion out of the box with a simple change in parameter.
7. Obviously works equally well with Mouse and Touch devices too.
8. Shows all the content when JS is disabled.

## Keyboard Shortcuts

Assuming the focus is on the widget.

Shortcut | Description
`Right` / `Down` | Open the next tab/panel in cyclic order.
`Left` / `Up` | Open the previous tab/panel in reverse cyclic order.
`Home` `Fn+Left` | Open the first tab/panel.
`End` `Fn+Right` | Open the last tab/panel.
`Tab` | Focus the DOM tree in source order. Doesn't open a new tab/panel until you click/touch or press `Enter` / `Space` .
`Esc` | Skip to the end of the widget to escape the widget or focus the first tab/panel. Doesn't open a new tab/panel until you click/touch or press `Enter` / `Space` .
`Enter` / `Space` | Open the focussed tab. If the widget type is accordion then toggle the visiblity of the panel.