Tab Group

tab-group

Tab groups are used to collect content into a series of tabbed views, which are organised using tab-card. Tabs are generated from the highest level headings found within the tab-group. Activating a tab will show the content associated to that tab.

Work in progress

I'm currently working on the design of the documentation and how to include demonstrations and code examples for the components.

Demonstration

Under construction

Example usage

     <tab-group>
    <tab-card>
      <h3>Wombats</h3>
 
      <p>
        There are three living species of wombat, and several others
        that are now extinct.
      </p>
 
      <ul>
        <li>Common wombat</li>
        <li>Northern hairy-nosed wombat</li>
        <li>Southern hairy-nosed wombat</li>
      </ul>
    </tab-card>
 
    <tab-card>
      <h3>Quokkas</h3>
 
      <p>
        Quokkas are a small marsupial closely related to wallabies.
      </p>
    </tab-card>
 
    <tab-card>
      <h3>Wallabies</h3>
 
      <p>
        Wallaby is sometimes used as a generic name for marsupials
        that are a bit smaller than kangaroos and a bit bigger
        than rats, so there are a lot of different species of wallaby.
      </p>
 
      <p>
        The main groups are true wallabies, the swamp wallaby,
        rock-wallabies, hare-wallabies, nail-tails, dorcopsis,
        padmelons, and the quokka.
      </p>
    </tab-card>
</tab-group>

Accessibility

Keyboard navigation is available. The element is focusable with tab.

When focused

tab will focus the next focusable element
left will highlight the previous tab
right will highlight the next tab
home will highlight the first tab
end will highlight the last tab
space and enter will open the highlighted tab

Screen readers

Screen reader users will be informed that they have focused a page tab.

When activating a tab, the user will be informed that they have selected that tab.