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