alphagov / govuk_publishing_components

A gem to document and distribute frontend components for GOV.UK applications
https://components.publishing.service.gov.uk
MIT License
66 stars 20 forks source link

Search component on blue background focus state #1259

Closed injms closed 1 year ago

injms commented 4 years ago

The focus state for the search input when used on a blue background looks like this when focused:

image

Should a black border be added to make this more consistent with other search boxes and text inputs?

image

Other search component variants focus state:

image

Text input focus state:

image

NickColley commented 4 years ago

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.

injms commented 4 years ago

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.

NickColley commented 4 years ago

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.

kr8n3r commented 4 years ago

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

hannalaakso commented 1 year ago

@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 🙏

monicacrusellasfanlo commented 1 year ago

@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.

patrickpatrickpatrick commented 1 year ago

This has been fixed by https://github.com/alphagov/govuk_publishing_components/pull/3599