-
Bug
-
Resolution: Unresolved
-
Low
-
None
-
9.5.1
-
Severity 3 - Minor
-
Issue Summary
The custom breadcrumb region is not programmatically defined.
Steps to Reproduce
- Open the home page and activate the "projects" link in the header.
- Select any of the projects from the main content area.
- Now select any of the repositories from the main content area.
- Navigate onto the "Pull request" link in the side navigation and activate it.
- Activate any of the links from the "Summary" column in the data table.
- Observe the navigation trails.
- Inspect the code.
- Observe that the Breadcrumb is not programmatically defined.
Screen Recording
Screen Recording 2025-03-03 at 8.26.20 AM.mov
Actual Results
There is a custom breadcrumb on the page that shows the navigation trail. However, this is not programmatically declared with role and name. As a result users of a screen reader will not be able to understand the page's content structure.
Expected Results
Breadcrumb should be declared as a navigation region with an accessible name. The container of the breadcrumb should be a <nav> element and named as "Breadcrumb" using an "aria-label" attribute. As well, identify the currently relevant page in the breadcrumb navigation with aria-current="page".
Code Snippet
<nav aria-label="Breadcrumb"> <ul> <li><button aria-label="Main, copy branch name">...</button></li> ... <li><button aria-label="Add-bunster, copy branch name">...</button></li> ... </ul> </nav>
Workaround
Currently there is no known workaround for this behavior. A workaround will be added here when available
Environment
MacBook Pro (16-inch, 2021)
macOs Sonoma 14.3.1
Chrome - Version 119.0.6045.123 (Official Build) (64-bit)
Firefox- Version 93.0 (32-bit)
Safari- Version 17.3.1 (19617.2.4.11.12)
JAWS- Version 2023
NVDA- Version 2024.3
Voiceover - Version Latest
| Form Name | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|