Toolbar: screen-reader-shortcut does not have background color until focused

[sabernhardt]

The WAVE extension reports low color contrast for the "Log Out" screen-reader-shortcut because it has the admin's blue link color without setting the lighter background in all states. Then the :focus state properly sets both the text and background color.

Since the link is off-screen until it receives focus, the low contrast theoretically is not a problem. But setting both colors on #wpadminbar .screen-reader-shortcut could be better.

[sabernhardt]

Log Out link in focus state

[sabernhardt]

adding both text and background color to shortcut link

[sabernhardt]

including common.css for the other admin shortcut links

[afercia]

This isn't a real problem for users, as when the element is visible the contrast is OK. WAVE reports a false positive because it isn't aware the element is positioned off screen and thus isn't actually visible.

Note that all automated accessibility checkers often report false positives related to contrast as in some cases they can't understand what the actual background color is (think for example at an element with no explicit background color set).

That said, it would be cleaner to change on focus only the CSS properties that bring the element into view, if that doesn't break anything.

[sabernhardt]

moving some CSS properties from :focus state to unfocused link selector

[sabernhardt]

Unfortunately, moving everything but the top property to the unfocused selector could break a little. 56789.reorganizing.patch​ attempts to move most, with a few duplicated properties.

The :focus style needs to override these properties for admin (back-end) pages:

a:focus {
  color: #043959;
  box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79, 148, 212, 0.8);
  outline: 1px solid transparent;
}

The toolbar link also would need to override these (and possibly other styles from themes) on the front end:

#wpadminbar a:focus {
  box-shadow: none;
}
#wpadminbar a:hover {
  background: none;
}

[joedolson]

If we really want to wipe out false positives, I feel like we should ensure that .screen-reader-text strings all have good contrast. I agree with @afercia that this is not really important, *except* in that we will save ourselves time if we're able to remove some false positives.

Do you plan on addressing these front-end cases, @sabernhardt?

[sabernhardt]

The comment about the front end attempted to explain the reorganizing option, but even the second patch could be excessive. The admin link colors have enough contrast against the light gray background in all of the standard color schemes (the link is #2271b1 in Default, #3858e9 in Modern, and #0073aa in the other seven). If WAVE ever reported an error within the admin, I do not remember how I found it.

Testing 56789.patch:

1. Install the ​WAVE extension in your browser.
2. Log in to your WordPress site.
3. Choose a theme with a light background color and a dark text color for links. Without editing theme settings, any of the bundled themes should work.
4. Before applying the patch, visit the home page of your site. (If you do not have the admin toolbar on the front end, go to your profile to check the "Show Toolbar when viewing site" option, save changes and return to the home page.)
5. Activate the WAVE extension on this page.
6. Switch to the Contrast tab and toggle the Styles off. You may have more than one contrast error, but a "Log Out" link is probably either the first or second. If the text is too hard to read, highlighting it might help.
7. Apply the patch and refresh the page.
8. Activate the WAVE extension on the same page to verify that the Log Out link does not appear among color contrast errors.
9. Change the theme to one with a dark background color and a light link color. If using Twenty Eleven or Twenty Twenty-One, you could switch to the dark color scheme or "dark mode" in the Customizer.
10. Activate the WAVE extension on the home page again to verify that the Log Out link does not appear among color contrast errors.

[robinwpdeveloper]

Test Report

This report validates that the indicated patch addresses the issue.
Patch tested: 2 patches together.

• https://core.trac.wordpress.org/attachment/ticket/56789/56789.1.patch
• https://core.trac.wordpress.org/attachment/ticket/56789/56789.reorganizing.patch

Environment

• OS: macOS 11.2.3
• Web Server: Nginx
• PHP: 7.4.30
• WordPress: 6.2-alpha-54642-src
• Browser: Chrome 109.0.5414.119
• Theme: Twenty Twenty-One

• Active Plugins:
  • No Plugins activated

Actual Results

• ✅ Issue reproduced with Twenty Twenty-Three and Twenty Twenty-One
• ✅ Issue fixed in normal mode
• ✅ Issue fixed in dark mode ( Twenty Twenty-One ).

Additional Notes

• Twenty Eleven doesn't have any error related to Log out.

Supplemental Artifacts

After applying patch:
Twenty Twenty-Three - ​https://d.pr/i/yvbxws
Twenty Twenty-One (dark mode) - ​https://d.pr/i/f93pki

[re_enter_rupok]

Test Report

This report validates that the indicated patch addresses the issue.
Patch tested:

• https://core.trac.wordpress.org/attachment/ticket/56789/56789.1.patch
• https://core.trac.wordpress.org/attachment/ticket/56789/56789.reorganizing.patch

Environment

• OS: macOS 13.1
• Web Server: Nginx
• PHP: 7.4.30
• WordPress: 6.2-alpha-54642-src
• Browser: Chrome Version 109.0.5414.119
• Theme: Twenty Twenty-One, Twenty Twenty-Three

• Active Plugins:
  • No Plugins activated

Actual Results

• ✅ Issue resolved with the patch.
• ✅ Issue found fixed in Twenty Twenty-One (Light mode)
• ✅ No issue found in Twenty Twenty-One (Dark mode)
• ✅ Issue found fixed in Twenty Twenty-Three

Supplemental Artifacts

Theme - Twenty Twenty-One (Mode: Normal/Light)

Before: ​https://d.pr/i/BeiIHo

After: ​https://d.pr/i/jCnT1a

Theme - Twenty Twenty-One (Mode: Dark)

No issue found in the dark mode - ​https://d.pr/i/d2ujB3

Theme - Twenty Twenty-Three

Before: ​https://d.pr/i/MpWJLC

After: ​https://d.pr/i/aDnCdD

[joedolson]

Adds comments explaining CSS changes.

Test reorganization of CSS for 56789.

Trac ticket: https://core.trac.wordpress.org/ticket/56789

[joedolson]

In 55307:

Toolbar: Prevent false positive on automated contrast testing.

The non-focused state of the .screen-reader-shortcut element in the admin bar fails contrast tests. This has no real-world consequences, but raises false positives in some automated testing tools. This fix is largely so people using automated testing will not raise false positives.

Props sabernhardt, afercia, robinwpdeveloper, re_enter_rupok.
Fixes #56789.

Fixed in r55307