govuk_publishing_components
govuk_publishing_components copied to clipboard
alphagov
Search component on blue background focus state
The focus state for the search input when used on a blue background looks like this when focused:
Should a black border be added to make this more consistent with other search boxes and text inputs?
Other search component variants focus state:
Text input focus state:
As long as the yellow contrasts with the background colour properly you do not need to make the border thicker as it's clearly visible and passes the non-text contrast guidelines.
If you look at the Design System website search we don't add a thicker border there since yellow contrasts well with black.
So this depends on the 'inverse' context, is this component always used on a dark colour that contrasts well with yellow? If so, no change is needed.
I don't think that this was raised because it's not accessible - it's a question about the visual consistency of the text input.
The setting to turn this on is on_govuk_blue: true, so it should only be used on the blue background.
Fair enough. Just letting you know what the Dave H, Interaction designer who led the new focus updates, explained to me when we updated our search.
when I did latest manuals-frontend update, I used this style https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style
manuals isn't using the search component
@monicacrusellasfanlo Would you be able to advise if we want to make changes to the focus state when the search box is on a blue background? ie. add a black border in addition to the yellow border, as shown in Ian's screenshot above? Or can we close this ticket?
Here's a preview of what the search box currently looks like on a blue background: https://components.publishing.service.gov.uk/component-guide/search/for_use_on_govuk_blue_background/preview
Thank you 🙏
@hannalaakso I personally think that, in order to be consistent with the other search instances we use across the site, ideally we should add a black border. How much effort would that be? If it's too time consuming we may just want to close the ticket since this seems like an edge case? But if it's something fairly quick I think it'd be worth it.
This has been fixed by https://github.com/alphagov/govuk_publishing_components/pull/3599
