fix: Improve modal close button focus and hover states#112
Merged
Conversation
- Use :focus-visible instead of :focus for keyboard-only indication - Add box-shadow glow effect matching other dialog components - Include border-color/border-width in transition for smooth animation https://claude.ai/code/session_012usW3MQ2WzoKPan778WZb2
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. 🗂️ Base branches to auto review (1)
Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ 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 |
FSM1
changed the title
FSM1
added a commit
that referenced
this pull request
Feb 11, 2026
* fix(web): replace double-outline focus style with thicker border The global :focus-visible outline (2px + 2px offset) stacked on top of component borders, creating an ugly double ring on inputs, buttons, and the modal close button. Switch to a 2px border on focus instead, with padding compensation to prevent layout shift. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs(quick-012): fix double-outline focus style Quick task completed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * style(design): update input focus border thickness to 2px Align Pencil design with implementation: focused input fields now show 2px border instead of 1px to match the thicker single-border focus style. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: Improve modal close button focus and hover states (#112) fix(web): improve modal-close focus styling per PR review - Use :focus-visible instead of :focus for keyboard-only indication - Add box-shadow glow effect matching other dialog components - Include border-color/border-width in transition for smooth animation https://claude.ai/code/session_012usW3MQ2WzoKPan778WZb2 Co-authored-by: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
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
2 participants
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.
Summary
Enhanced the modal close button's visual feedback by improving transition animations and focus state styling for better accessibility and user experience.
Key Changes
border-colorandborder-widthfor smoother animations when the button state changes:focusto:focus-visibleto only show focus styles when keyboard navigation is used, improving visual clarity for mouse usersbox-shadowwith green glow effect to the focus state for more prominent keyboard focus indicationoutline: noneto prevent double focus indicatorsImplementation Details
The changes ensure that:
:focus-visible), not mouse usershttps://claude.ai/code/session_012usW3MQ2WzoKPan778WZb2