[wp-trac] [WordPress Trac] #40677: Widgets page is not accessible for keyboard users

[WordPress Trac]

#40677: Widgets page is not accessible for keyboard users
-------------------------------------+-------------------------------------
 Reporter:  juliemoynat              |       Owner:  afercia
     Type:  defect (bug)             |      Status:  assigned
 Priority:  normal                   |   Milestone:  5.0
Component:  Widgets                  |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch has-           |     Focuses:  accessibility,
  screenshots                        |  javascript
-------------------------------------+-------------------------------------
Changes (by afercia):

 * keywords:  needs-patch good-first-bug => has-patch has-screenshots
 * focuses:  accessibility => accessibility, javascript


Comment:

 I've split the issues this ticket aims to solve in 2 separate patches.

 == Keyboard accessibility
 [attachment:40677.diff] makes the left part of the Widgets screen (the
 "Available Widgets") operable with a keyboard, manages focus when
 appropriate, adds label and feedback for screen reader users, improves
 color contrast. I'm not saying this will make this screen fully accessible
 but it's an improvement. Looks good to me and it's contained in the
 `admin-widgets` JS which doesn't touch the Customizer. I think it's ready
 for review and commit. Screenshot:

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

 == Headings
 [attachment:40677-headings.diff] it's just a proof of concept, please do
 not merge. Adding a new heading on the right, for example "Available
 Sidebars", would be trivial:

 [[Image(https://cldup.com/9uqmLitQ-4.png)]]

 However, all the headings below should be bumped up by one level. It's
 possible to do that in a slightly hacky way, which doesn't make me so
 happy. However, things get even more hacky because when adding a widget,
 or dragging a widget from the left column to the right one and vice-versa,
 then the widget heading should be changed on the fly, for example from a
 h3 to a h4 or vice-versa, in order to preserve a correct headings
 hierarchy. [attachment:40677-headings.diff] experiments this approach but
 I think it's extremely fragile, and I'm really not sure it should be done.
 Better ideas welcome.

 Off the top of my head, an alternative solution could be keeping the
 current headings unchanged and just prepend to the sidebar names some
 visually hidden text, for example:

 {{{
 <span class="screen-reader-text">Available sidebar: </span>Blog Sidebar
 <span class="screen-reader-text">Available sidebar: </span>Footer 1
 <span class="screen-reader-text">Available sidebar: </span>Footer 2
 }}}

 == Last point
 A couple fixes have already been implemented in previous WordPress
 releases. There's one thing left to do from the original points described
 in the ticket:
 > Widgets in areas can't be deactivated with keyboard because we need to
 drag them back. (Add a link "Deactivate" next to the "Delete" one.)

 I'd recommend to split this in a separate ticket as I think it should be
 discussed with the Customizer and Design teams.

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