bug(mat-tab-nav-bar): Accessibility issue with dpad navigation in mat tabs

[bviale]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I am shipping my Angular app using Material inside an APK as a TWA. It should be compatible with Android TV so I am testing the behaviour on Chromecast 2 using the dpad controller. Only available controls are the 4 directional arrows with Back and Enter. My first page has a mat-tab-nav-bar at the top. On page load, the Chromecast browser focuses the first element and then let the user navigate in the page only using the previously listed controls. As mat tabs enables keyboard navigation, it is switching tabs focus with arrow keys and changing active tab with Enter. But because dpads is missing Tab key, it becomes impossible to focus out the tabs and click on next elements. We would need a way to configure the mat tabs to focus to next elements with arrows when last element has been reached instead of looping back to the first tab. That would allow dpad to navigate to the rest of the page. Any known hack to make this work would be more than welcome!

Reproduction

StackBlitz link: https://material.angular.io/components/tabs/examples#tab-group-align Steps to reproduce the same behaviour in a browser:

1. Use tab to enter focus on first tabs bar
2. Use only arrows and Enter and try to navigate in the whole page

Expected Behavior

When last element is selected and right arrow key is pressed, have a way to jump to next element (like a Tab) instead of going back to first tab element. When first element is selected and left arrow key is pressed, have a way to jump to previous element (like a Shift+Tab) instead of going to last tab element. This could be done with some config maybe to stay compatible with current behaviour

Actual Behavior

When last element is selected and right arrow key is pressed it is going back to first tab element. When first element is selected and left arrow key is pressedit is going to last tab element.

Environment

• Angular: 18
• CDK/Material: 18
• Browser(s): Chromecast browser
• Operating System (e.g. Windows, macOS, Ubuntu): Android TV

[crisbeto]

The keyboard navigation is currently working as expected. The expectation is that if the user wants to move away from the nav bar, they have to use the Tab key.

[bviale]

Thank you for your answer, ok, I am going to work around this creating my own tabs component. But I wanted to bring this topic because it makes Angular Material not compatible with dpad navigation. I think it would be great to support it in a future release, maybe with enhancements in the a11y package. Maybe we should convert this issue in a feature request then as it seems to be working as expected

[crisbeto]

I think that changing the behavior would break the expectations for screen reader users on computers/phones. I'm closing the issue since we generally don't test against TVs.

[angular-automatic-lock-bot[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.}