@accessible-web-components/tabs 中文文档教程

发布于 4年前 浏览 21 项目主页 更新于 3年前

Tabs

Published on npm

Demo

https://v505e.csb.app/

Browser Support

BrowserAssistive 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 and region are replaced by tab and tabpanel 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 the tablist
  • Each element representing tab content has the role of tabpanel

Tabs

Published on npm

Demo

https://v505e.csb.app/

Browser Support

BrowserAssistive 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 and region are replaced by tab and tabpanel 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 the tablist
  • Each element representing tab content has the role of tabpanel
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文