-
Notifications
You must be signed in to change notification settings - Fork 278
fix(ui5-select): announce header text on mobile #11849
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
Conversation
…een-reader-output
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR fixes accessibility issues with the Select component on mobile devices by ensuring proper screen reader announcements. The fix ensures that when a Select popover opens on mobile, the header text is announced to assistive technologies by setting the accessibleName
property on the ResponsivePopover.
- Adds
accessibleName
property to ResponsivePopover on mobile devices - Improves focus handling for selected options in the popover
- Adds comprehensive test coverage for both mobile and desktop scenarios
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
File | Description |
---|---|
packages/main/src/SelectPopoverTemplate.tsx | Sets accessibleName for ResponsivePopover only on mobile devices |
packages/main/src/Select.ts | Enhances focus application to selected options by calling focus() method |
packages/main/cypress/specs/Select.mobile.cy.tsx | Adds test to verify accessibleName is properly set on mobile |
packages/main/cypress/specs/Select.cy.tsx | Adds tests for desktop accessibleName absence and focus behavior |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Fixes: #11495
Summary
Fixes mobile accessibility issues for the Select component.
Changes