fix(search): move focus ring to the search form container - #288
GautamVhavle wants to merge 1 commit into
Conversation
The global input styles from @siemens/ix apply an offset focus outline to every input on the site. On the search field that ring was painted inside the surrounding form, so it overlapped the form border, the submit icon and the clear button. The input no longer draws its own outline; the form container shows the focus ring instead. Fixes siemens/ix#2751
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review. 📝 WalkthroughWalkthroughThe search bar stylesheet adds a focus outline to ChangesSearch bar focus styling
Estimated code review effort: 1 (Trivial) | ~3 minutes Merge Risk: ⚪ Minimal · up to This localized styling change moves the search focus ring to the surrounding form container to prevent visual overlap; no actionable merge-blocking risk remains after normal checks and review. Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Full details: Docstring CoverageExplanation No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0 files. (1 skipped: 1 unsupported.) ✨ 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 |
danielleroux
left a comment
danielleroux
left a comment
There was a problem hiding this comment.
@GautamVhavle Can you have a look into this:
There are two outlines one for the complete input (combined) and one for the "clear" button if Tab further. There should only be the one on the clear button if tab set focus on clear.
2 participants
What
Fixes the focus outline on the site search input so it no longer overlaps the search icon, text, and clear button in dark theme (and light theme too).
Why
The global
input:focusstyle from@siemens/ixdraws an offset outline directly on the<input>. On the search field that ring sits inside the surrounding.aa-Formcontainer, so it overlapped the form border and crowded the icons.Fix
.aa-Inputitself..aa-Formcontainer instead (:focus-within), which already has room around it.Verified locally in both themes by building and serving the site and focusing the search input.
Fixes #290