search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.32k stars 6.73k forks source link

bug(button-toggle): Accessibility breaks with matTooltip #28017

Open ice-blaze opened 11 months ago

ice-blaze commented 11 months ago

Is this a regression?

The previous version in which this bug was not present was

No response

Description

When adding the tooltip on a button toggle, the screen reader loses the group detection.

Reproduction

StackBlitz link: https://stackblitz.com/edit/dh5vz6?file=src%2Fexample%2Fbutton-toggle-overview-example.ts,src%2Fexample%2Fbutton-toggle-overview-example.html Steps to reproduce:

  1. Use NVDA screen reader
  2. Navigate with the browse mode

Expected Behavior

The second button toggle should be detected as a whole. Like the first button toggle.

Actual Behavior

When navigating on the second button toggle, the screen reader doesn't mention all the other buttons at once.

Environment

zarend commented 7 months ago

Hello @ice-blaze ,

We need more information. Thank you for reporting accessibility issues. Unfortunately, this issue may not be actionable without further information. Do you have an accessibility requirement that's not being meet or an explanation why it's a problem for the user? I don't think I understand what "the screen reader doesn't mention all the other buttons at once" means.

I cannot reproduce.

-Zach

ice-blaze commented 7 months ago

@zarend Hello👋

By looking at your stackblitz, you are missing the import of the MatTooltipModule, which makes the tooltip not visible in your example. I don't have access to a windows machine right now but let me know if with the module you can reproduce or not the bug.

zarend commented 6 months ago

Hello,

Good catch on that, yes, I added the missing MatTooltipModule 🤦 . I am able to test the demo on Windows machine with tooltip working. I have tested on NVDA, and I don't see anything wrong. I don't see anything that looks like an a11y criteria not being meet.

Expected Behavior The second button toggle should be detected as a whole. Like the first button toggle. Actual Behavior When navigating on the second button toggle, the screen reader doesn't mention all the other buttons at once.

I don't think I understand what mentioning all the other buttons at once means or detected as a whole means :). The toggle buttons are native button elements, so I don't think there needs to be anything complicated with the a11y semantics. I don't think I see what requirement this test case is based on.

Best Regards,

Zach

ice-blaze commented 6 months ago

I could get my hands on a windows machine. So I adapted your examples just by duplicating your toggle and remove the tooltips. So when I'm on browse mode (using the arrows key up and down) we can see the output of NVDA is one line for each button.

In the second case there are no tooltips and NVDA change the behavior by mentioning the buttons all at once in one line.

out of frame  button    Close Preview
Preview page  frame    toggle button  not pressed    Text align left
toggle button  not pressed    Text align center
toggle button  not pressed    Text align right
toggle button  unavailable  not pressed    Text align justify
Selected value:
toggle button  not pressed    Text align left  toggle button  not pressed    Text align center  toggle button  not pressed    Text align right  toggle button  unavailable  not pressed    Text align justify
Current build: 17.2.1

Also for context, I'm only mentioning browse mode, not focus mode (the one when you navigate with tab). With focus mode, the cursor goes on each button in both cases (with and without tooltips).

I hope I was more clear here.