WSTEAM1-1084: Uploader - High Contrast Mode #11716
Merged
+13
−16
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
Isabella-Mitchell
changed the title
Isabella-Mitchell
changed the title
emilysaffron
approved these changes
Jun 12, 2024
amoore108
approved these changes
Jun 12, 2024
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.
Resolves JIRA https://jira.dev.bbc.co.uk/browse/WSTEAM1-1084
Overall changes
Adds transparent borders to File Upload and Remove File buttons
Adds stroke to X on high contrast mode only in hover/ focus states
Also reverts checkbox tick from mask image back to background image so that it can be seen on Windows High Contrast Mode
Code changes
File Uploader
Before
After - buttons have outlines
Contrast stroke on cross in hover state (using HIGH_CONTRAST media query)
Bug Fix - Checkbox
Before - This checkbox is ticked. The masked image tick is not visible at all
After - Reverted changes made in #11663 so that the tick shows on Windows High Contrast Mode. (I think when we tested this we only did it on Firefox high contrast mode and not Edge/ Windows High Contrast Mode). The tick is black so it's hard to see but at least it is visible.
Testing
Visit Storybook link on Windows High Contrast mode. (Also see screengrabs above)
Check the X should be distinguishable.
Check the Upload button should be distinguishable as a button.
Visit Storybook link without high contrast mode
Check that when you hover over the X button a stroke does not appear.
Helpful Links
Add Links to useful resources related to this PR if applicable.
Coding Standards
Repository use guidelines