WordPress.org

Make WordPress Core

Opened 4 months ago

Last modified 3 months ago

#43412 new defect (bug)

Comments: row action links and forms accessibility improvements

Reported by: afercia Owned by:
Milestone: 5.0 Priority: normal
Severity: normal Version:
Component: Comments Keywords: semantic-buttons has-patch has-screenshots
Focuses: accessibility, javascript Cc:

Description

In the Comments screen, all the "row action" links behave differently depending if JavaScript support is on or off. The Reply and Quick Edit links are special cases, and #43376 is going to take care of them.

For all the other row action links except "Edit":

  • when JavaScript is off, they behave like real links
  • when JavaScript is on, they don't trigger navigation but they "do something" so for better semantics and accessibility they should have a role="button".

Basically, all the following links:

Approve / Unapprove | Spam | Trash 
Not Spam | Delete Permanently
Spam | Restore | Delete Permanently

should use the CSS class .aria-button-if-js so the related jQuery function in common.js adds the button role.

Additionally, in the Reply and Quick Edit forms the links "Cancel" and "Submit" (actually this link has different text depending on what it does) should be real buttons.

Lastly, in the edit post screen, in the Comments metabox, the "Add Comment" link should be a button:

https://cldup.com/Cx48FB3L0r.png

Attachments (1)

43412.diff (13.9 KB) - added by afercia 3 months ago.

Download all attachments as: .zip

Change History (5)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 months ago

#2 @afercia
4 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.0

#3 @afercia
3 months ago

Note: the above should be applied also to the similar links in the "Recent Comments" Dashboard widget.

@afercia
3 months ago

#4 @afercia
3 months ago

  • Keywords semantic-buttons has-patch has-screenshots added; needs-patch removed

43412.diff is a first pass for better link / buttons semantics. Some testing would be nice :)

  • check in the comments lists pages and in the dashboard, all the UI controls work as expected
  • check using a screen reader all UI controls that "do something" are announced as buttons, and UI controls that navigate to a page are announced as links.

Additionally, to start implementing the "proximity of controls" principle (see #40822) and to introduce consistency, the patch aligns the Reply and Quick edit forms buttons on the left. Screenshots:

before:

https://cldup.com/9vOa-gSotk.png

after:

https://cldup.com/KymCNBNbsL.png

Note: the same change applies to the Quick Edit form and the Reply form in the Dashboard.

Note: See TracTickets for help on using tickets.