From 9501b908245f96a1832356b1f8d78705b2458206 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Mon, 1 Sep 2025 17:42:28 +1000
Subject: [PATCH 1/2] Should prefer aria-labelled-by over aria-label

---
 packages/react/src/Banner/Banner.test.tsx | 19 +++++++++++++++++++
 packages/react/src/Banner/Banner.tsx      |  4 +++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/Banner/Banner.test.tsx b/packages/react/src/Banner/Banner.test.tsx
index ef993da80a1..bf17f308c97 100644
--- a/packages/react/src/Banner/Banner.test.tsx
+++ b/packages/react/src/Banner/Banner.test.tsx
@@ -50,6 +50,25 @@ describe('Banner', () => {
     expect(screen.getByRole('region')).toHaveAttribute('aria-label', 'Test')
   })
 
+  it('should prefer aria-labelledby over aria-label and not set both', () => {
+    render(
+      <Banner aria-label="Override" aria-labelledby="my-banner-title">
+        <Banner.Title id="my-banner-title">Explicit Banner Title</Banner.Title>
+      </Banner>,
+    )
+
+    const region = screen.getByRole('region', {name: 'Explicit Banner Title'})
+    expect(region).toHaveAttribute('aria-labelledby', 'my-banner-title')
+    expect(region).not.toHaveAttribute('aria-label')
+  })
+
+  it('should only set aria-label when aria-labelledby is not provided', () => {
+    render(<Banner aria-label="Custom Label" title="test" />)
+    const region = screen.getByRole('region')
+    expect(region).toHaveAttribute('aria-label', 'Custom Label')
+    expect(region).not.toHaveAttribute('aria-labelledby')
+  })
+
   it('should default the title to a h2', () => {
     render(<Banner title="test" />)
     expect(screen.getByRole('heading', {level: 2})).toBeInTheDocument()
diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx
index b4921775c3e..3b79f88ad37 100644
--- a/packages/react/src/Banner/Banner.tsx
+++ b/packages/react/src/Banner/Banner.tsx
@@ -85,6 +85,7 @@ const labels: Record<BannerVariant, string> = {
 export const Banner = React.forwardRef<HTMLElement, BannerProps>(function Banner(
   {
     'aria-label': label,
+    'aria-labelledby': labelledBy,
     children,
     className,
     description,
@@ -131,7 +132,8 @@ export const Banner = React.forwardRef<HTMLElement, BannerProps>(function Banner
   return (
     <section
       {...rest}
-      aria-label={label ?? labels[variant]}
+      aria-labelledby={labelledBy}
+      aria-label={labelledBy ? undefined : (label ?? labels[variant])}
       className={clsx(className, classes.Banner)}
       data-dismissible={onDismiss ? '' : undefined}
       data-title-hidden={hideTitle ? '' : undefined}

From 9beda140ff1a109e9b02fd02b9dd50e0cb41600d Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Mon, 1 Sep 2025 17:49:26 +1000
Subject: [PATCH 2/2] Prefer aria-labelledby over aria-label in Banner

---
 .changeset/hot-melons-jump.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/hot-melons-jump.md

diff --git a/.changeset/hot-melons-jump.md b/.changeset/hot-melons-jump.md
new file mode 100644
index 00000000000..5feeafee472
--- /dev/null
+++ b/.changeset/hot-melons-jump.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Banner: Should prefer aria-labelled-by over aria-label