ic-ui-kit
ic-ui-kit copied to clipboard
mi6
Focus state issues with breadcrumbs using slotted links in React
Summary of the bug
When using slotted links in breadcrumbs, the current page is focusable and briefly shows the native focus indicator. In Safari, it shows a black underline.
🪜 How to reproduce
- Go to the Slotted links or React Router story in the React Storybook.
- Tab through the links.
- See the following:
- The breadcrumb for the current page is focusable in both Chrome and Safari.
- The current page breadcrumb shows an outline around it briefly when it is focussed, and it shows a black underline on Safari.
- On Safari, it also moves a bit when you tab off it.
- If you focus on the current page, and press Enter, it actually works as a link, taking you to that page (technically refreshing the current page you are on).
- On Safari, when tabbing through or hovering on the breadcrumbs, the underline disappears.
📸 Screenshots or code
On Chrome:
https://github.com/user-attachments/assets/57eb90a8-8bc2-486e-8e97-ad4a612bf478
On Safari:
https://github.com/user-attachments/assets/1c252794-c8a0-40b1-8fdd-4b2cf2e972b0
🖥 📱 Device
- Browser: Chrome and Safari
🧐 Expected behaviour
The current page should not be focusable at all as you are already on that page (see the breadcrumbs which don't have slotted links).
📝 Acceptance Criteria
Given that there are breadcrumbs on the screen which are using slotted links When I tab through the breadcrumbs Then the current page breadcrumb should not be focusable at all.
