WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#34255 closed defect (bug) (fixed)

Edit permalink accessibility improvements

Reported by: afercia Owned by: SergeyBiryukov
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.3
Component: Permalinks Keywords: has-patch has-screenshots commit
Focuses: ui, accessibility, administration Cc:

Description

After recent changes to the sample permalink displayed below the Post title, see #18306 and #33495, it would be great to introduce some accessibility improvements. Most noticeably, the "Cancel" link should be a button and the "Edit" button should probably have an aria-label attribute to better describe its purpose for assistive technologies users.
Also, I've noticed some JavaScript related things that could be improved a bit.
Screenshot for reference:

https://cldup.com/aLNaIGLwnV.png

Attachments (2)

34255.patch (4.8 KB) - added by afercia 5 years ago.
34255.2.patch (4.8 KB) - added by afercia 5 years ago.

Download all attachments as: .zip

Change History (7)

@afercia
5 years ago

#1 @afercia
5 years ago

  • Keywords has-patch added

First pass:

  • the "Cancel" link should be a button, see #26504
  • add an aria-label attribute to the Edit button to better describe its purpose
  • add wp.a11y.speak message to confirm saving
  • JS: buttons with a type="button" attribute don't have a default action to prevent
  • JS: the keypress event doesn't work with the Escape key in all browsers (using Chrome, pressing Escape when the input field is focused doesn't close it)
  • JS: use jQuery normalized which for key codes
  • JS: use e.preventDefault(); when pressing Enter on the input field instead of return false
  • JS: no need for return false when pressing Escape
  • JS: delegate a click event on #titlediv instead of #edit-slug-box to prevent screen readers announcing "clickable Permalink"

#2 @DrewAPicture
5 years ago

  • Keywords needs-screenshots added

#3 @afercia
5 years ago

Forgot to say there are no visual changes :) Edit: except for the Cancel button see the button-link class and #34242

Quick reference for the keypress event:
https://api.jquery.com/keypress/

...similar to the keydown event, except that modifier and non-printing keys such as Shift, Esc, and delete trigger keydown events but not keypress events. Other differences between the two events may arise depending on platform and browser.

Based on some quick testing, seems to me latest Firefox and IE 8 do trigger the keypress event when pressing Escape, latest Chrome doesn't. Can't test in modern IE and Safari.

Last edited 5 years ago by afercia (previous) (diff)

@afercia
5 years ago

#4 @afercia
5 years ago

  • Keywords has-screenshots commit added; needs-screenshots removed

Refreshed patch, fixed a typo. Screenshot before and after:

https://cldup.com/HjtEdcedZB.png

There's a small difference when hovering the "Cancel" button but that should be handled with the .button-link CSS class which is under review in #34242.

#5 @SergeyBiryukov
5 years ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 35229:

Sample permalink: Improve accessibility of changing the permalink on Edit Post screen.

Props afercia.
Fixes #34255.

Note: See TracTickets for help on using tickets.