@accessible-web-components/tabs 中文文档教程
Tabs
Demo
https://v505e.csb.app/
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
heading
andregion
are replaced bytab
andtabpanel
respectively at runtime. They provide some level of redundancy to the new elements should there be a runtime error.
Requirements
根据 https://www.w3.org/TR/wai-aria-practices-1.2/ #tab面板:
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
labelledby
active tab - Each element representing a tab has the role
tab
and is contained within thetablist
- Each element representing tab content has the role of
tabpanel
Tabs
Demo
https://v505e.csb.app/
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
heading
andregion
are replaced bytab
andtabpanel
respectively 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
labelledby
active tab - Each element representing a tab has the role
tab
and is contained within thetablist
- Each element representing tab content has the role of
tabpanel