Screen readers assume tabs are always selected irrespective of the aria-current value

[vasilionjea]

Bug, feature request, or proposal:

mat-tab-links inside a mat-tab-nav-bar have either aria-current="false" or aria-current="true" indicating which tab is actively selected but screen readers assume all tabs are selected because aria-current seems to be ignored.

This causes screen readers to read "{NAME}", selected, tab, ..." irrespective of the aria-current value but "{NAME}", tab, ..." should be read when aria-current is set to "false".

What is the expected behavior?

Screen readers should read either "{NAME}", selected, tab, ..." or "{NAME}", tab, ..." indicating which tab is actively selected. This can be accomplished with the aria-selected attribute, which works with VoiceOver.

What is the current behavior?

Screen readers read "{NAME}", selected, tab, ..." irrespective of the aria-current value because.

What are the steps to reproduce?

Live example: https://angular-me85ty.stackblitz.io/
Code for example: https://stackblitz.com/edit/angular-me85ty?file=app/tab-nav-bar-basic-example.html

What is the use-case or motivation for changing an existing behavior?

Users with assistive technology.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

All.

Is there anything else we should know?

The mat-tab-nav-bar in the live example has a role of "tablist" and mat-tab-link items have a role of "tab", so that's why this issue occurs. To address this issue in my product I have used the aria-selected attribute to indicate which tab is selected.

With that said, there may not be anything that needs to be changed upstream, but reporting this anyway in case someone thinks it's a good idea to add the aria-selected attribute when mat-tab-link items have a role of "tab".

I tested only with VoiceOver.

[jelbourn]

@vasilionjea The nav-tabs intentionally don't have roles because they do not use the tablist / tabpanel interaction pattern. Instead, the nav-list is an actual <nav> element (corresponding to role="navigation") and the "tabs" are just anchors (role="link"). Adding different roles manually will make the screen-reader interaction worse because the keyboard shortcuts and structure will not match expectations.

As for the aria-current, the values we're setting are valid per the WAI-ARIA spec, but we've found more recently that it's better to omit attributes like aria-selected and aria-current when they would be "false", so I've sent #16562 to make that change.

[jelbourn]

I've also sent #16563 to clarify the difference in interaction patterns in the docs, since this has come up a few times in the past before.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}