1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-11-10 01:19:53 +01:00
unleash.unleash/frontend/src/component/common/SkipNavLink
Thomas Heartman 2ff385a4b6
fix(1-3295): fix broken skip link (#9239)
Fixes the issue where the skip link wouldn't take you to the main
content of the page anymore.

Also includes a few related minor semantic and a11y improvements:

1. The `main` element now only surrounds the actual main content of the
page. The sidebar is nav content and shouldn't be within it. The easiest
way to do this was to change the element that was previously a `main` to
a `div` and make the main content wrapper a `main` instead.
2. Makes the skip link target visible when focused. But invisible
otherwise. This has two benefits:
1. It's immediately obvious that using the skip link has worked. It
tells you that it's at the start of the main content.
2. Because the link now has text, it can be targeted by link search
(e.g. in Firefox, press `'` to search for links (I use this **a lot**)),
making it super easy to move your focus to the main content directly.
(Yes, landmark navigation should also work here, though, especially with
the `main` change).

The implementation of UI considerations of the skip link are based on
the CSS-tricks article [a deep dive on skipping to
content](https://css-tricks.com/a-deep-dive-on-skipping-to-content/)
from 2021.

Here's what it looks like when you skip to content:

![image](https://github.com/user-attachments/assets/c22819e6-f801-47d8-a9d9-908c250fd6ba)


When it doesn't have focus, it's invisible.
2025-02-06 10:21:56 +01:00
..
SkipNavLink.tsx
SkipNavTarget.tsx