Make WordPress Core

Opened 20 months ago

Closed 16 months ago

Last modified 16 months ago

#56789 closed defect (bug) (fixed)

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

Reported by: sabernhardt's profile sabernhardt Owned by: joedolson's profile joedolson
Milestone: 6.2 Priority: normal
Severity: trivial Version:
Component: Toolbar Keywords: has-patch has-screenshots has-testing-info commit
Focuses: accessibility, css Cc:

Description

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.

Attachments (5)

log-out-link-focused.png (3.2 KB) - added by sabernhardt 20 months ago.
Log Out link in focus state
56789.patch (410 bytes) - added by sabernhardt 20 months ago.
adding both text and background color to shortcut link
56789.1.patch (778 bytes) - added by sabernhardt 19 months ago.
including common.css for the other admin shortcut links
56789.reorganizing.patch (1.3 KB) - added by sabernhardt 19 months ago.
moving some CSS properties from :focus state to unfocused link selector
56789.3.patch (3.2 KB) - added by joedolson 16 months ago.
Adds comments explaining CSS changes.

Download all attachments as: .zip

Change History (26)

@sabernhardt
20 months ago

Log Out link in focus state

@sabernhardt
20 months ago

adding both text and background color to shortcut link

@sabernhardt
19 months ago

including common.css for the other admin shortcut links

This ticket was mentioned in Slack in #core-test by ironprogrammer. View the logs.


19 months ago

#2 @cu121
19 months ago

  • Keywords has-patch needs-testing added

#3 @cu121
19 months ago

  • Keywords has-screenshots added

#4 @cu121
19 months ago

  • Keywords needs-testing-info added

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


19 months ago

#6 @sabernhardt
19 months ago

  • Milestone changed from Awaiting Review to 6.2

#7 @afercia
19 months ago

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
19 months ago

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

#8 @sabernhardt
19 months ago

  • Severity changed from minor to trivial

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;
}

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


16 months ago

#10 @joedolson
16 months ago

  • Owner set to joedolson
  • Status changed from new to accepted

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


16 months ago

#12 @joedolson
16 months ago

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?

#13 @sabernhardt
16 months ago

  • Keywords has-testing-info added; needs-testing-info removed

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.

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


16 months ago

#15 @robinwpdeveloper
16 months ago

Test Report

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

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

#16 @re_enter_rupok
16 months ago

Test Report

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

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

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


16 months ago

@joedolson
16 months ago

Adds comments explaining CSS changes.

#18 @joedolson
16 months ago

  • Keywords commit added; needs-testing removed

This ticket was mentioned in PR #4053 on WordPress/wordpress-develop by @joedolson.


16 months ago
#19

Test reorganization of CSS for 56789.

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

#20 @joedolson
16 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

@joedolson commented on PR #4053:


16 months ago
#21

Fixed in r55307

Note: See TracTickets for help on using tickets.