The current focus state for Olivero's search form is a "growing underline" effect (we have an outline in high contrast mode).

This is different than the theme's other form focus state. Is this okay? If not, what can we do to make it beautiful.
This is split off of #3153260: Standardize Olivero's focus states across all non-form controls
| Comment | File | Size | Author |
|---|---|---|---|
| Screenshot_1_8_21__8_58_AM.png | 97.69 KB | mherchel |
Comments
Comment #2
bnjmnmComment #3
andrewmacpherson commentedThe issue we spun this off from was about bringing consistency to our focus styles. That's a very worthwhile aim, and the current style (underlining on focus) isn't consistent with the 4-sided outline proposed for everything else. So it's not okay, and we should improve this. It would be easy to miss the underline if you were expecting a 4-sided outline. Bear in mind that some users will have animation turned off, and therefore the "growing" underline won't attract attention.
Note that WCAG doesn't actually require consistent focus styles, and this technically passes both SC 2.4.7 Focus Visible and SC 1.4.11 Non-text Contrast. For that reason, this isn't really a stable blocker.
I think it's worth noting that the search box style (black background) is also inconsistent with other text inputs. Perhaps we could expand the scope of this to review the entire search component, in all states? Make it consistent with other form elements, as well as other focus styles.
Comment #4
andrewmacpherson commentedComment #5
mgiffordtagging
Comment #7
mherchel