fix(topbar): improve focus style to meet WCAG 2.2 AA#1628
fix(topbar): improve focus style to meet WCAG 2.2 AA#1628dancormier merged 3 commits intodevelopfrom
Conversation
✅ Deploy Preview for stacks ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Yes, I agree. I was assuming we'd have to go outside for all input fields so in this case the search bar matches that logic and even though it's a button beside the input, it probably looks weirder to have it go inside then outside with side-by-side elements so I think your approach makes the most sense. Outside for both search elements. |
✅ Deploy Preview for stacks ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
giamir
left a comment
giamir
left a comment
There was a problem hiding this comment.
Looks good to me. If we haven't created a ticket yet to migrate this component to PPCP we should. Apart from that I could not find anything out of the ordinary.
One question related to the search input. Shouldn't that match the focus behavior we will eventually add to all input components?
What I am asking is if the picture below represents how we will end up styling inputs going forward?
I don't see why the topbar input should have a special style 🙂
|
@giamir I've created a ticket for the PPCP migration and will follow through on applying the input focus styles in an upcoming PR (STACKS-553). |
3 participants
Addresses https://stackoverflow.atlassian.net/browse/STACKS-549
This PR updates focus styles for all elements generally included within the topbar component.
Deploy preview
Notes on visual changes
.s-topbar--item,.s-topbar--logoFrom STACKS-549:
To match the mockup, I added a border radius of
var(--br-sm)of items (and of the logo for consistency). @CGuindon let me know if this is ok or if it needs modification.Search
The old focus styles looked out of place and it was easy enough to add a matching focus ring to the search input and select element. @CGuindon is this alright or should I revert/modify?
Ring placement
For the search input and select elements, I opted to render the focus ring outside the element. This stands in contrast with other topbar elements, which all have the focus ring rendered inside the element. I did this because these elements rely on the border being visible to read as an input/select. When I tried adding the ring inside the element, the focus state was kinda tough to distinguish from the unfocused state, especially in high contrast mode.
Notes on technical changes
Code structure
Since this component doesn't yet adhere to our PPCP structure, I decided it was best to keep all of the focus code grouped for easy parsing (and easy porting when we make the switch to PPCP).