fix banner aria-labelledby issue

Author: Abdelmonaem

packages/react/src/Banner/Banner.test.tsx

@@ -49,6 +49,10 @@ describe('Banner', () => {
     render(<Banner aria-label="Test" title="test" variant="warning" />)
     expect(screen.getByRole('region')).toHaveAttribute('aria-label', 'Test')
   })
+  it('should support the `aria-labelledby` prop to override the default aria-labelledby for the landmark', () => {
+    render(<Banner aria-labelledby="Test" title="test" variant="warning" />)
+    expect(screen.getByRole('region')).toHaveAttribute('aria-labelledby', 'Test')
+  })
 
   it('should default the title to a h2', () => {
     render(<Banner title="test" />)

packages/react/src/Banner/Banner.tsx

@@ -15,6 +15,7 @@ export type BannerProps = React.ComponentPropsWithoutRef<'section'> & {
    * landmark region
    */
   'aria-label'?: string
+  'aria-labelledby'?: string
 
   /**
    * Provide an optional className to add to the outermost element rendered by
@@ -85,6 +86,7 @@ const labels: Record<BannerVariant, string> = {
 export const Banner = React.forwardRef<HTMLElement, BannerProps>(function Banner(
   {
     'aria-label': label,
+    'aria-labelledby': ariaLabelledby,
     children,
     className,
     description,
@@ -132,6 +134,7 @@ export const Banner = React.forwardRef<HTMLElement, BannerProps>(function Banner
     <section
       {...rest}
       aria-label={label ?? labels[variant]}
+      aria-labelledby={ariaLabelledby ?? title}
       className={clsx(className, classes.Banner)}
       data-dismissible={onDismiss ? '' : undefined}
       data-title-hidden={hideTitle ? '' : undefined}