Make WordPress Core

Opened 13 months ago

Closed 11 months ago

Last modified 11 months ago

#56942 closed defect (bug) (fixed)

Insufficient color contrast - inactive cancel action for bulk select in nav-menu.php

Reported by: kebbet's profile kebbet Owned by: audrasjb's profile audrasjb
Milestone: 6.2 Priority: normal
Severity: normal Version: 5.8
Component: Menus Keywords: has-screenshots has-patch
Focuses: accessibility, css Cc:

Description

The ”Remove Seltected Items” has too low color contrast. Link/action should be darker.

Now 2.33 with #a7aaad on white.

Introduced in [51006].

Attachments (4)

nav-menu-contrast.png (35.4 KB) - added by kebbet 13 months ago.
nav-menu-contrast-after.png (41.4 KB) - added by kebbet 13 months ago.
After linked PR is applied.
cd285efe86aeb37b0f70d6cd9f2ee0bf.gif (322.0 KB) - added by audrasjb 11 months ago.
Before patch
4ac79cc75db915f659a0ca040437a8d4.gif (487.7 KB) - added by audrasjb 11 months ago.
After patch

Download all attachments as: .zip

Change History (17)

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


13 months ago
#1

  • Keywords has-patch added; needs-patch removed

#2 @kebbet
13 months ago

  • Keywords needs-patch added; has-patch removed

With linked PR, color contrast is 5.53.
New color is #646970.

#3 @kebbet
13 months ago

  • Keywords has-patch added; needs-patch removed

@kebbet
13 months ago

After linked PR is applied.

#4 @kebbet
13 months ago

  • Version set to 5.8

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


13 months ago

#6 @SergeyBiryukov
13 months ago

  • Milestone changed from Awaiting Review to 6.2

#7 follow-up: @joedolson
13 months ago

In the accessibility bug scrub, we discussed this issue, and it's a bit more complicated than it first appears.

In this state, the 'Remove Selected Items' is a disabled control, and needs to look inactive, so that users know that it's not something they can interact with. This is also an exemption for color contrast, since an inactive control, in theory, is not necessary for interaction.

It may be preferable to have the Remove Selected Items control not be visible at all when it isn't available; it's unclear that there's any benefit to being able to interact or perceive a control when it would not do anything.

#8 in reply to: ↑ 7 @kebbet
13 months ago

Replying to joedolson:

In the accessibility bug scrub, we discussed this issue, and it's a bit more complicated than it first appears.

In this state, the 'Remove Selected Items' is a disabled control, and needs to look inactive, so that users know that it's not something they can interact with. This is also an exemption for color contrast, since an inactive control, in theory, is not necessary for interaction.

It may be preferable to have the Remove Selected Items control not be visible at all when it isn't available; it's unclear that there's any benefit to being able to interact or perceive a control when it would not do anything.

Thank you for reviewing!

That makes sense, to not display the button at all. What is the preferred way to not display it? Adding display:none; to the disabled class, or is there a better solution used in core elsewhere?

#9 @audrasjb
11 months ago

  • Keywords changes-requested added
  • Owner set to audrasjb
  • Status changed from new to reviewing

Hiding the button with display: none would make sense to me, as this would remove the element visually, and also make it non focusable with assistive technology.

#10 @kebbet
11 months ago

  • Keywords changes-requested removed

PR updated. (+ a small whitespace fix just above the css section relevant for the fix).

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


11 months ago

#12 @audrasjb
11 months ago

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

In 55109:

Menus: Hide the "Remove selected item" from Menus screen when no item is selected.

This changeset removes the "Remove selected item" from the classic Navigation Menus screen when no item is selected, and makes it non focusable from assistive technologies.

Plus, this changeset fixes a small unrelated coding standard issue in nav-menus.css.

Props kebbet, joedolson, audrasjb.
Fixes #56942.

Note: See TracTickets for help on using tickets.