components icon indicating copy to clipboard operation
components copied to clipboard

fix(material/button-toggle): use radio pattern for single select Mat toggle button group

Open clamli opened this issue 4 months ago • 1 comments

This commit updates the single-select Mat toggle button group to use radio pattern. This way the exclusiveness of the selection can be conveyed to the screen reader users.

clamli avatar Feb 06 '24 18:02 clamli

I added some unit test around the tab index update.

clamli avatar Feb 15 '24 19:02 clamli

Deployed dev-app for 657939dbf561a395ef469bd7ec7f17c73d2b95c6 to: https://ng-dev-previews-comp--pr-angular-components-28548-dev-p16tl3gz.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

github-actions[bot] avatar Mar 21 '24 16:03 github-actions[bot]

On ChromeOS using screen reader, I'm not able to navigate to the button toggle component with the "Next Form Field" navigation feature. On my system that's Search + F. ChromeOS navigates past the single-select button toggle to the first button on a multiple-select button toggle. Pressing Shift + Search + F takes me in the reverse direction and puts focus on the first checkbox before the single-select button toggles. Tested on deployed dev-app. I'm surprised that Screen Reader doesn't seem to be aware that mat button toggle is a form field. We're using radiogroup role. I can look at this more tomorrow.

zarend avatar Mar 27 '24 06:03 zarend

"Next Form Field" seems to be working for me on VoiceOver, JAWS, NVDA. This is likely a ChromeOS specific problem. Action item to file issue report on ChromeOS Chromevox.

zarend avatar Mar 28 '24 18:03 zarend

I can reproduce the error with MatRadioGroup demos. I can repro both on this branch and on docs site

  • ChromeOS Version 122.0.6261.137 (Offical Build) (64-bit)
  • VoiceOver
  • https://ng-dev-previews-comp--pr-angular-components-28548-dev-p16tl3gz.web.app/radio
  • https://material.angular.io/components/radio/examples

Action item to file issue report on ChromeOS. Filing an issue report does not block landing this PR.

zarend avatar Mar 28 '24 19:03 zarend

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.