11bbc5fff5
* feat: migrated the navigation metadata from inline MD title decorations to frontmatter * fix: fixed frontmatter metadate for api-table MDs * fix: fixed frontmatter eslint issue
1.5 KiB
1.5 KiB
| parts | title | eleventyNavigation | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Tabs: Overview |
|
Tabs: Overview
A web component that allows users to quickly move between a small number of equally important views.
import { LitElement, html } from '@mdjs/mdjs-preview';
import '@lion/ui/define/lion-tabs.js';
export const main = () => html`
<lion-tabs>
<button slot="tab">Info</button>
<p slot="panel">Info page with lots of information about us.</p>
<button slot="tab">Work</button>
<p slot="panel">Work page that showcases our work.</p>
</lion-tabs>
`;
Installation
npm i --save @lion/ui
import { LionTabs } from '@lion/ui/tabs.js';
// or
import '@lion/ui/define/lion-tabs.js';
Rationale
No separate active/focus state when using keyboard
We will immediately switch content as all our content comes from light dom (e.g. no latency)
See Note at https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-19
It is recommended that tabs activate automatically when they receive focus as long as their associated tab panels are displayed without noticeable latency. This typically requires tab panel content to be preloaded.
Panels are not focusable
Focusable elements should have a means to interact with them. Tab panels themselves do not offer any interactivity. If there is a button or a form inside the tab panel then these elements get focused directly.