search

WordPress / wporg-mu-plugins

Development of the Global Header and other mu-plugins used on WordPress.org.
62 stars 29 forks source link

Incorrect color of header and footer navigation links #213

Closed adamwoodnz closed 2 years ago

adamwoodnz commented 2 years ago

The navigation links in the header for wordpress.org and make.wordpress.org should be white and instead are displaying as #21759b. This is resulting in a very poor accessibility color contrast rating.

image

Color contrast score: https://coolors.co/contrast-checker/0072a9-23282d Screen Shot 2022-07-07 at 10 01 10 AM

iandunn commented 2 years ago

I'm seeing it after a hard refresh. I'm guessing this is another case where something in the latest Gutenberg plugin changed, and either:

  1. exposed an instance of us doing something wrong; or
  2. broke back-compat

That's been an ongoing problem since we launched the header/footer.

It looks like the problem is that wp-block-navigation-item__label is inheriting color from https://s.w.org/wp-content/themes/pub/wporg-main/css/style.css?ver=1653615553 line 690. It doesn't happen on /news, since that site doesn't load the wporg-main theme. I'm guessing that before Gutenberg 13.6.0 there was some style that applied the color: white, but now that's gone, or is different.

A good quick fix might be just adding something like this to global-header-footer/postcss/header/menu.pcss:

.wp-block-group.global-header .global-header__navigation .wp-block-navigation__container .wp-block-navigation-item a {
  color: var(--wp--preset--color--white);
}

Once production looks good, we can dig deeper into the problem and look into a more "correct" fix.

adamwoodnz commented 2 years ago

Yep I've discovered Gutenberg 13.6.0 removed

.wp-block-navigation .wp-block-navigation-item__content {
    color: inherit;
}

I'll make the quick fix, thanks

adamwoodnz commented 2 years ago

Reopened as this affects the footer links as well