@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
更多
你可能也喜欢
- 3d-io 中文文档教程
- 3f335bcfd286030b4771414e30b0582c84dc12000efa5ad019765ec55339860d 中文文档教程
- @0y0/eslint-config-react 中文文档教程
- @10yun/cv-pc-ui 中文文档教程
- @10yun/cv-webpack-utils 中文文档教程
- @2012mjm/telegram.link 中文文档教程
- @4c/selenium-sandbox 中文文档教程
- @a7gm/js-marker-clusterer 中文文档教程
- @aaron_sipser/create-react-skeleton 中文文档教程
- @aaxis/auth0-spa-js 中文文档教程