ProgressBar: use text color to ensure enough contrast against background #55285

ciampo · 2023-10-11T20:45:48Z

What?

As discussed in #54202 (comment) and following comments, this PR tweaks the colors used for the ProgressBar component (both track and indicator) to be based on the text color.

Why?

Using the text color should ensure that the progress bar always has enough contrast when rendered against the background color.

How?

Using the --wp-components-color-foreground variable for the text color
Using the color-mix() CSS function to tweak the text color's opacity
Adding styles for high contrast mode (as mentioned in Site Editor: Canvas loader is not easily visible #54202 (comment))

Testing Instructions

In Storybook:

open the ProgressBar story
Check that the progress bar is using the current text color and looks good
Using the tools in Storybook's top toolbar, change the Theme and observe how ProgressBar changes its color based on the theme
Using browser web tool, simulate a high contrast mode (this can be done in Chrome by simulating the forced-colors: active mode)

In the side editor:

load the site editor, make sure that the progress bar is always well visible
in the global styles, tweak the background color
reload the site editor: the background color of the loading screen should follow the background color chosen in the previous step. The progress bar should still have enough contrast

Screenshots or screencast

Storybook:

progress-bar-storybook.mp4

Site editor:

progress-bar-site-editor.mp4

tyxla

Looks and works great 🚀

I only have a question regarding the fallback track/indicator colors.

Thanks for addressing it @ciampo!

tyxla · 2023-10-11T21:27:15Z

packages/components/src/progress-bar/styles.ts

+	/* Text color at 90% opacity */
+	background-color: color-mix(
+		in srgb,
+		var( --wp-components-color-foreground, ${ COLORS.gray[ 900 ] } ),


Do we mean to default both indicator and track color to the same shade of gray? I'd expect the track and indicator fallback colors to be different from each other.

This PR is implementing this suggestion from Joen. I think that it makes sense to use the same shade of gray and play with opacity, because it ensures high contrast against the background.

andrewserong

Nice solution @ciampo! This is testing great for me, too, and seems to play nicely with lots of different light and dark combinations:

LGTM! ✨

andrewserong · 2023-10-12T22:46:50Z

Just adding the backport to WP Beta/RC label since the issue in #54202 was flagged for 6.4, so it might be worth seeing if this fix can land for 6.4, too 🙂

Edit: I've also swapped out the Enhancement label for Bug as this PR resolves a visibility bug for the progress bar in 6.4. Feel free to change the labels around if folks would prefer!

t-hamano · 2023-10-13T11:23:41Z

Sorry for being late in checking. Just wanted to report that the progress bar is now displayed very clearly even in Windows high contrast mode 🙌

a59fc11730438aa212dc31ad256653d6.mp4

mtias · 2023-10-13T12:15:51Z

Thanks for taking care of this one and improving it without losing the original spirit.

…und (#55285) * Use text color at different opacities for track and indicator * Add high contrast mode styles * CHANGELOG # Conflicts: # packages/components/CHANGELOG.md

mikachan · 2023-10-13T13:41:32Z

I just cherry-picked this PR to the 6.4-rc1-2 branch to get it included in the next release: 13d5b22

* Add selector as id to layout style overrides. (#55291) * Fix flickering when focusing on global style variations (#55267) * ProgressBar: use text color to ensure enough contrast against background (#55285) * Use text color at different opacities for track and indicator * Add high contrast mode styles * CHANGELOG # Conflicts: # packages/components/CHANGELOG.md * Remove empty attrs. (#54496) * Remove empty attrs. * Fix linter errors --------- Co-authored-by: Sarah Norris <[email protected]> * Add IS_GUTENBERG_PLUGIN flag to LastRevision (#55253) * useBlockPreview: Try outputting EditorStyles to ensure local style overrides are rendered (#55288) * useBlockPreview: Try alternative fix for displaying local style overrides * Avoid duplicate styles, fix rendering issues in Safari * Add more explanatory comments * Remove additional check for styles within the block preview, as it is not needed since EditorStyles handles its own style overrides retrieval * Bug: PHP notice when an image with lightbox is deleted (#55370) * Fix PHP notice when an image with lightbox is deleted * Fix PHP notice when an image with lightbox is deleted --------- Co-authored-by: tellthemachines <[email protected]> Co-authored-by: Aki Hamano <[email protected]> Co-authored-by: Marco Ciampini <[email protected]> Co-authored-by: Jonny Harris <[email protected]> Co-authored-by: Andrew Serong <[email protected]> Co-authored-by: Kishan Jasani <[email protected]>

ciampo added 2 commits October 11, 2023 22:27

Use text color at different opacities for track and indicator

47320db

Add high contrast mode styles

e6463e8

ciampo requested a review from ajitbohra as a code owner October 11, 2023 20:45

ciampo requested review from jasmussen, richtabor, tyxla, andrewserong and t-hamano October 11, 2023 20:46

ciampo self-assigned this Oct 11, 2023

ciampo added the [Package] Components /packages/components label Oct 11, 2023

ciampo added the [Type] Enhancement A suggestion for improvement. label Oct 11, 2023

CHANGELOG

7c379dd

ciampo mentioned this pull request Oct 11, 2023

Site Editor: Canvas loader is not easily visible #54202

Closed

tyxla approved these changes Oct 11, 2023

View reviewed changes

andrewserong approved these changes Oct 12, 2023

View reviewed changes

ciampo merged commit 05693fb into trunk Oct 12, 2023
50 checks passed

ciampo deleted the feat/progress-bar-better-contrast branch October 12, 2023 08:01

github-actions bot added this to the Gutenberg 16.9 milestone Oct 12, 2023

andrewserong added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 12, 2023

andrewserong added [Type] Bug An existing feature does not function as intended and removed [Type] Enhancement A suggestion for improvement. labels Oct 12, 2023

richtabor mentioned this pull request Oct 13, 2023

Use admin colors in CanvasLoader ProgressBar #54611

Closed

mikachan removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 13, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ProgressBar: use text color to ensure enough contrast against background #55285

ProgressBar: use text color to ensure enough contrast against background #55285

ciampo commented Oct 11, 2023 •

edited

Loading

tyxla left a comment

tyxla Oct 11, 2023

ciampo Oct 12, 2023

andrewserong left a comment

andrewserong commented Oct 12, 2023 •

edited

Loading

t-hamano commented Oct 13, 2023

mtias commented Oct 13, 2023

mikachan commented Oct 13, 2023

ProgressBar: use text color to ensure enough contrast against background #55285

ProgressBar: use text color to ensure enough contrast against background #55285

Conversation

ciampo commented Oct 11, 2023 • edited Loading

What?

Why?

How?

Testing Instructions

Screenshots or screencast

tyxla left a comment

Choose a reason for hiding this comment

tyxla Oct 11, 2023

Choose a reason for hiding this comment

ciampo Oct 12, 2023

Choose a reason for hiding this comment

andrewserong left a comment

Choose a reason for hiding this comment

andrewserong commented Oct 12, 2023 • edited Loading

t-hamano commented Oct 13, 2023

mtias commented Oct 13, 2023

mikachan commented Oct 13, 2023

ciampo commented Oct 11, 2023 •

edited

Loading

andrewserong commented Oct 12, 2023 •

edited

Loading