Tabs
This component is used to switch among related views within the same context. It is composed of three elements: wm-tab-list
, wm-tab-item
and wm-tab-panel
.
The tab component can control the display of tab panels, or this can be delegated to the app.
If the app is controlling the display of tab panels, the tab id must be retrieved from the emitted wmTabSelected
event.
* Required property
** Required in certain cases
Properties of wm-tab-list
boolean
wmTabSelected
event.
Defaults to false
.
string
tabId
of the tab item to display as selected. It is also
the tabId
of the tab panel whose content will be displayed.
Required when the app is controlling the state of the widget and panel
view. You may also use this prop in a controller-enabled
tab interface to display a different tab item/tab panel on load other
than the first one in the list.
string
wm-tab-item
s. Accepts valid CSS values e.g. 24px
.
string
dark
for dark theme, unset for default (light) theme. Use sparingly! Dark tabs are an older design and are being phased out.
Properties of wm-tab-item
and
wm-tab-panel
string
tabId
matching the
tabId
of the corresponding tab item. If you are conditionally
rendering content in one tab panel, give the tab panel the
tabId
of tab item that will be selected on load.
Usage in HTML
Edit the code below to see changes reflected in the example above.
Note: The second example demonstrates how the component can be used to dynamically change the content when a tab is selected (using the wmTabSelected event).
Javascript Sample
Example code for functionality.
Usage in Elm
Code generated from HTML.
Screen Readers
The component sets the recommended aria-controls attributes for the tab items and the aria-labelledby attribute for the tab panels. When one tab panel is used to conditionally render content, the component updates these attributes when a new tab item is selected.
Keyboard Support
Key | Function |
---|---|
EnterSpace | Activates the tab item and triggers a change in the view. |
Tab |
|
Shift + Tab |
|
Arrow Left |
|
Arrow Right |
|
Arrow Down | Focuses the tab panel. This is to ensure the content in the tab panel is more easily accessible to screen reader users. While in the tab widget, the screen reader is in focus mode, meaning the user is not able to browse using the arrow down key. If the tab panel contains no interactive elements, tabbing would move focus to the first interactive element outside the tab panel, meaning that users would lose their place and access to the tab content. If the component captures the arrow-down event and shifts focus to the tab panel outside the widget, it essentially gives control back to the screen reader, and users can more easily browse the content of the tabpanel. |