Popup: Android screen reader accessibility #2959
Open
+40
−30
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Removed the `TapGestureRecognizer` from the `PopupPage` constructor to simplify tap handling logic. Updated `PopupPageLayout` to enhance accessibility by excluding the overlay `Grid` and `PopupBorder` from the accessibility tree, ensuring only relevant popup content is accessible to assistive technologies.
Refactored the `VerticalStackLayout.Resources` section in `ButtonPopup.xaml` for better readability and consistency. Added a `Loaded` event handler (`Label_Loaded`) to the `Label` with the `Title` style to set semantic focus on load, enhancing accessibility. Implemented the `Label_Loaded` method in `ButtonPopup.xaml.cs` to handle this functionality.
Removed comments explaining the accessibility setup for the overlay Grid and PopupBorder. No functional changes were made to the accessibility behavior, as the relevant `AutomationProperties.SetIsInAccessibleTree` calls remain unchanged. The comments were likely removed for clarity or to reduce redundancy.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR fixes Android screen reader accessibility for the Popup component by ensuring that non-interactive container elements are excluded from the accessibility tree, allowing screen readers to properly focus on interactive and content elements within the popup.
Key Changes:
- Set
IsInAccessibleTreeto false for popup container elements (PopupPageLayout and PopupBorder) to improve screen reader navigation - Added semantic focus to the first label in the ButtonPopup sample to demonstrate proper accessibility behavior
- Applied formatting improvements to the ButtonPopup.xaml sample
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/CommunityToolkit.Maui/Views/Popup/PopupPage.shared.cs | Excludes popup container elements from accessibility tree to fix Android screen reader focus issues |
| samples/CommunityToolkit.Maui.Sample/Views/Popups/ButtonPopup.xaml.cs | Adds event handler to set semantic focus on the title label when loaded |
| samples/CommunityToolkit.Maui.Sample/Views/Popups/ButtonPopup.xaml | Wires up Loaded event and applies formatting improvements (tabs to spaces) |
Update Label_Loaded method with nullability and logic The `Label_Loaded` method in `ButtonPopup.xaml.cs` was updated to accept a nullable `sender` parameter by changing its signature to `void Label_Loaded(object? sender, EventArgs e)`. Additionally, the method implementation was added to check if the `sender` is of type `Label`. If so, it casts the `sender` to a `Label` and calls the `SetSemanticFocus` method on it.
Contributor
Author
|
This is the website is use to validate accessibility behaviour, as you can see this PR matches what is expected - https://www.magentaa11y.com/#/native-criteria/notifications/modal?tab=4 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description of Change
Fix Android screen reader accessibility
As you can see from the before video, the non-interactive elements (labels) arnt focusable to the screenreader. And the popup view itself is.
android-before.mp4
android-after.mp4
I've tested iOS and it is unchanged from before, and behaves the same as the after video on Android.
Linked Issues
PR Checklist
approved(bug) orChampioned(feature/proposal)mainat time of PRAdditional information