Sprout Social

Components

Tabs

View on GitHub

Tabs are used to navigate between related pages or views while retaining context.

Best Practices

Icons should be used sparingly in tab buttons to reduce space and visual noise of the tab bar.

Accessibility

The Tabs component follows the WAI-ARIA Tabs Pattern for accessible tab interfaces.

Keyboard Navigation:

  • The expected keyboard navigation for tabs is for the user to be able to tab into the tab group and then use the arrow key (left and right) to switch tabs
  • Switching tabs with the keyboard automatically moves focus to the next tab
  • Left Arrow: Moves focus to the previous tab, wrapping to the last tab if on the first
  • Right Arrow: Moves focus to the next tab, wrapping to the first tab if on the last
  • Tab: Moves focus out of the tab group to the next focusable element

ARIA Attributes:

  • Tab buttons have role="tab", aria-selected, and aria-controls attributes
  • Tab panels have role="tabpanel" and aria-labelledby attributes
  • The tab list container has role="tablist"

Tab Panel Usage:

  • When using Tabs.Panel, ensure the panel's id matches its corresponding tab button's id
  • This establishes the proper relationship between tabs and panels for screen readers
  • Tab panels should be conditionally rendered based on the selected tab