[wp-meta] [Making WordPress.org] #4495: Improve accessibility of the Trac ticket Keywords and Focuses

[Making WordPress.org]

#4495: Improve accessibility of the Trac ticket Keywords and Focuses
---------------------------------------+---------------------
 Reporter:  afercia                    |       Owner:  (none)
     Type:  defect                     |      Status:  new
 Priority:  normal                     |   Milestone:
Component:  Trac                       |  Resolution:
 Keywords:  has-screenshots has-patch  |
---------------------------------------+---------------------
Changes (by afercia):

 * keywords:  has-screenshots => has-screenshots has-patch


Comment:

 Trying to recap what [attachment:"4495.diff"] does:

 "Manual" button:
 - changes the link to a button element
 - adds an aria-label "Manual keyword" to clarify its purpose
 - adds an aria-expanded attribute to make screen readers users understand
 something in the page opened
 - styles a bit the button and improves color contrast

 Remove keywords "X" buttons:
 - changes the empty links to buttons with meaningful aria-labels
 - handles focus to avoid focus losses when removing the keywords

 Custom keywords input field:
 - adds an aria-label to label the field
 - handles keyboard interaction when pressing Enter and Escape: both Enter
 and Escape populate the keywords and hide the field
 - attaches the field `change` event on initialization: previously it was
 attached each time the "manual" button was clicked

 Focuses:
 - makes this section look the same on the new ticket and on the ticket
 pages: previously they looked different (see attached screenshots)
 - wraps the buttons in a fieldset element with a legend "Focuses:"
 - makes the buttons real `<button>` elements
 - adds an aria-pressed attribute to communicate the buttons state
 - styles the buttons to improve color contrast and provide better hover /
 focus styles

 General:
 - cleans up a bit the CSS

 Note: I'm assuming there's no need for proper l10n like in core, as Trac
 is always in English.

 /Cc @SergeyBiryukov

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/4495#comment:1>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org