Fix screen reader issues on homepage card headings and Events card#2314
Open
Ishxn20 wants to merge 2 commits into
Open
Fix screen reader issues on homepage card headings and Events card#2314Ishxn20 wants to merge 2 commits into
Ishxn20 wants to merge 2 commits into
Conversation
- Card titles (e.g. "EVENTS") are now exposed as headings and no longer merge with the trailing menu button into one "[title], button" announcement - Event tile images now have descriptive alt text instead of none - Event date and time ranges now read as full month names joined by "to" instead of an unreadable dash and inconsistently pronounced month abbreviations
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves accessibility semantics for homepage cards (via shared CardContainer) and the Events card tiles to address screen reader issues found in a11y QA (headings, image alt text, and date/time range announcements).
Changes:
- Adds heading semantics for card titles and an explicit label for the overflow/menu control in
CardContainer. - Adds semantic labels for event thumbnails (and excludes the generic placeholder image from semantics).
- Adds fully spelled-out semantics labels for event date/time ranges while keeping the visual abbreviated/dashed display unchanged.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| lib/ui/events/event_tile.dart | Adds semantic labels for event images and for date/time ranges (while keeping existing compact UI). |
| lib/ui/common/card_container.dart | Adds semantics to prevent title+menu merging and to expose headings/menu labels to screen readers. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
169
to
185
| return Semantics( | ||
| container: true, | ||
| explicitChildNodes: true, | ||
| label: 'More options for $titleText', | ||
| child: ButtonBar( | ||
| buttonPadding: const EdgeInsets.all(0), | ||
| mainAxisSize: MainAxisSize.min, | ||
| children: [ | ||
| buildMenuOptions( | ||
| { | ||
| CardMenuOptionConstants.RELOAD_CARD: reload, | ||
| CardMenuOptionConstants.HIDE_CARD: hide, | ||
| }, | ||
| ), | ||
| ], | ||
| ), | ||
| ); |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
This makes homepage card titles, overflow menus, event images, and event date/time ranges easier to understand with a screen reader.
Verification