bug(button-toggle): Accessibility breaks with matTooltip

[ice-blaze]

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

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

• Angular: 16
• CDK/Material: 16
• Browser(s): Edge
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11
• Screen reader: NVDA

[zarend]

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.

• https://stackblitz.com/edit/5n2guz?file=src%2Fexample%2Fbutton-toggle-exclusive-example.html
• NVDA 2023.3.3.30854
• Chrome Version Version 121.0.6167.189 (Official Build) (64-bit)
• Windows 10 Enterprise Version 22H2

-Zach

[ice-blaze]

@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]

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.

• Chrome Version 122.0.6261.129 (Official Build) (64-bit)
• NVDA version 2023.3.4.31265
• Windows 10 Enterprise Version 22H2

Best Regards,

Zach

[ice-blaze]

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.

• Edge version 122.0.2365.80
• NVDA version 2022.1
• Windows 11 Enterprise version 10.0.22621 build 22621