[wp-trac] [WordPress Trac] #48409: Menus: form controls disabled only visually when creating a new menu

[WordPress Trac]

#48409: Menus: form controls disabled only visually when creating a new menu
-------------------------------+-----------------------------
 Reporter:  afercia            |      Owner:  (none)
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  Menus              |    Version:
 Severity:  normal             |   Keywords:  has-screenshots
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------
 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:

 [[Image(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:

 [[Image(http://cldup.com/-jVb1Hhmzo.png)]]

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/48409>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform