🐛 [a11y] - Breadcrumbs accessibility issues

[jjwinskill]

Describe the bug

When a breadcrumb item takes the prop "selected", it is put in a non-interactive state signifying that the breadcrumb item is the same as the active page.

When in this state, a breadcrumb item has no hover state and cannot be clicked. However, it can still be focused and interacted with via keyboard navigation.

Reproduction steps

1. Go to the Storybook implementation of Breadcrumbs at https://primer.style/brand/components/Breadcrumbs
2. Try interacting with the mouse on any bread crumb item in a "selected" state
3. Observe that nothing happens
4. Use the tab key to navigate through the each of the interactive elements, until the Breadcrumb items are reached
5. Using tab, see that the "selected" breadcrumb is focusable
6. When this breadcrumb item is focused, press the enter key to see that it is interactive

Expected behavior

1. Go to the Storybook implementation of Breadcrumbs at https://primer.style/brand/components/Breadcrumbs
2. Try interacting with the mouse on any bread crumb item in a "selected" state
3. Observe that nothing happens
4. Use the tab key to navigate through the each of the interactive elements, until the Breadcrumb items are reached
5. Using tab, see that the "selected" breadcrumb is skipped and is not focusable

Screenshots

Mouse interaction works as expected

Screen.Recording.2024-11-14.at.9.39.51.AM.mov

Keyboard interaction a11y bug

Screen.Recording.2024-11-14.at.9.41.02.AM.mov

Browsers

Chrome

OS

Mac