[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:  afercia
     Type:  defect (bug)             |      Status:  assigned
 Priority:  normal                   |   Milestone:  6.0
Component:  Quick/Bulk Edit          |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  has-screenshots title-   |     Focuses:  ui, accessibility,
  attribute has-patch needs-testing  |  javascript
-------------------------------------+-------------------------------------
Changes (by afercia):

 * keywords:  has-screenshots title-attribute needs-patch => has-screenshots
     title-attribute has-patch needs-testing
 * owner:  (none) => afercia
 * milestone:  Future Release => 6.0


Comment:

 Looking back at this ticket, the list of posts to be bulk-edited is still
 not operable with a keyboard. This needs to be fixed.

 The two remaining points that still need to be solved are:
 1. Initial focus when opening Bulk Edit.
 2. Escaping of emojis and special characters in the post title.

 In [attachment:"35483.2.diff"]
 - Both Bulk Edit and Quick Edit are now wrapped within a new `<div>`
 element with class `inline-edit-wrapper`.
 - This new `<div>` element:
   - Has a `role="region"` attribute.
   - It's labelled with and `aria-labelledby` attribute that points to the
 visible first fieldset legend e.g. 'BULK EDIT'.
   - Thanks to these two attributes, it becomes an ARIA landmark, which is
 an added bonus as landmarks can be easily found by assistive technology
 users.
 - Initial focus for Bulk Edit:
   - As pointed out in the previous comments, there's no clear 'default
 action' where to move focus to.
   - Therefore, the new patch sets initial focus on the ARIA region that
 wraps Bulk Edit.
   - When the ARIA region receives focus, screen readers will announce the
 region role and label.
   - The ARIA region will also show a clear focus style.
 - Initial focus for Quick Edit:
   - No change: the post title field will receive initial focus.
   - I'd recommend to consider to set initial focus to the ARIA region also
 in this case, for consistency.
 - Escaping of emojis and special characters:
   - The remove buttons don't use an `aria-label` attribute any longer so
 there's no need to escape the post title for use in a HTML attribute.
   - Instead, the buttons now use visually hidden text: this is content, no
 different from the visible post title, and can contain emojis and special
 characters.


 Some code review and testing would be greatly appreciated.

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