fix: align focus ring on search input to container border#12069
Conversation
There was a problem hiding this comment.
Pull request overview
Fixes the misaligned focus ring on the Search Books page by moving the focus indicator from the inset <input> to the outer .searchbox container.
Changes:
- Removed the default focus outline from
.searchbox__input. - Added a
:focus-withinoutline to.searchboxso the focus ring aligns with the container border.
| } | ||
|
|
||
| .searchbox:focus-within { | ||
| outline: auto; |
There was a problem hiding this comment.
.searchbox:focus-within { outline: auto; } will rely on UA-defined focus styling, which can vary across browsers and may not align with the design tokens used elsewhere. Consider using the existing focus ring token (e.g. box-shadow: var(--box-shadow-focus) from static/css/tokens/borders.css) for a consistent, themeable focus indicator (and to better match the component’s border-radius).
| outline: auto; | |
| outline: none; | |
| box-shadow: var(--box-shadow-focus); |
There was a problem hiding this comment.
@akramcodez can you try this suggestion and share a screenshot. We are working on standardizing the visual style of our focus states by utilizing these css custom properties/variables.
| } | ||
|
|
||
| .searchbox:focus-within { | ||
| outline: auto; |
There was a problem hiding this comment.
@akramcodez can you try this suggestion and share a screenshot. We are working on standardizing the visual style of our focus states by utilizing these css custom properties/variables.
|
Thanks! @lokesh, I’ve updated it to use box-shadow: var(--box-shadow-focus) as suggested. Sharing the updated screenshot. |
github-actions
Bot
added
the
Needs: Response
Closes #12067
fix: The focus ring (outline) on the Search Books page was appearing on the inner
<input>element, causing it to look offset/misaligned from the visible container border.Technical
The
.searchboxcontainer holds the visible border and border-radius, but the browser's default focus ring was drawn on the child<input>— which sits inset inside the container — making the ring appear misaligned.Fix in static/css/components/searchbox.css:
outline: noneto.searchbox__inputto suppress the misaligned default ringoutline: autoon.searchbox:focus-withinso the ring is drawn on the outer container, perfectly hugging its borderTesting
Screenshot
Before
After
Stakeholders
@lokesh