SelectPanel: Add default empty message to announcement #6346

TylerJDev · 2025-07-21T16:14:26Z

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 DefaultEmptyMessage instead

Changelog

Changed

Adds default message for empty announcements in FilteredActionList and SelectPanel

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2025-07-21T16:14:30Z

🦋 Changeset detected

Latest commit: 8f3edce

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

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

github-actions · 2025-07-21T16:14:54Z

👋 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

Tagged @llastflowers for review since this might intersect with the work she's doing as part of https://github.com/github/primer/issues/5377

llastflowers

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!

packages/react/src/SelectPanel/SelectPanel.stories.tsx

github-actions · 2025-07-22T19:26:16Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	92.24 KB (-0.03% 🔽)
packages/react/dist/browser.umd.js	92.36 KB (+0.01% 🔺)

TylerJDev · 2025-07-22T19:28:28Z

packages/react/src/SelectPanel/SelectPanel.tsx

+const EMPTY_MESSAGE = {
+  title: 'You haven’t created any items yet',
+  description: 'Please add or create new items to populate the list.',
+}


Added a const to hold our default messages. If we ever decide not to provide a default, we'll need to remove this.

TylerJDev · 2025-07-22T19:29:08Z

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -228,12 +232,12 @@ function Panel({
  const onListContainerRefChanged: FilteredActionListProps['onListContainerRefChanged'] = useCallback(
    (node: HTMLElement | null) => {
      setListContainerElement(node)
-      if (!node && needsNoItemsAnnouncement) {
+      if (!node && needsNoItemsAnnouncement && !usingModernActionList) {


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.

TylerJDev · 2025-07-22T19:29:44Z

packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx

+  messageText?: {
+    title: string
+    description: string
+  }


This is just so TypeScript doesn't yell. Won't be needed once we remove the FF.

Copilot

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

Copilot · 2025-07-22T19:52:16Z

packages/react/src/SelectPanel/SelectPanel.tsx

+                description:
+                  typeof message?.body === 'string'
+                    ? message.body
+                    : EMPTY_MESSAGE.description || EMPTY_MESSAGE.description,


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.

Suggested change

: EMPTY_MESSAGE.description || EMPTY_MESSAGE.description,

: message.body || EMPTY_MESSAGE.description,

Copilot · 2025-07-22T19:52:17Z

packages/react/src/FilteredActionList/useAnnouncements.tsx

@@ -92,7 +93,7 @@ export const useAnnouncements = (
      liveRegion?.clear() // clear previous announcements

      if (items.length === 0 && !loading) {
-        announce('No matching items.', {delayMs})
+        announce(`${message?.title}. ${message?.description}`, {delayMs})


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})

Suggested change

announce(`${message?.title}. ${message?.description}`, {delayMs})

announce(message ? `${message.title}. ${message.description}` : 'No matching items.', {delayMs})

Ensure empty message is being read from provided default title

be38745

TylerJDev requested a review from francinelucca July 21, 2025 16:14

github-actions bot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Jul 21, 2025

TylerJDev deployed to github-pages July 21, 2025 16:22 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6346 July 21, 2025 16:23 Inactive

francinelucca requested a review from llastflowers July 21, 2025 18:12

francinelucca reviewed Jul 21, 2025

View reviewed changes

llastflowers reviewed Jul 21, 2025

View reviewed changes

packages/react/src/SelectPanel/SelectPanel.stories.tsx Outdated Show resolved Hide resolved

Add formatting, other improvements

aa3f352

TylerJDev deployed to github-pages July 22, 2025 19:20 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6346 July 22, 2025 19:20 Inactive

TylerJDev added 2 commits July 22, 2025 15:22

Fix CI issues

2367c22

Add changeset

995b137

github-actions bot requested a deployment to storybook-preview-6346 July 22, 2025 19:28 Abandoned

TylerJDev commented Jul 22, 2025

View reviewed changes

TylerJDev deployed to github-pages July 22, 2025 19:41 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6346 July 22, 2025 19:41 Inactive

TylerJDev added 2 commits July 22, 2025 15:41

Small changes

5e43024

Merge branch 'main' into tylerjdev/selectpanel-empty-announcement

b89e853

TylerJDev marked this pull request as ready for review July 22, 2025 19:51

Copilot AI review requested due to automatic review settings July 22, 2025 19:51

TylerJDev requested a review from a team as a code owner July 22, 2025 19:51

TylerJDev requested a review from joshblack July 22, 2025 19:51

Copilot AI reviewed Jul 22, 2025

View reviewed changes

TylerJDev deployed to github-pages July 22, 2025 19:53 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6346 July 22, 2025 19:54 View deployment

joshblack approved these changes Jul 22, 2025

View reviewed changes

TylerJDev added 2 commits July 22, 2025 21:29

Merge branch 'main' into tylerjdev/selectpanel-empty-announcement

022bcfb

Fix test

8f3edce

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

SelectPanel: Add default empty message to announcement #6346

SelectPanel: Add default empty message to announcement #6346

TylerJDev commented Jul 21, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Jul 21, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jul 21, 2025

Uh oh!

francinelucca left a comment

Uh oh!

llastflowers left a comment •

edited

Loading

Uh oh!

Uh oh!

github-actions bot commented Jul 22, 2025 •

edited

Loading

Uh oh!

TylerJDev Jul 22, 2025

Uh oh!

TylerJDev Jul 22, 2025

Uh oh!

TylerJDev Jul 22, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jul 22, 2025

Uh oh!

Copilot AI Jul 22, 2025

Uh oh!

Uh oh!

	: EMPTY_MESSAGE.description \|\| EMPTY_MESSAGE.description,
	: message.body \|\| EMPTY_MESSAGE.description,

	announce(`${message?.title}. ${message?.description}`, {delayMs})
	announce(message ? `${message.title}. ${message.description}` : 'No matching items.', {delayMs})

SelectPanel: Add default empty message to announcement #6346

Are you sure you want to change the base?

SelectPanel: Add default empty message to announcement #6346

Conversation

TylerJDev commented Jul 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

Changed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Jul 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Jul 21, 2025

Uh oh!

francinelucca left a comment

Choose a reason for hiding this comment

Uh oh!

llastflowers left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

TylerJDev Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

TylerJDev Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

TylerJDev Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

TylerJDev commented Jul 21, 2025 •

edited

Loading

changeset-bot bot commented Jul 21, 2025 •

edited

Loading

llastflowers left a comment •

edited

Loading

github-actions bot commented Jul 22, 2025 •

edited

Loading