Fix search component label background #1983
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
andysellick
force-pushed
the
fix-search-label
branch
from
8ca689c to
23b5d34
Compare
andysellick
changed the title
injms
approved these changes
Mar 18, 2021
andysellick
force-pushed
the
fix-search-label
branch
from
23b5d34 to
904a094
Compare
alex-ju
added a commit
that referenced
this pull request
Mar 19, 2021
* Add GOVUK Frontend Details module to GOVUK Modules and amend `modules.js` start function ([PR #1985](#1985)) * Rescope Brexit CTA to en/cy locale only ([PR #1984](#1984)) * Add JavaScript tests for accordion component ([PR #1977](#1977)) * Fix search component label background ([PR #1983](#1983)) * Allow emergency banner and global bar in public layout component ([PR #1978](#1915))
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
Change the search component's label so that it looks less broken. This is surprisingly complex. There are several variants to consider:
For each variant of the component, we have to consider the following conditions.
The linearized state was highlighted in a past accessibility audit as not being displayed properly. A fix was applied. To see this page state, choose
Linearize Pagein the miscellaneous tab of web developer toolbar.Why
Fixes #1824
Visual Changes
This change fixes the appearance of the component when JS is disabled on a blue background. It shouldn't change the behaviour of anything else. Note that if JS is enabled and the page is linearized, it still looks broken as reported in #1824 but I don't think there's anything that can be done about that - there's no way to detect if a user has enabled this feature.