[a11y]: Page Header with breadcrumbs have violation due to same aria-label="Breadcrumb" on more than one <nav>

[aknguyen7]

Package

@carbon/ibm-products

Browser

Chrome

Operating System

No response

Package version

2.53

React version

1.54

Automated testing tool and ruleset

IBM Equal Accessibility Checker version 7.3

Assistive technology

No response

Description

Using PageHeader with breadcrumb has accessibility violation due to the

has the same aria-label="Breadcrumb".

https://carbon-for-ibm-products.netlify.app/?path=/story/ibm-products-components-page-header-pageheader--with-breadcrumbs&globals=viewport:basic

There is not an option to add/apply an aria-label for the breadcrumbs in PageHeader.

Slack: https://ibm-cloud.slack.com/archives/C013ZTX0N6B/p1731617428305279

WCAG 2.1 Violation

No response

Reproduction/example

https://carbon-for-ibm-products.netlify.app/?path=/story/ibm-products-components-page-header-pageheader--with-breadcrumbs&globals=viewport:basic

Steps to reproduce

1. Create a PageHeader with breadcrumbs for example
   <PageHeader
   breadcrumbs={[
   {
   href: '/integration',
   key: 'integrations',
   label: 'manage.integrations'
   },
   ]}
   title={{
   loading: false,
   text: 'cloud.monitoring.integrate'
   }}
   subtitle={'cloud.monitoring.subtitle'}
   />
2. Run IBM Accessbility Checker version 7.3

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems