Semantic elements for non-link links: class-wp-comments-list-table.php

[audrasjb]

The "Quick Edit" links in comment list should be changed to buttons (or ARIA role button).

Related: #38677

[audrasjb]

Version 1: add button aria role to links with "#" anchor.

[audrasjb]

Version 2: Replace link with button HTML element (with button-link class)

[audrasjb]

Hi,

I uploaded two patches:

• Version 1: 43376_aria_role.diff adds role="button" attribute to the links
• Version 2: 43376_button_element.diff replaces a tag with button tag with the button-link class for similar rendering

I only managed links with href="#" attributes. The other links don't need button element because the href is not empty.

Both of the patches are tested and seems good to me.

Cheers, Jb

[afercia]

@audrasjb thanks for the patch. I'd tend to think the version with tbe button is preferable. Please notice the button needs a type="button" attribute and would also benefit from an aria-expanded attribute to communicate to assistive technologies the expanded / collapsed status of the form (actually, more the collapsed status since when it opens, focus is moved and the button disappears). This would bring it in parity with what has been done for the Posts list Quick Edit in #38677 / [42725].

[audrasjb]

Great, thanks. I've seen your final patch for #38677 and I'll send a new patch soon.

[audrasjb]

Version 2 enhancement: adds role and aria-expandedattribute and fires it on click/cancel

[audrasjb]

43376_button_element.2.diff works fine in my local install. I tried to follow the path of #43382 for consistency @afercia.

[audrasjb]

Fix error in previous patch: replaces role with type attribute…

[afercia]

The comments screen works in a slightly different way compared to the Posts and Terms screens. Changing the Quick Edit link to a button will change the Reply link too. That's fine because both work in the same way: they're not available when JavaScript is off and they open their own form. The JavaScript part needs to take into account both cases.

In 43376.diff​ :

• the Reply and Quick Edit links are now buttons
• they have an aria-expanded attribute, dynamically updated based on the form collapsed / expanded state
• when closing the Reply or Quick Edit forms, focus is moved back to the proper button
• I've slightly refactored the JS part to use more meaningful variable names: commentRow and replyRow
• removes e.preventDefault() which is no longer necessary, as the links are not buttons with an attribute type="button", i.e.: there's no default action to prevent

Tested and looks good to me. Some more testing welcome!

[afercia]

Will open a new ticket for further improvements.

[afercia]

See #43412.

[audrasjb]

You won @afercia :P I tested 43376.diff and it looks great to me.

[afercia]

There was already #38676 for the comments screen, not a big deal we can use this new ticket. Props to @Cheffeid for the patch on the old ticket.

[afercia]

#38676 was marked as a duplicate.

[afercia]

In 42767:

Accessibility: Change the comments "Quick Edit" and "Reply" links to buttons.

For better accessibility and semantics, user interface controls that perform an
action should be buttons. Links should exclusively be used for navigation.

Props Cheffeid, audrasjb, afercia.
See #43382, #38677.
Fixes #43376.