WordPress.org

Make WordPress Core

Opened 4 weeks ago

Last modified 29 hours ago

#48409 accepted defect (bug)

Menus: form controls disabled only visually when creating a new menu

Reported by: afercia Owned by: audrasjb
Milestone: 5.3.1 Priority: normal
Severity: normal Version:
Component: Menus Keywords: has-screenshots
Focuses: ui, accessibility Cc:
PR Number:

Description

In the menus page, when creating a new menu the boxes on the left column get a opacity: 0.5; CSS property to "look" disabled:

http://cldup.com/rDxRyuxQqt.png

However, they're still fully actionable:

  • accordions, tabs, and all the form controls can be clicked with mouse
  • same with keyboard: everything can be navigated to and activated pressing the Enter or Spacebar keys

It worked this way since ages and it's confusing for all users. Not to mention it's a WCAG violation:

Relevant standards:
WCAG 1.3.3 Sensory Characteristics (Level A)
https://www.w3.org/TR/WCAG21/#sensory-characteristics
https://www.w3.org/WAI/WCAG21/Understanding/sensory-characteristics.html

Basically, the UI visually conveys a state that doesn't match the actual UI controls state.

A similar issue was filed for the Image Editor in the WPCampus audit, see https://github.com/WordPress/gutenberg/issues/15299. Even though the details are different, the outcome is the same.

Considerations:

  • Does the left column content need to be displayed in the first place? It could be hidden with visibility: hidden until the new menu is created.
  • If displaying the left column controls is preferred, all UI controls should be really disabled.
  • Technically, this would be a bit challenging especially for the accordions and the "tabs".
  • All the checkboxes and input fields could use a disabled HTML attribute but it should be set via JavaScript and the implementation looks a bit overkill at a first glance.
  • Overall, I'd personally lean towards using visibility: hidden on the whole left column content.

Additionally, [46240] changed the "Select All" from a link to a checkbox + label.
Previously, when creating a new menu, the link was hidden. Now, only the checkbox is hidden but the label stays visible:

http://cldup.com/-jVb1Hhmzo.png

Attachments (2)

Capture d’écran 2019-11-17 à 11.30.11.png (91.9 KB) - added by audrasjb 29 hours ago.
Hidden visually
fa5a30455ff6da86226d59e66dc0128f.gif (717.9 KB) - added by audrasjb 29 hours ago.
Animation to show the behavior when creating a new menu

Download all attachments as: .zip

Change History (7)

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


10 days ago

#2 @afercia
10 days ago

  • Keywords needs-design-feedback added
  • Milestone changed from Awaiting Review to 5.3.1

#3 @dinhtungdu
10 days ago

This ticket has been discussed during the bug scrub and we agreed to try it for 5.3.1.

The solution using visibility: hidden had received the highest votes and the team wants to ask for a design feedback for it.

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


7 days ago

@audrasjb
29 hours ago

Animation to show the behavior when creating a new menu

#5 @audrasjb
29 hours ago

  • Keywords needs-design-feedback removed
  • Owner set to audrasjb
  • Status changed from new to accepted

Hi,

Removing needs-design-feedback thanks to @dinhtungdu.

I tested visibility: hidden and it looks like a nice compromise to me.
Proposed patch in nav-menus.css:

.metabox-holder-disabled {
	visibility: hidden;
}

We’ll also need remove the old CSS opacities.

Note: See TracTickets for help on using tickets.