[wp-trac] [WordPress Trac] #32721: Customizer Menus: Accessibility: improve markup for the menu items search results list

[WordPress Trac]

#32721: Customizer Menus: Accessibility: improve markup for the menu items search
results list
---------------------------+-----------------
 Reporter:  designsimply   |      Owner:
     Type:  enhancement    |     Status:  new
 Priority:  normal         |  Milestone:
Component:  Customize      |    Version:
 Severity:  normal         |   Keywords:
  Focuses:  accessibility  |
---------------------------+-----------------
 /hat tip @afercia for the original report at
 https://github.com/voldemortensen/menu-customizer/issues/90

 Searching for menu items will present a list of search results (or no
 results). Ideally, since this is a list, should be marked up as a list.
 Currently, each item is a definition list `dl` without a `dd` required
 element that's invalid markup.

 About the "add" control, happy to see it's now a button.

 About the text, I'm not sure "Add Menu Item" is appropriate. We should try
 to consider what will be read out by screen readers together with the
 other text, for example:

 1. When tabbing, only the button will be focused and the text read out
 will be just "Add Menu Item" without any reference to the link[[br]][[br]]
 1. When arrowing, the text read out will be something like:[[br]]`Post
 Hello World button Add Menu Item`[[br]][[br]]Probably, I would consider to
 completely hide from assistive technologies the item title and repeat the
 title in the button itself, something like:[[br]]`Post <span aria-
 hidden="true">Hello World</span> button Add Hello World to the Menu`

 This technique is used in several places in core, for example in the Post
 publish box:

 {{{
 <a href="#edit_timestamp" ... >
 <span aria-hidden="true">Edit</span>
 <span class="screen-reader-text">Edit date and time</span>
 </a>
 }}}

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