Skip to content

a11y(attachments): restore keyboard focus with :focus-visible - #3337

Open
Vidminas wants to merge 1 commit into
HugoBlox:mainfrom
Vidminas:a11y/focus-visible
Open

a11y(attachments): restore keyboard focus with :focus-visible#3337
Vidminas wants to merge 1 commit into
HugoBlox:mainfrom
Vidminas:a11y/focus-visible

Conversation

@Vidminas

@Vidminas Vidminas commented Jul 11, 2026

Copy link
Copy Markdown

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).

🚀 What type of change is this?

  • 🐛 Bug fix (A non-breaking change that fixes an issue)
  • New feature (A non-breaking change that adds functionality)
  • 💅 Style change (A change that only affects formatting, visuals, or styling)
  • 📚 Documentation update (Changes to documentation only)
  • 🧹 Refactor or chore (A code change that neither fixes a bug nor adds a feature)
  • 💥 Breaking change (A fix or feature that would cause existing functionality to not work as expected)

🎯 What is the purpose of this change?

The .hb-attachment-link action 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-visible rule anywhere in
assets/css/framework/
to restore one. So these controls have no visible keyboard focus
indicator
(WCAG 2.4.7).

Fix. Drop the blanket suppression from the @apply and add an explicit :focus-visible ring
(with a dark-mode colour). :focus-visible shows the ring for keyboard focus but not on mouse
click, so it fixes the a11y gap without introducing a click outline.

Verified on the academic-cv starter (406 attachment links): the compiled CSS now contains
.hb-attachment-link:focus-visible { outline: 2px solid var(--color-primary-600); … } (plus the
.dark variant), 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):

Before — main (outline suppressed) After — this PR (:focus-visible ring)
c2-before c2-after

Before, the focused button has no visible indicator; after, it gets a :focus-visible outline.
Mouse-clicking the same button shows no ring (that's the point of :focus-visible).


ℹ️ Documentation Check

  • No, this change does not require a documentation update.
  • Yes, I have updated the documentation accordingly (or will in a follow-up PR).

📜 Contributor Agreement

Thank you for your contribution!

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>
@Vidminas
Vidminas requested a review from gcushen as a code owner July 11, 2026 07:46
@netlify

netlify Bot commented Jul 11, 2026

Copy link
Copy Markdown

Deploy Preview for academic-demo canceled.

Name Link
🔨 Latest commit a2aa320
🔍 Latest deploy log https://app.netlify.com/projects/academic-demo/deploys/6a51f4cbfc1eee00097398f1

@github-actions

Copy link
Copy Markdown
Contributor

This PR is stale because it has not had any recent activity. The resources of the project maintainers are limited, and so we are asking for your help.

If you feel that the PR is still relevant in the latest release, consider making the PR easier to review and finding developers to help review the PR.

Please be mindful that although we encourage PRs, we cannot expand the scope of the project in every possible direction. There will be requests that don't make the roadmap.

This PR will automatically close soon if no further activity occurs. Thank you for your contributions.

@github-actions github-actions Bot added the stale label Aug 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant