Uh oh!
There was an error while loading. Please reload this page.
SelectPanel: Add default empty message to announcement - #6346
Conversation
🦋 Changeset detectedLatest commit: 0c242ef The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks! |
francinelucca
left a comment
There was a problem hiding this comment.
Tagged @llastflowers for review since this might intersect with the work she's doing as part of https://github.com/github/primer/issues/5377
There was a problem hiding this comment.
I left one comment, and the rest of the changes look fine to me! I'm wondering if the original message mismatch with the announcement had to do with the two different types of 'empty' messages being conflated? 🤔
Regarding my work on https://github.com/github/primer/issues/5377, I think I can build those changes on top of this without any issues!
Uh oh!
There was an error while loading. Please reload this page.
size-limit report 📦
|
| const EMPTY_MESSAGE = { | ||
| title: 'You haven’t created any items yet', | ||
| description: 'Please add or create new items to populate the list.', | ||
| } |
There was a problem hiding this comment.
Added a const to hold our default messages. If we ever decide not to provide a default, we'll need to remove this.
| (node: HTMLElement | null) => { | ||
| setListContainerElement(node) | ||
| if (!node && needsNoItemsAnnouncement) { | ||
| if (!node && needsNoItemsAnnouncement && !usingModernActionList) { |
There was a problem hiding this comment.
I don't think we need to announce through SelectPanel if it's not using the modern action list. I was getting multiple of the same announcements, some through useAnnouncements and others through this file.
| messageText?: { | ||
| title: string | ||
| description: string | ||
| } |
There was a problem hiding this comment.
This is just so TypeScript doesn't yell. Won't be needed once we remove the FF.
There was a problem hiding this comment.
Pull Request Overview
This PR ensures that SelectPanel components provide proper accessibility announcements for empty states by using default or provided empty messages instead of generic fallback text. The changes address accessibility audit issues by making screen reader announcements more informative.
Key changes:
- Extracts default empty message into a reusable constant object
- Updates announcement functions to use structured message content instead of hardcoded strings
- Adds messageText prop to FilteredActionList components for configurable empty state announcements
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| SelectPanel.tsx | Refactors empty message handling and updates announcement logic to use structured message content |
| SelectPanel.examples.stories.tsx | Adds story demonstrating default message functionality |
| useAnnouncements.tsx | Updates hook to accept and use structured message parameter for empty state announcements |
| FilteredActionListWithModernActionList.tsx | Adds messageText prop and passes it to useAnnouncements hook |
| FilteredActionListWithDeprecatedActionList.tsx | Adds messageText prop interface (unused in deprecated implementation) |
| fresh-lines-guess.md | Documents the patch-level change in changelog |
| description: | ||
| typeof message?.body === 'string' | ||
| ? message.body | ||
| : EMPTY_MESSAGE.description || EMPTY_MESSAGE.description, |
There was a problem hiding this comment.
The fallback logic EMPTY_MESSAGE.description || EMPTY_MESSAGE.description is redundant. This should likely be message.body || EMPTY_MESSAGE.description to properly fallback to the default when message.body is falsy.
| : EMPTY_MESSAGE.description||EMPTY_MESSAGE.description, | |
| : message.body||EMPTY_MESSAGE.description, |
| if (items.length === 0 && !loading) { | ||
| announce('No matching items.', {delayMs}) | ||
| announce(`${message?.title}. ${message?.description}`, {delayMs}) |
There was a problem hiding this comment.
When message is undefined, this will announce 'undefined. undefined' to screen readers. Add a fallback: announce(message ? ${message.title}. ${message.description} : 'No matching items.', {delayMs})
| announce(`${message?.title}. ${message?.description}`,{delayMs}) | |
| announce(message ? `${message.title}. ${message.description}` : 'No matching items.',{delayMs}) |
Addresses multiple audit issues:https://github.com/github/accessibility-audits/issues/12437, https://github.com/github/accessibility-audits/issues/11114
Ensures that the announcement for no items takes from
DefaultEmptyMessageinsteadChangelog
Changed
FilteredActionListandSelectPanelRollout strategy
Testing & Reviewing
Merge checklist