[wp-trac] [WordPress Trac] #35374: Remove title attributes and other improvements for the Menus screen

[WordPress Trac]

#35374: Remove title attributes and other improvements for the Menus screen
-------------------------------------------+-----------------
 Reporter:  afercia                        |      Owner:
     Type:  defect (bug)                   |     Status:  new
 Priority:  normal                         |  Milestone:  4.5
Component:  Menus                          |    Version:  4.4
 Severity:  normal                         |   Keywords:
  Focuses:  ui, accessibility, javascript  |
-------------------------------------------+-----------------
 On the Menus screen, some input fields have title attributes that are then
 used via JavaScript as visible placeholders, changing on the fly their
 `value` attribute.

 The menu name and "Quick Search" fields:

 [[Image(https://cldup.com/QaLnoB5Ye7.png)]]

 Please notice that since focus is automatically moved to these fields,
 it's almost useless to have a "placeholder" that gets removed on focus.

 I'd say that visually, there's no need for these title
 attributes/placeholders because the fields purpose is clear enough from
 the context. The menu name, when creating a new menu, has also a
 description below that further clarifies:

 [[Image(https://cldup.com/I5r9SBfphN.png)]]

 The "Quick Search" fields just need a label (hidden with screen-reader-
 text). Also, users already clicked on the "Search" tab so it's clear what
 the input field purpose is.

 About the custom link fields:

 [[Image(https://cldup.com/FX4g8KNmpg.png)]]

 I'd say they're clear enough and there's no need for the "Menu Item"
 title/placeholder.

 Finally, the menu items in a menu have title attributes that get updated
 when users reorder the items:

 [[Image(https://cldup.com/THKJtmm_Wk.png)]]

 I'd propose to replace them with `aria-label` attributes. Sighted users
 can actually see the items new position. Screen reader users will benefit
 from the aria labels announcing the new position.

 This would also allow to completely remove
 `wpNavMenu.setupInputWithDefaultTitle()` and there's room for further
 improvements:
 - add missing labels and improve the existing ones
 - target the "Create new menu" field description with an `aria-
 describedby` attribute
 - the "custom links" labels and inputs should be updated also in the
 Customizer, solving also a CSS alignment issue
 - introduce a generic, reusable, `.wp-initial-focus` CSS class to be used
 for the sole purpose of setting the initial focus
 - "Quick Search": uniform the attached events, see
 [ticket:26600#comment:59 comment 59 on ticket 26600]
 - "Quick Search": avoid new AJAX requests to be triggered when the key
 pressed (e.g.arrows) doesn't change the searched term

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