Accessibility | TabView - TabIndex order doesn't follow the W3C recommended pattern

[GiacomoDM]

Describe the bug

As stated in the W3C Authoring Practices Guide, for a Tab interface the tab button should behave as follow:

• When focus moves into the tab list, places focus on the active tab element.
• When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tablist, which is the tabpanel unless the first element containing meaningful content inside the tabpanel is focusable.

Check: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#keyboardinteraction for reference.

To be compliant with WCAG, all the patterns should be applied.

Environment

Windows

Reproducer

https://primeng.org/tabview

Angular version

16.X

PrimeNG version

16.1.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.20

Browser(s)

No response

Steps to reproduce the behavior

• Set focus to a tab header in any of the examples
• Press tab
• The focus moves to the next tab header

Expected behavior

Pressing tab, the focus should move inside the content of the selected tab, if focusable, or to the next focusable element of the page.

[rosenthalj]

Is GitHub's tab interface working the same way as PrimeNG?

GitHubTabs.mov

[GiacomoDM]

Is GitHub's tab interface working the same way as PrimeNG?

GitHubTabs.mov

You are right, but the HTML structure of GitHub's page doesn't have the role="tablist" and role="tab" that PrimeNG correctly has.

These roles tells the screen reader that the element's behaviour is the Tab view's one, for which there is the recommended W3C pattern.