Use Banner.Title as default label for landmark region via aria-labelledby

[Copilot]

Banners previously labeled their landmark regions with generic variant names ("Information", "Critical", etc.) via aria-label. This provides limited context to screen reader users. Banner regions should be labeled by their actual title content.

Changes

• Default labeling: Banner now uses aria-labelledby to reference its title, whether provided via title prop or Banner.Title child component
• Context implementation: Added BannerContext to share generated title IDs between Banner and Banner.Title
• ID generation: Uses React's useId hook to generate unique IDs for title elements
• Backward compatibility: Custom aria-label and aria-labelledby props continue to work as overrides

Priority order

1. User-provided aria-labelledby (highest)
2. User-provided aria-label
3. Generated aria-labelledby referencing title (default)

Example

Before:

<Banner title="Session expires soon" variant="warning" />
// Landmark labeled as "Warning"

After:

<Banner title="Session expires soon" variant="warning" />
// Landmark labeled as "Session expires soon"

Works with both approaches:

// Via title prop
<Banner title="Session expires soon" />

// Via Banner.Title child
<Banner>
  <Banner.Title>Session expires soon</Banner.Title>
</Banner>

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Update Banner component to use the Banner.Title as the default label for the landmark region</issue_title>
<issue_description>Update the Banner component so that it is aria-labelledby the Banner.Title in the component (either the directly rendered title or if a custom one is passed).

• Make sure to add a test(s) for this
• Make sure folks can still pass in aria-label or aria-labelledby as expected</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Update Banner component to use the Banner.Title as the default label for the landmark region #6590

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot]

🦋 Changeset detected

Latest commit: bffd66b

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	Minor

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]

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

[github-actions]

Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days.

[primer-integration]

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

[primer-integration]

Integration test results from github/github-ui:

  CI Passed
  VRT Passed
  Projects Passed

All checks passed!

[Copilot]

Pull request overview

This PR improves the accessibility of the Banner component by using aria-labelledby to reference the actual banner title instead of generic variant labels like "Information" or "Warning". This provides more meaningful context to screen reader users.

Changes:

• Replaced generic variant-based aria-label values with aria-labelledby that references the Banner's title element
• Added BannerContext to share generated IDs between Banner and Banner.Title components
• Updated tests to verify the new labeling approach and maintain backward compatibility

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
packages/react/src/Banner/Banner.tsx	Implemented BannerContext, added useId hook for title ID generation, updated aria-labelledby/aria-label logic with proper priority order, removed obsolete labels object
packages/react/src/Banner/Banner.test.tsx	Updated tests to verify new aria-labelledby behavior for all variants, added tests for Banner.Title child component usage, verified custom aria-label and aria-labelledby overrides work correctly
.changeset/banner-aria-labelledby-title.md	Added changeset documenting this as a minor version change with appropriate description