a11y(attachments): restore keyboard focus with :focus-visible#3337
Open
Vidminas wants to merge 1 commit into
Open
a11y(attachments): restore keyboard focus with :focus-visible#3337Vidminas wants to merge 1 commit into
Vidminas wants to merge 1 commit into
Conversation
The `.hb-attachment-link` action buttons (publication/project links) hard-removed their focus outline (`outline-none` + `focus:outline-none`) with no `:focus-visible` replacement anywhere in the framework CSS, so keyboard users got no visible focus indicator (WCAG 2.4.7). Drop the blanket suppression and add a `:focus-visible` ring (light + dark). It shows for keyboard focus but not on mouse click, per native :focus-visible. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
✅ Deploy Preview for academic-demo canceled.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The
.hb-attachment-linkaction buttons (publication/project links) hard-removed their focus outline (outline-none+focus:outline-none) with no:focus-visiblereplacement anywhere in the framework CSS, so keyboard users got no visible focus indicator (WCAG 2.4.7).🚀 What type of change is this?
🎯 What is the purpose of this change?
The
.hb-attachment-linkaction buttons (the PDF / Cite / Code / Source links on publication rows,project cards, and detail pages) hard-remove their focus outline —
@apply … outline-none … focus:outline-none— and there is no:focus-visiblerule anywhere inassets/css/framework/to restore one. So these controls have no visible keyboard focusindicator (WCAG 2.4.7).
Fix. Drop the blanket suppression from the
@applyand add an explicit:focus-visiblering(with a dark-mode colour).
:focus-visibleshows the ring for keyboard focus but not on mouseclick, so it fixes the a11y gap without introducing a click outline.
Verified on the
academic-cvstarter (406 attachment links): the compiled CSS now contains.hb-attachment-link:focus-visible { outline: 2px solid var(--color-primary-600); … }(plus the.darkvariant), and the base rule no longer forces the outline off.📸 Screenshots or Screencast (if applicable)
Keyboard focus on a publication's first action link (the PDF button):
main(outline suppressed):focus-visiblering)Before, the focused button has no visible indicator; after, it gets a
:focus-visibleoutline.Mouse-clicking the same button shows no ring (that's the point of
:focus-visible).ℹ️ Documentation Check
📜 Contributor Agreement
Thank you for your contribution!