[wp-trac] [WordPress Trac] #33902: Accessible Tags auto-complete

[WordPress Trac]

#33902: Accessible Tags auto-complete
-------------------------------------------+-----------------------------
 Reporter:  afercia                        |      Owner:
     Type:  defect (bug)                   |     Status:  new
 Priority:  normal                         |  Milestone:  Awaiting Review
Component:  Administration                 |    Version:  4.3
 Severity:  normal                         |   Keywords:
  Focuses:  ui, accessibility, javascript  |
-------------------------------------------+-----------------------------
 In a couple of places in the admin, `jquery.suggest` displays a drop-down
 with suggested tags as you type. This little script shows its age but it
 still works pretty good. When used with a keyboard though, there are a
 some usability issues (see also #32580) and, most of all, the suggestions
 list is not accessible. There's room for improvements :)

 This script has been patched for WordPress in the past, I guess it's not
 officially maintained anymore and it's possible to further patch it for
 our needs. Things to take care of:
 - when there are saved tags (see the Quick Edit form), tabbing away from
 the textarea will reveal the suggestions list (see screenshot 1)
 - related to above, the interval to hide suggestions on blur is always 200
 ms but the delay to display the suggestions is configurable via settings,
 we should clear the latter on blur
 - the script assumes the initial input field value length is 0 (it assumes
 to find an empty field) but this may not be true when there are already
 saved tags (i.e. in the Quick Edit form)
 - in the Quick Edit form, pressing Escape when in the textarea should
 close the suggest tooltip but closes the whole Quick Edit
 - finally, I'd propose to use the proper ARIA roles and properties to make
 it a fully accessible ARIA widget, the most known examples are Twitter and
 Gmail search suggestions

 Suggestions shown when tabbing away:

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

 In the two screenshots below, see how the light yellow background to
 highlight the "focused" suggestion is barely noticeable. Also, screen
 readers can't read out the suggestions list content (this actually is the
 same thing that happens in the current implementation of Select2, version
 4).

 The current suggestions list in the Tags postbox:

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

 The current suggestions list in the Quick Edit form:

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

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