Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

focus:visible outline of site-title not visible #2696

Closed
1 task
techfg opened this issue Dec 14, 2024 · 0 comments · Fixed by #2704 · May be fixed by #2714
Closed
1 task

focus:visible outline of site-title not visible #2696

techfg opened this issue Dec 14, 2024 · 0 comments · Fixed by #2704 · May be fixed by #2714

Comments

@techfg
Copy link
Contributor

techfg commented Dec 14, 2024 •
edited
Loading

What version of starlight are you using?

0.29.3 / 0.30.1

What version of astro are you using?

4.16.17 / 5.0.5

What package manager are you using?

npm

What operating system are you using?

linux

What browser are you using?

chrome, firefox

Describe the Bug

When the site-title anchor is :focus-visible, the outline is not completely visible.

Steps to reproduce

  1. Go to Starlight Docs
  2. Tab on the page until the focus is set on the logo; OR using dev tools, toggle :focus-visible on the site-title anchor
  • Expected Result: the outline is fully visible
  • Actual Result: only the corners of the outline are visible

image

I believe the reason for this is due to the title-wrapper having overflow: hidden. In the repro below, the outline is forced to simplify and mirror :focus-visible. Uncommenting the title-wrapper CSS to remove the overflow: hidden results in the outline being fully visible.

Note

For some reason, when initially loading the project on stackblitz, an error The collection "docs" does not exist or is empty. Ensure a collection directory with this name exists. is encountered and visible in the console. Terminating and restarting npm run dev resolves the issue. I'm unable to reproduce this behavior locally so not sure what is going on but you will need to cancel and restart to view the site in the repro.

image

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-starlight-rvfvgkfb

Participation

  • I am willing to submit a pull request for this issue.
@techfg techfg changed the title focus outline of site-title not visible focus:visible outline of site-title not visible Dec 14, 2024
@delucis delucis mentioned this issue Dec 16, 2024
Merged
@techfg techfg mentioned this issue Dec 17, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
1 participant
@techfg