Tab- When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the
tabpanel element.Right Arrow, Left Arrow- Activates the newly focused tab.
- If focus is on the last tab, moves focus to the first tab.
Home, EndTab, Shift-TabEnterrole="tablist"role="tab"aria-selected="BOOLEAN"p-tabs-bar component is detached from the content (tabpanel) which belongs to the active tab. To be truly
accessible you need to provide additional ARIA attributes, because every tab (button) needs an aria-controls
attribute which points to the corresponding id of the tabpanel. The content placeholder needs the role="tabpanel"
and the attribute aria-labelledby which points to the unique id of the corresponding tab (button).tabpanel. Therefor the active tab panel must have an
tabindex="0" to receive keyboard focus and the focus indicator must be styled accordingly. Use the provided focus
style like this:<p-tabs-bar active-tab-index="0">
<button type="button" id="tab-item-0" aria-controls="tab-panel-0">Tab One</button>
<button type="button" id="tab-item-1" aria-controls="tab-panel-1">Tab Two</button>
<button type="button" id="tab-item-2" aria-controls="tab-panel-2">Tab Three</button>
</p-tabs-bar>
<div id="tab-panel-0" role="tabpanel" tabindex="0" aria-labelledby="tab-item-0">
<p-text>Your content of Tab 1</p-text>
</div>
<div id="tab-panel-1" role="tabpanel" hidden tabindex="-1" aria-labelledby="tab-item-1">
<p-text>Your content of Tab 2</p-text>
</div>
<div id="tab-panel-2" role="tabpanel" hidden tabindex="-1" aria-labelledby="tab-item-2">
<p-text>Your content of Tab 3</p-text>
</div>
p-tabs-bar ~ [tabindex='0'][role='tabpanel'] {
@include pds-focus;
}
p-tabs-bar is used as a link list, the semantic of that UI component changes completely - from a tabbed
interface where content changes happen on-site to a normal list of links where content changes are
route-based. Therefor additional ARIA attributes must not be provided for tab identification! The p-tabs-bar
component manages this also internally.aria-current="page" attribute should be provided to the active link.<p-tabs-bar>
<a href="https://porsche.com" target="_blank" aria-current="page">Tab One</a>
<a href="https://porsche.com" target="_blank">Tab Two</a>
<a href="https://porsche.com" target="_blank">Tab Three</a>
</p-tabs-bar>
p-tabs-bar is used as an in-page jump navigation, you should follow the same rules as for the route-based
variant except that aria-current="page" should not be used.