Update Banner component to use aria-labelledby for Banner.Title by default

[Copilot]

The Banner component now uses aria-labelledby pointing to the Banner.Title element as the default labeling mechanism for the landmark region, instead of using generic variant labels like "Information" or "Warning".

Problem

Previously, Banner components were labeled with generic variant-based labels:

<Banner title="Repository archived" variant="warning" />
// Result: <section aria-label="Warning">
//   <h2>Repository archived</h2>
// </section>

This meant screen reader users heard "Warning region" instead of the more descriptive "Repository archived region", making it harder to understand the purpose of each banner.

Solution

The Banner now automatically generates unique IDs for title elements and uses aria-labelledby to reference them:

<Banner title="Repository archived" variant="warning" />
// Result: <section aria-labelledby="generated-id">
//   <h2 id="generated-id">Repository archived</h2>
// </section>

This works for both the title prop and Banner.Title component usage:

<Banner variant="info">
  <Banner.Title>Custom title</Banner.Title>
</Banner>
// Result: <section aria-labelledby="generated-id">
//   <h2 id="generated-id">Custom title</h2>
// </section>

Backward Compatibility

Existing override patterns continue to work unchanged:

// Custom aria-label still works
<Banner aria-label="Custom label" title="Title" />

// Custom aria-labelledby still works  
<Banner aria-labelledby="external-id" title="Title" />

Implementation

• Uses React's built-in useId() hook for stable, unique ID generation
• Implements React Context for clean ID sharing between Banner and Banner.Title
• Maintains all existing prop interfaces with new optional aria-labelledby support
• Comprehensive test coverage for all usage scenarios

Fixes #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: a6e8bf2

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