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]

⚠️ No Changeset found

Latest commit: 9658737

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a 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!