Add vertical tabs option to the tabs component

[ddred11]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

The Business Analyst team would like to have the option to display the tabs component vertically

Acceptance Criteria

• Ability to show tabs' navigation vertically • show only icons for tabs • retain all accessibilty funtionality (arrow buttons should navigate vertical tabs) • allow tab to be displayed to left or right of tab navigation

Relevant Info

Design required tabs to navigate a tab panel and while the action bar might have been a possible choice, it wouldn't have provided proper accessibility for screen readers. This feedback came to us from two accessibility experts, Nat from level access and Sara Shourds here at Esri. We needed to create our own component here to get the desired experience.

Which Component

Tabs component

Example Use Case

Looking for these roles and component characteristics

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role

Priority impact

p3 - want for upcoming milestone

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Business/Community Analyst

[macandcheese]

Thanks for submitting! Couple questions from my side.

Would we want to build in some keyboard updates into Action Group / Bar / Pad? Right now navigation is via Tab, but we could build in "Arrow/Home/End" navigation with an Action Group if that could be expected.

To confirm - you don't want the tab to "activate" on focus, but on enter / space instead as Tab component works? Just seeing if we can maybe get the functionality added to Action Group / Bar / Pad and have it benefit other implementations as well.

[ddred11]

@macandcheese I think we would prefer to have the tab component with a vertical option. We want this for the built in accessibility and the relationship with the attached tab content.