feat: add :focus-visible support for better keyboard accessibility #367
Conversation
- Add :focus-visible rules to show focus outlines for keyboard navigation - Add :focus:not(:focus-visible) to hide outlines for mouse clicks - Improves WCAG 2.1 compliance (SC 2.4.7) - Uses low-specificity :where() for easy customization - Covers all interactive elements (buttons, inputs, links, etc.)
WalkthroughAdds CSS rules to Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/forms.scss(1 hunks)
🔇 Additional comments (1)
src/components/forms.scss (1)
95-105: ✓ Focus-visible rule is well-structured.The
:focus-visibleselector is correctly composed with appropriate target elements and uses:where()to maintain low specificity. The outline styling (2px solid, 2px offset) is proper for accessibility.
src/components/forms.scss
Outdated
| :where( | ||
| a, | ||
| button, | ||
| input, | ||
| select, | ||
| textarea | ||
| ):focus:not(:focus-visible) { | ||
| outline: none; |
There was a problem hiding this comment.
Critical: Selector mismatch between focus and focus-visible rules.
The :focus:not(:focus-visible) rule (lines 108–115) does not include [tabindex]:not([tabindex="-1"]), whereas the :focus-visible rule (lines 95–105) does. This creates an inconsistency:
- Custom focusable elements with
tabindexwill show an outline on keyboard focus (via:focus-visible) ✓ - But that outline will not be removed when those same elements are focused via mouse, because they're not matched by the second rule ✗
This violates the intended behavior: "keyboard shows outlines and mouse clicks do not."
Apply this fix to make both selectors consistent:
/* Remove focus outline for mouse users */
:where(
a,
button,
input,
select,
- textarea
+ textarea,
+ [tabindex]:not([tabindex="-1"])
):focus:not(:focus-visible) {
outline: none;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| :where( | |
| a, | |
| button, | |
| input, | |
| select, | |
| textarea | |
| ):focus:not(:focus-visible) { | |
| outline: none; | |
| :where( | |
| a, | |
| button, | |
| input, | |
| select, | |
| textarea, | |
| [tabindex]:not([tabindex="-1"]) | |
| ):focus:not(:focus-visible) { | |
| outline: none; | |
| } |
🤖 Prompt for AI Agents
In src/components/forms.scss around lines 108 to 115, the
:focus:not(:focus-visible) selector omits [tabindex]:not([tabindex="-1"]) which
makes focus and focus-visible rules inconsistent for custom focusable elements;
update the :focus:not(:focus-visible) selector to include
[tabindex]:not([tabindex="-1"]) so it exactly mirrors the earlier :focus-visible
selector (i.e., include a, button, input, select, textarea, and
[tabindex]:not([tabindex="-1"]) in the :focus:not(:focus-visible) rule) and keep
the same rule body (outline: none).
Ensures custom focusable elements with tabindex don't show outlines on mouse clicks, matching the :focus-visible behavior
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/forms.scss (1)
94-111: Optional: Consider adding a clarifying comment for maintainers.The dual pseudo-class pattern (
:focus-visible+:focus:not(:focus-visible)) is relatively modern and may not be immediately obvious to future maintainers. A brief inline comment explaining the keyboard vs. mouse distinction could improve maintainability without adding weight to the stylesheet.Example:
/* Show outline for keyboard focus, hide for mouse focus */ :where(...):focus-visible { ... } :where(...):focus:not(:focus-visible) { outline: none; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/forms.scss(1 hunks)
🔇 Additional comments (2)
src/components/forms.scss (2)
94-102: Clear and focused keyboard accessibility styling.The
:focus-visiblerule correctly applies a 2px outline with 2px offset to keyboard-navigated interactive elements using low-specificity:where()selectors. The use ofcurrentColorensures the outline adapts to element styling, and coverage includes custom focusable elements via[tabindex]:not([tabindex="-1"]).
104-111: Critical issue from past review has been resolved.The
:focus:not(:focus-visible)rule now correctly includes[tabindex]:not([tabindex="-1"]), making both selectors consistent. This ensures custom focusable elements will properly remove the outline on mouse focus, as intended.
1 participant
Description
Adds
:focus-visibleCSS support for better keyboard accessibility.Changes
:where()for low specificityTesting
✅ Built and tested in browser - keyboard shows outlines, mouse clicks don't
Impact
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.