search

bbc / simorgh

The BBC's Open Source Web Application. Contributions welcome! Used on some of our biggest websites, e.g.
https://www.bbc.com/thai
Other
1.28k stars 211 forks source link

WSTEAM1-1084: Uploader - High Contrast Mode #11716

Closed Isabella-Mitchell closed 1 month ago

Isabella-Mitchell commented 1 month ago

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

Before-on-latest

After - buttons have outlines

choose-a-file-button cross-outline

Contrast stroke on cross in hover state (using HIGH_CONTRAST media query)

cross-outline-hover

Bug Fix - Checkbox

Before - This checkbox is ticked. The masked image tick is not visible at all

masked-image-not-rendering

After - Reverted changes made in https://github.com/bbc/simorgh/pull/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.

can-just-about-see-background-image

Testing

  1. Visit Storybook link on Windows High Contrast mode. (Also see screengrabs above)

  2. Check the X should be distinguishable.

  3. Check the Upload button should be distinguishable as a button.

  4. Visit Storybook link without high contrast mode

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