[wp-trac] [WordPress Trac] #27555: Make tag post meta box more accessible

[WordPress Trac]

#27555: Make tag post meta box more accessible
------------------------------+----------------------------
 Reporter:  joedolson         |       Owner:  joedolson
     Type:  defect (bug)      |      Status:  accepted
 Priority:  normal            |   Milestone:  4.7
Component:  Editor            |     Version:  3.0
 Severity:  normal            |  Resolution:
 Keywords:  has-patch commit  |     Focuses:  accessibility
------------------------------+----------------------------

Comment (by afercia):

 Refreshed patch after [38797].

 Replying to [comment:27 azaozz]:
 > Yes, 27555.3.diff needs a (small) refresh after [38797], sorry. Also,
 keep in mind that everything that's needed for the Tags metaboxes is also
 probably needed for Quick/Bulk Edit :)
 No problem :) Yep, I've considered what happens on Quick/Bulk Edit and the
 interaction is a bit different since the tags are "selected" but not
 actually "added" until the form is submitted. Also, tags removal is a
 manual process. So I'd say it's fine to have just the `Term selected.`
 feedback message there.
 Instead, on the Tags meta box there are specific controls and actions to
 add/remove (even though one could argue that terms are actually added just
 when the post is saved). Thus, these actions need some additional
 feedback.

 Patch looks good to me, would appreciate a code review. Any feedback's
 welcome. Trying to recap what the patch does:

 - changes the "X" remove tag links in buttons
 - uses the circular focus style on the buttons
 - adds a screen reader text "Remove item:" + tagname
 - uses `wp.a11y.speak()` to give screen reader users feedback when
 adding/removing tags
 - makes the `tagcloud-link` toggle a button, with an `aria-expanded`
 attribute to indicate the tag cloud collapsed/expanded state
 - changes colors for the autocomplete highlighted option in order to have
 a sufficient contrast ratio, doesn't touch the `wplink` colors (will open
 a separate ticket)
 - reduces the font size for the autocomplete on Press This, it was a bit
 too large (see screenshot)
 - removes CSS related to the old `suggest.js` (.ac_results) from Press
 This but keeps it in core for backwards compatibility

 Highlighted option accessible colors and X button circular focus:

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

 Font size in Press This was a bit too large:

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

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