Focus state issues with breadcrumbs using slotted links in React

[GCHQ-Developer-847]

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

1. Go to the Slotted links or React Router story in the React Storybook.
2. Tab through the links.
3. 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.

[GCHQ-Developer-847]

Related to #2196