WCAG Tabs

The <wcag-tabs> is an accessible, customizable web component for displaying tabbed content. It supports keyboard navigation and ARIA attributes, ensuring compliance with WCAG standards.

Properties

Attributes

Name

selectedTab

Type

number

Description

Sets the index of the active tab. Defaults to 0.

Usage

To use the <wcag-tabs>, include it in your HTML and define the tabs and panels using slots.

    
<wcag-tabs>
    <span slot="tab-0">Tab 1</span>
    <div slot="panel-0">Content for Tab 1</div>
    <span slot="tab-1">Tab 2</span>
    <div slot="panel-1">Content for Tab 2</div>
    <span slot="tab-2">Tab 3</span>
    <div slot="panel-2">Content for Tab 3</div>
</wcag-tabs>

Methods

`selectTab(index)`

Sets the active tab based on the specified index.

Styling

The <wcag-tabs> uses a combination of utility classes and CSS for styling. Customize the styles in wcag-tabs.css to match your design system.