Opened 10 months ago
Last modified 7 days ago
#43412 new defect (bug)
Comments: row action links and forms accessibility improvements
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | 5.0.3 | Priority: | normal |
| Severity: | normal | Version: | |
| Component: | Comments | Keywords: | semantic-buttons has-screenshots needs-refresh has-patch |
| 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:
Attachments (1)
Change History (12)
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
10 months ago
#4
@
9 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:
after:
Note: the same change applies to the Quick Edit form and the Reply form in the Dashboard.
#5
@
3 months ago
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.
To give more visibility to the "proximity of controls" issue, I'd be in favor of splitting this part in a separate ticket.



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