Tab

Tab is used to classify related content and navigate between similar types of information that appear in the same context

Focus accessibility

To make our interface accessible to all, we've included a mode that lets you select components from the keyboard. This focus accessibility mode is outlined in opacity-brand to distinguish it from other selection modes. In this case, tab should be automatically activated and when focus move into the tab list, you should place the focus on the active tab element.

 

Fix tab

The keyboard selection for the fixe tabs will be represented with an outline stroke around the selected item and, the text of the item is in accessibility-focus.

 

Closable tab

When you select a tab by using your keyboard, you'll automatically get the hover status (text in opacity-brand) to show you where you are and what you are selecting. When you use the keyboard to move from one page to the next, you will get the following behavior :

  • select tab
  • select x-mark to close tab
  • select tab

And so one. This mean that you can either press enter to switch to an other tabs or close the tabs