[wp-trac] [WordPress Trac] #56789: Toolbar: screen-reader-shortcut does not have background color until focused

[WordPress Trac]

#56789: Toolbar: screen-reader-shortcut does not have background color until
focused
-------------------------------------------------+-------------------------
 Reporter:  sabernhardt                          |       Owner:  joedolson
     Type:  defect (bug)                         |      Status:  accepted
 Priority:  normal                               |   Milestone:  6.2
Component:  Toolbar                              |     Version:
 Severity:  trivial                              |  Resolution:
 Keywords:  has-patch needs-testing has-         |     Focuses:
  screenshots has-testing-info                   |  accessibility, css
-------------------------------------------------+-------------------------
Changes (by sabernhardt):

 * keywords:  has-patch needs-testing has-screenshots needs-testing-info =>
     has-patch needs-testing has-screenshots has-testing-info


Comment:

 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 [https://wave.webaim.org/extension/ 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/56789#comment:13>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform