[a11y]: Breadcrumb - Multiple "navigation" landmarks with the same parent region

[oartigue]

Package

@carbon/react, carbon-components

Browser

Chrome, Firefox

Operating System

MacOS, Other

Package version

v11

React version

No response

Automated testing tool and ruleset

IBM Accessibility checker

Assistive technology

No response

Description

IBM accessibility checker detects a violation on the Breadcrumb component:
Multiple "navigation" landmarks with the same parent region are not distinguished from one another because they have the same "Breadcrumb" label.

To fix this problem, we need to add an aria-label property on each BreadcrumbItem component. But this property is possible only on Breadcrumb not its own children (BreadcrumbItem).

WCAG 2.1 Violation

No response

Reproduction/example

See steps to reproduce

Steps to reproduce

• Create a breadcrumb to generate this:

<div class="bai-breadcrumb">
<nav aria-label="Breadcrumb">
<ol class="bx--breadcrumb">
<li class="bx--breadcrumb-item"><a class="bx--link" href="dashboards">Dashboards</a></li>
<li class="bx--breadcrumb-item"><a class="bx--link" href="#">oa</a></li>
<li class="bx--breadcrumb-item bx--breadcrumb-item--current bai-breadcrumb-last"><a class="bx--link" href="#">d1</a></li>
</ol>
</nav>
</div>

• Run IBM accessibility checker
• => get this message:
  Multiple "navigation" landmarks with the same parent region are not distinguished from one another because they have the same "Breadcrumb" label
  Multiple landmarks should have a unique 'aria-labelledby' or 'aria-label' or be nested in a different parent regions

Code of Conduct

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