Odyssey, the Okta Design System

# Tab

Tabs are a navigational component used to organize content by grouping similar information on the same page. They allow content to be viewed without having to navigate away from that page or route.

Tabpanel: Applications

<div id="user-profile-tabs" class="ods-tabs" label="User profile options">
  <div role="tablist" aria-label="" class="ods-tabs--tablist">
    <button role="tab" id="tab-applications" aria-selected="true" tabindex="0" aria-controls="tab-applications-tabpanel" class="ods-tabs--tab">
    <button role="tab" id="tab-groups" tabindex="-1" aria-controls="tab-groups-tabpanel" class="ods-tabs--tab">
    <button role="tab" id="tab-profile" tabindex="-1" aria-controls="tab-profile-tabpanel" class="ods-tabs--tab">
    <button role="tab" id="tab-devices" tabindex="-1" aria-controls="tab-devices-tabpanel" class="ods-tabs--tab">
    <button role="tab" id="tab-omm" tabindex="-1" aria-controls="tab-omm-tabpanel" class="ods-tabs--tab">
  <div class="ods-tabs--tabpanel">
    <div role="tabpanel" id="tab-applications-tabpanel" aria-labelledby="tab-applications" tabindex="0">
      <p>Tabpanel: Applications</p>
    <div role="tabpanel" id="tab-groups-tabpanel" aria-labelledby="tab-groups" hidden="hidden" tabindex="0">
      <p>Tabpanel: Groups</p>
    <div role="tabpanel" id="tab-profile-tabpanel" aria-labelledby="tab-profile" hidden="hidden" tabindex="0">
      <p>Tabpanel: Profile</p>
    <div role="tabpanel" id="tab-devices-tabpanel" aria-labelledby="tab-devices" hidden="hidden" tabindex="0">
      <p>Tabpanel: Devices</p>
    <div role="tabpanel" id="tab-omm-tabpanel" aria-labelledby="tab-omm" hidden="hidden" tabindex="0">
      <p>Tabpanel: OMM</p>

# Usage

# Do

  • Place tabs as high as possible in your main content area.
  • Use tabs to allow users to switch quickly between related pieces of information.

# Don't

  • Use tabs without tabpanels.
  • Use tabs as navigation. Meaning they don’t take you from place to place. Rather, they are meant for context switching related to the page.
  • Nest tabs within a tabpanel. Tabs should live as high up in the main content area hierarchy as possible.
  • Have more than 8 tabs in a tablist.
  • Add an icon to a tab. Icons should be reserved for very specific things. It can be hard to maintain consistency with use of icons as it pertains to their semantic meanings and meaning to Okta. Without an established icon repo, it’s best to not use them for now.

# Switching tabs

The JS included here is for demo purposes only. For those implementing the Tab component from scratch, be sure to implement the behavior as follows:

  1. Set the select tab button's aria-selected attribute to true. If a different tab was previously selected, that tab button's aria-selected attribute must be set to false.
  2. The tabpanel corresponding to the tab button is shown. This is done by removing the hidden attribute on the tabpanel. If a different tabpanel was previously visible, the hidden attribute is applied to it.

# Accessibility

# Keyboard support

When implementing this component you should consider the following keyboard behaviors.
Key Behavior
Tab When focus moves in to tablist the focus is placed on the first tab element.
Unlike the right arrow key, if you tab past the last element, the tab focus continues down the page as normal. In this case, it should set focus in to the active tabpanel
Enter Space When focus is placed on a tab, the corresponding tabpanel is activated/displayed.
Right Arrow When focus is within the tablist the next tab is selected.
If the last tab is focused the focus is moved to the first tab.
Left Arrow When focus is within the tablist the previous tab is selected.
If the first tab is focused the focus is moved to the last tab.
Home If a tab has focus, the focus is moved to the first tab.
End If a tab has focus, the focus is moved to the last tab.