WordPress.org

Making WordPress.org

Opened 4 months ago

Closed 3 months ago

Last modified 3 months ago

#4495 closed defect (fixed)

Improve accessibility of the Trac ticket Keywords and Focuses

Reported by: afercia Owned by: SergeyBiryukov
Milestone: Priority: normal
Component: Trac Keywords: has-screenshots has-patch
Cc:

Description

I'd like to propose a few improvements for the Keywords and Focuses user interface within the ticket properties section. Here's how they currently look like:

http://cldup.com/6p5TmD7gXw.png

Color contrast (personally, I struggle to see the focuses buttons text), and many other things can be improved, for example:

  • the "manual" link is barely visible
  • it can't be operated with a keyboard
  • it should be a button
  • accessibility of the "X" buttons to remove keywords: they're just empty links
  • keyboard interaction with the custom keywords input field can be improved
  • focuses buttons color contrast can be improved
  • focuses buttons should be buttons
  • their "pressed" state should be communicated semantically

Patch incoming. Please consider I don't have a running local environment for testing. I've managed to build a SVN diff and would greatly appreciate some testing. Any feedback is welcome.

Attachments (5)

4495.diff (10.4 KB) - added by afercia 4 months ago.
01 new ticket before.png (96.6 KB) - added by afercia 4 months ago.
New ticket before
02 new ticket after.png (98.0 KB) - added by afercia 4 months ago.
New ticket after
03 ticket before.png (164.0 KB) - added by afercia 4 months ago.
Ticket page before
04 ticket after.png (167.2 KB) - added by afercia 4 months ago.
Ticket page after

Download all attachments as: .zip

Change History (9)

@afercia
4 months ago

#1 @afercia
4 months ago

  • Keywords has-patch added

Trying to recap what 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

@afercia
4 months ago

New ticket before

@afercia
4 months ago

New ticket after

@afercia
4 months ago

Ticket page before

@afercia
4 months ago

Ticket page after

#2 @SergeyBiryukov
4 months ago

  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

#3 @SergeyBiryukov
3 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 8973:

Trac: Improve accessibility of keywords and focuses on Trac ticket pages.

Props afercia.
Fixes #4495.

#4 @SergeyBiryukov
3 months ago

In 8974:

Trac: Bump scripts version after [8973]. See #4495.

Note: See TracTickets for help on using tickets.