danielmatthewTabs
Demo
Browser Support
| Browser | Assistive Technology |
|---|---|
| : macOS : | |
| Safari 13.0.4 ✅ : | VoiceOver ✅ |
| Firefox 79 ✅ : | |
| Chrome ✅ : | |
| Edge ✅ : |
Usage
import { AwcTabs, AwcTab, AwcPanel } from '@accessible-web-components/tabs';
window.customElements.define('awc-tabs', AwcTabs);
window.customElements.define('awc-tab', AwcTab);
window.customElements.define('awc-panel', AwcPanel);<awc-tabs>
<awc-tab role="heading" slot="tab" id="my-first-tab" >Tab 1</awc-tab>
<awc-panel role="region" slot="panel" id="my-first-panel">
<h2>My first tab</h2>
<p>Here is some text…</p>
<ul>
<li>…and a list</p>
</ul>
<button type="button">I am a focusable element within the tab</button>
</awc-panel>
<awc-tab role="heading" slot="tab">Tab 2</awc-tab>
<awc-panel role="region" slot="panel">Content 2</awc-panel>
<awc-tab role="heading" slot="tab">Tab 3</awc-tab>
<awc-panel role="region" slot="panel">Content 3</awc-panel>
</awc-tabs>- The roles of
headingandregionare replaced bytabandtabpanelrespectively at runtime. They provide some level of redundancy to the new elements should there be a runtime error.
Requirements
Per https://www.w3.org/TR/wai-aria-practices-1.2/#tabpanel:
Keyboard
- Focus on active tab element
- Left arrow: previous
- Right arrow: next
- Space/Enter: activate
- Home: first
- End: last
Roles
- Container has a role of
tablist - tablist should be
labelledbyactive tab - Each element representing a tab has the role
taband is contained within thetablist - Each element representing tab content has the role of
tabpanel