Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change the textcolor passed to ContrastChecker #14716

Closed
wants to merge 1 commit into from

Conversation

Jackie6
Copy link
Contributor

@Jackie6 Jackie6 commented Mar 29, 2019

Description

Fix #14687

How has this been tested?

  • Local
  • Browser testing

Types of changes

Change the parameters passed to ContrastChecker so that the contrast warning works correctly. That is only when we see light text on light background or dark text on dark background, the warning will be displayed.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jorgefilipecosta - can you double check the solution proposed?

// This is a feature to improve accessibility.
if ( backgroundColorClass ) {
if ( backgroundColorClass === 'has-white-background-color' ) {
return '#111';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Black is encoded as #000.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, @gziolo Thanks for your comments. I inspect the CSS files.
When I set the background color to primary, secondary, light gray, dark gray, the CSS file is
image
so the color is '#fff' (white)

When I set the background color to white, the CSS file is
image
so the color is '#111' (black)

And you are right, '#000' is also black. But to maintain the consistency, '#111' may be better I think.

@@ -209,7 +223,7 @@ class ParagraphBlock extends Component {
>
<ContrastChecker
{ ...{
textColor: textColor.color,
textColor: this.getDisplayedTextColor( backgroundColor.class, textColor.color ),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Upon inspection of the file, it seems like it might be necessary to provide defaults inside the implementation of withFallbackStyles at the top of the file in place of undefined values.

@gziolo gziolo added [Block] Paragraph Affects the Paragraph Block [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). labels Apr 1, 2019
@jorgefilipecosta
Copy link
Member

Hi @Jackie6, @gziolo the root cause of the bug was that withFallbackStyles never recomputed fall back styles again after all fall back styles were known.
This assumed that fallBack colors of specific block instance (colors set with CSS) never changed during the editor execution. This assumption was wrong.
When we set a background color dark in twenty nineteen the CSS class also sets a text color (the text color attribute is not changed), so in this case setting a background color changes the fallback text color.
I proposed an alternative fix for the original bug in #14963 that allows users of withFallbackStyles to have more control over when the fall back styles should be recomputed again.

@gziolo
Copy link
Member

gziolo commented Apr 15, 2019

I proposed an alternative fix for the original bug in #14963 that allows users of withFallbackStyles to have more control over when the fall back styles should be recomputed again.

Does it mean we should close this PR and help land the alternative fix?

@jorgefilipecosta
Copy link
Member

Does it mean we should close this PR and help land the alternative fix?

I guess that would be the best approach as the solution #14963 is more general while this one more specific to a set of colors used by some themes but may not work in every theme.

@gziolo
Copy link
Member

gziolo commented Apr 17, 2019

@Jackie6 thanks for working on this PR, let's fly with the proposal from @jorgefilipecosta as it looks more complicated than it seemed on the surface.

@gziolo gziolo closed this Apr 17, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Paragraph Affects the Paragraph Block [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Legibility / contrast warning is displayed in wrong situations
3 participants