Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(material/select): adds cdkFocusTrap to attempt to make options focusable #29649

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

essjay05
Copy link
Contributor

Attempts to fix bug in Angular Components Select Component where the options in the listbox are not accessible/focusable on mobile. When swiping right to access the listbox the focus moves to the next focusable item rather than into the listbox of options. This fix adds cdkFocusTrap and cdkFocusAutoCapture to attempt to remedy that.

Fixes b/285945157

@essjay05 essjay05 requested a review from a team as a code owner August 27, 2024 16:48
@essjay05 essjay05 requested review from crisbeto and mmalerba and removed request for a team August 27, 2024 16:48
@crisbeto
Copy link
Member

A long time ago in #6856 we switched away from having focus on the options because it was problematic for VoiceOver on Safari.

@essjay05 essjay05 marked this pull request as draft August 27, 2024 19:36
@essjay05
Copy link
Contributor Author

A long time ago in #6856 we switched away from having focus on the options because it was problematic for VoiceOver on Safari.

Thanks for the context/info @crisbeto! Any chance you can add a dev-app link so I can test out/try to find some other solutions?

@crisbeto crisbeto added the dev-app preview When applied, previews of the dev-app are deployed to Firebase label Aug 27, 2024
Copy link

github-actions bot commented Aug 27, 2024

Deployed dev-app for 9b1fe05 to: https://ng-dev-previews-comp--pr-angular-components-29649-dev-jesz4k9p.web.app

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

@essjay05 essjay05 force-pushed the make-select-options-accessible-on-mobile branch from 84af25e to 310bd74 Compare August 28, 2024 22:42
…cuable

Attempts to fix bug in Angular Components Select Component where the options
in the listbox are not accessible/focusable on mobile. When swiping right to
access the listbox the focus moves to the next focusable item rather than
into the listbox of options. This fix adds cdkFocusTrap and cdkFocusAutoCapture
to attempt to remedy that.

Fixes b/285945157
…iveDescendant

Updates previous fix to account for previous fix angular#6856 which refactored
focus on listbox to use aria-activedescendant instead to manage focus.

Fixes b/285945157
Updates previous fix to add useActiveDescendant=true to
listbox in order to attempt to shift focus without using
cdkFocusTrap.

Fixes b/285945157
@essjay05 essjay05 force-pushed the make-select-options-accessible-on-mobile branch from 310bd74 to 9b1fe05 Compare August 29, 2024 22:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dev-app preview When applied, previews of the dev-app are deployed to Firebase
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants