[wp-trac] [WordPress Trac] #35483: Accessibility improvements for the Bulk Edit form

[WordPress Trac]

#35483: Accessibility improvements for the Bulk Edit form
-------------------------------------------+-----------------
 Reporter:  afercia                        |      Owner:
     Type:  defect (bug)                   |     Status:  new
 Priority:  normal                         |  Milestone:  4.5
Component:  Quick/Bulk Edit                |    Version:
 Severity:  normal                         |   Keywords:
  Focuses:  ui, accessibility, javascript  |
-------------------------------------------+-----------------
 Splitting this out from #34756.

 In order to make the Bulk Edit usable with a keyboard, all controls should
 be built with elements that natively support keyboard interaction. The
 delete "X" links should be buttons and the actionable area should be a bit
 bigger, thinking also at the responsive view on smaller screens.

 When opening the form, focus should be moved to the first focusable form
 element:

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

 The list of items should be marked up as a list, so screen readers will
 announce the total number of items selected.

 Title attributes should be removed from the items titles in favor of
 `aria-label` attributes that should contain the item title e.g.:
 {{{
 'Remove %s from Bulk Edit'
 }}}

 Worth noting post titles might contain emojis and special characters that
 should be removed or escaped before being used in a HTML attribute:

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

 When removing items from the list, focus should be moved to the previous
 or next item and when there are no more items, probably to the "Cancel"
 button.

 Adding a `role=form` and an `aria-labelledby` attribute will make screen
 readers announce the "Quick Edit" legend. I'd propose to add a description
 for the tags textarea, for semantics, accessibility, and also for
 consistency with other Tags boxes in the admin.

 Lastly, I'd strongly recommend to make the font-size a bit bigger :)
 Currently, it's set to 12px and for some labels to 11px, I'd say
 definitely too small for today's screens.

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