supabase / supabase / 30099494529

74%

push

github

fix: Skip to main content link should be visible when focused (#48303)

## Problem

#47694 introduced a _Skip to main content_ link allowing keyboard users
to jump to the main section without having to tab through all the
navigation elements.

However, this link is completely invisible which means sighted users
will not see what is actually focused.

## Solution

The best practice for such links is to make them visible on focus. For
instance on https://tetralogical.com:
<img width="1556" height="305" alt="image"
src="https://github.com/user-attachments/assets/e36f6d73-98b0-46ca-b464-72540a482b5f"
/>

Here's what it looks like on Studio:
<img width="1835" height="335" alt="image"
src="https://github.com/user-attachments/assets/71623306-587a-48aa-b955-43d3368f6073"
/>

## How to test

- Make sure your browser allows to tab to links
(https://www.articulatesupport.com/article/How-to-Enable-Tab-Key-Navigation-on-a-Mac)
- Open
https://studio-staging-git-gildasgarcia-fe-3805-add-ski-cf6824-supabase.vercel.app
and sign in
- Once the Studio is loaded, verify the button isn't be visible
- Press _Tab_: the button should be visible.
- Press _Enter_, then press _Tab: the organizations search input should
be focused

1239 of 1708 branches covered (72.54%)

Branch coverage included in aggregate %.

1843 of 2441 relevant lines covered (75.5%)

237.22 hits per line