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

[kebbet]

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

Now 2.33 with #a7aaad on white.

Introduced in [51006].

https://core.trac.wordpress.org/ticket/56942

[kebbet]

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

[kebbet]

After linked PR is applied.

[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.

[kebbet]

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?

[audrasjb]

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.

[kebbet]

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

[audrasjb]

Before patch

[audrasjb]

After patch

[audrasjb]

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.

Committed in https://core.trac.wordpress.org/changeset/55109