[SelectPanel] Add notice announcements to SelectPanel #6210

kelsey-myers · 2025-06-16T20:42:28Z

Closes #11748 and #5345

Changelog

New

Added an announcement functionality for SelectPanel notices

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 (N/A)
Added/updated previews (Storybook) (auto)
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-06-16T20:42:32Z

🦋 Changeset detected

Latest commit: bcaaf37

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-06-16T20:42:51Z

Uh oh! @kelsey-myers, at least one image you shared is missing helpful alt text. Check your pull request body to fix the following violations:

Images should have meaningful alternative text (alt text) at line 9
Images should have meaningful alternative text (alt text) at line 11
Images should have meaningful alternative text (alt text) at line 13

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

github-actions · 2025-06-16T20:42:56Z

👋 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!

Copilot

Pull Request Overview

This patch adds support for announcing notice messages in SelectPanel when it opens.

Imports announceFromElement and adds a ref to the notice container
Implements a useEffect to clear and announce the notice when open && notice
Adds a test to verify that the notice text is announced

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
packages/react/src/SelectPanel/SelectPanel.tsx	Added noticeRef, import of `announceFromElement`, and `useEffect` to announce notices
packages/react/src/SelectPanel/SelectPanel.test.tsx	New test case to assert notice announcements
.changeset/smooth-ideas-smile.md	Bumped patch version and changelog entry

packages/react/src/SelectPanel/SelectPanel.tsx

github-actions · 2025-06-16T20:45:38Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	92.33 KB (+0.05% 🔺)
packages/react/dist/browser.umd.js	92.37 KB (-0.03% 🔽)

primer-integration · 2025-06-16T20:50:18Z

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/384379

kelsey-myers · 2025-06-16T21:13:19Z

🔴 golden-jobs completed with status failure.

Failing tests are unrelated 🐸

TylerJDev

Looks great, thank you for this contribution @kelsey-myers! ✨ Left a few comments, let me know what you think!

TylerJDev · 2025-06-17T13:00:00Z

packages/react/src/SelectPanel/SelectPanel.tsx

+  useEffect(() => {
+    const announceNotice = async () => {
+      if (!noticeRef.current) return
+      const liveRegion = document.querySelector('live-region')


Would it be possible to utilize the announceText function here instead?

@TylerJDev I did it this way becausenotice.text can either be a string or a react element, so I figured announceFromElement covers both cases? (unless you know of a way we can extract the text from the element)

Makes sense! We can leave it as-is then 😁

TylerJDev · 2025-06-17T13:00:46Z

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -739,7 +757,7 @@ function Panel({
            ) : null}
          </div>
          {notice && (
-            <div aria-live="polite" data-variant={notice.variant} className={classes.Notice}>
+            <div ref={noticeRef} aria-live="polite" data-variant={notice.variant} className={classes.Notice}>


Since we're utilizing announce, we can most likely remove the aria-live here, as it is redundant.

Good point, updated :)

TylerJDev

LGTM! ✨

kelsey-myers added 2 commits June 16, 2025 20:26

add notice announcements to SelectPanel

2e1d5d5

add test

7be939d

Copilot AI review requested due to automatic review settings June 16, 2025 20:42

kelsey-myers requested a review from a team as a code owner June 16, 2025 20:42

kelsey-myers requested a review from hectahertz June 16, 2025 20:42

Merge branch 'main' into km/announce-notice-selectpanel

caea2af

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jun 16, 2025

Copilot AI reviewed Jun 16, 2025

View reviewed changes

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

github-actions bot requested a deployment to storybook-preview-6210 June 16, 2025 20:46 Abandoned

kelsey-myers deployed to github-pages June 16, 2025 20:59 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6210 June 16, 2025 20:59 Inactive

github-actions bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Jun 16, 2025

kelsey-myers added the staff Author is a staff member label Jun 16, 2025

kelsey-myers requested a review from a team June 17, 2025 07:07

primer deleted a comment from primer-integration bot Jun 17, 2025

TylerJDev reviewed Jun 17, 2025

View reviewed changes

remove redundant tag

bcaaf37

kelsey-myers requested a review from TylerJDev June 17, 2025 13:43

kelsey-myers deployed to github-pages June 17, 2025 13:56 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6210 June 17, 2025 13:57 View deployment

TylerJDev approved these changes Jun 17, 2025

View reviewed changes

kelsey-myers added this pull request to the merge queue Jun 17, 2025

Merged via the queue into main with commit a8b871b Jun 17, 2025
35 checks passed

kelsey-myers deleted the km/announce-notice-selectpanel branch June 17, 2025 14:32

primer bot mentioned this pull request Jun 17, 2025

Release tracking #6192

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[SelectPanel] Add notice announcements to SelectPanel #6210

[SelectPanel] Add notice announcements to SelectPanel #6210

Uh oh!

kelsey-myers commented Jun 16, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Jun 16, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jun 16, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jun 16, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

github-actions bot commented Jun 16, 2025 •

edited

Loading

Uh oh!

primer-integration bot commented Jun 16, 2025

Uh oh!

kelsey-myers commented Jun 16, 2025

Uh oh!

TylerJDev left a comment

Uh oh!

TylerJDev Jun 17, 2025

Uh oh!

kelsey-myers Jun 17, 2025 •

edited

Loading

Uh oh!

TylerJDev Jun 17, 2025

Uh oh!

TylerJDev Jun 17, 2025

Uh oh!

kelsey-myers Jun 17, 2025

Uh oh!

TylerJDev left a comment

Uh oh!

Uh oh!

Uh oh!

[SelectPanel] Add notice announcements to SelectPanel #6210

[SelectPanel] Add notice announcements to SelectPanel #6210

Uh oh!

Conversation

kelsey-myers commented Jun 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Jun 16, 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 Jun 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jun 16, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

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

Uh oh!

size-limit report 📦

Uh oh!

primer-integration bot commented Jun 16, 2025

Uh oh!

kelsey-myers commented Jun 16, 2025

Uh oh!

TylerJDev left a comment

Choose a reason for hiding this comment

Uh oh!

TylerJDev Jun 17, 2025

Choose a reason for hiding this comment

Uh oh!

kelsey-myers Jun 17, 2025 • 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!

TylerJDev Jun 17, 2025

Choose a reason for hiding this comment

Uh oh!

TylerJDev Jun 17, 2025

Choose a reason for hiding this comment

Uh oh!

kelsey-myers Jun 17, 2025

Choose a reason for hiding this comment

Uh oh!

TylerJDev left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

kelsey-myers commented Jun 16, 2025 •

edited

Loading

changeset-bot bot commented Jun 16, 2025 •

edited

Loading

github-actions bot commented Jun 16, 2025 •

edited

Loading

github-actions bot commented Jun 16, 2025 •

edited

Loading

kelsey-myers Jun 17, 2025 •

edited

Loading