bug(Tabs): Responsive arrow buttons are not fully accessible (Empty button error in WAVE)

[teodorachiosa]

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

Checking the Tabs component through the WAVE Accessibility Tool, I get an error for the responsive arrow buttons:

I checked the code and saw that aria-hidden is applied, which helps with screen reading, but accessibility tools still see the missing button text/aria-label as an issue...

Reproduction

Steps to reproduce:

1. Install WAVE Accessibility tool https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
2. Go to the Material page for Tabs (right now this link goes to version 14.2.1): https://material.angular.io/components/tabs/examples
3. Resize the window to a smaller width until the arrow buttons appear
4. Run WAVE on the page
5. Check the errors

Expected Behavior

There should be no errors related to responsive arrow buttons

Actual Behavior

There is an error for responsive arrow buttons: Empty button

Environment

Whatever is running on the Material Official Website

[crisbeto]

Those buttons are already aria-hidden so a user doesn't have a way of interacting with them. Closing since this looks like an issue with the accessibility tool.

[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.}