Make hidden skip link visible on focus (fixes #1088)

[demiankatz]

This fixes #1088.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
universalviewer	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 21, 2024 2:33pm

[LanieOkorodudu]

@demiankatz, I just tested this on the Vercel app. It looks good. Thanks for the fix!

[demiankatz]

Thanks for the testing, @LanieOkorodudu! I'll merge this once I also get a thumbs-up from somebody on the code itself.

[crhallberg]

This looks good. A more global way would be to add .sr-only:focus-visible, .sr-only:active styles to the CSS (similar to these styles). It looks like there are opposing styles in the LESS already that we can add these selectors to.

[crhallberg]

I also found this modern alternative from the A11y Project. I would adapt it as:

.sr-only:not(:focus-visible, :active) {
    /* ... */
}

[demiankatz]

@crhallberg, I tried revising the .sr-only { definition to .sr-only:not(:focus-visible, :active) { in scaffolding.less instead of my jQuery-based fix. Unfortunately, it doesn't work -- the text remains invisible when focused. Am I misunderstanding your suggestion?

[demiankatz]

Actually, I tried a slightly different approach, and it did work for me. What do you think, @crhallberg?

[crhallberg]

Yes! This CSS fix is good and will apply to any other elements that suffer this same issue!