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

[Cheffheid]

The "Quick Edit" link should be changed to a button.

Related: #26504, #35126

[Cheffheid]

Markup/JS update only.

[Cheffheid]

Markup/JS update and supporting styles

[Cheffheid]

The Markup/JS patch still applies fine and everything looks good to me for further review.

Same thing applies here as with the comment Quick Edit link, which is that it gets hidden when JavaScript is disabled.

[audrasjb]

Hi @Cheffheid (cc @afercia )

I tested this patch with current core trunk version, and it works as expected.
In my opinion 38677.1.patch is ready to ship.

Now I'll open some clone-tickets for cover the other places we need a quick edit button!

Cheers,
Jb

[audrasjb]

Hmm, I just looked on other places like class-wp-terms-list-table.php. At line 458 (current core dev version), we have a aria-button-if-js class. This class is used by common.js at line 1488 to create add a role="button".

We have to be consistent right now, and make some choices:

• replace button element with aria-button-if-js class in aria-button-if-js class
• remove aria-button-if-js class and add a real button to class-wp-terms-list-table.php

Any thought on this?

Cheers,
Jb

[audrasjb]

And last but not least, class-wp-comments-list-table.php file is also related. This is the same use-case than in this ticket.

If we are all ok to replace each of them with a button HTML element, I think we can go ahead, onboard @Cheffheid 's patch and I'll open two more tickets for the other ones :D

[afercia]

We have to be very careful and distinguish the various cases. Please consider many of these links still work when JavaScript support is off. The aria-button-if-js CSS class with its related JS is meant for this.

When JavaScript support is off:
See for example the links in the Comments screen: Approve, Unapprove, Spam, Trash, "unspam", "untrash", and other ones: they still work and they're real links that trigger navigation (the page reloads). Same happens on other screens. In this case they should be marked up as links.

When JavaScript support is on:
this kind of links now behaves differently: links don't trigger navigation but they "do something" on the page. So when JS is on, they should be exposed to assistive technologies like buttons. In this case, the aria_button_if_js() function targets the links with an aria-button-if-js CSS class and adds the aria role "button".

Links with hide-if-no-js and href="#"
they're visible only when JavaScript is on. They don't have a valid href value, in fact they don't trigger navigation and they "do something". In this case, they should be marked up as buttons. The aria-button-if-js CSS class would actually produce the same result, but it's slightly preferable to mark them up directly as buttons.

@audrasjb as you mentioned, for sure there are some remaining cases to address on other screens, please open separate tickets for each of them :)

[audrasjb]

Thanks for your comment @afercia !

I understand. So I think @Cheffheid 's patch is ok for this ticket.

• I'll open a new ticket for class-wp-comments-list-table.php which can be fixed at the same time this one can get committed.
• class-wp-terms-list-table.php is ok because it has the aria-button-if-js class.

[audrasjb]

Related: #43376

[afercia]

38677.diff​ adds an aria-expanded attribute to communicate to assistive technologies the expanded
/ collapsed status of the Quick Edit form.

[afercia]

In 42725:

Accessibility: Change the posts "Quick Edit" link to a button.

For better accessibility and semantics, user interface controls that perform an
action should be buttons. Links should exclusively be used for navigation. Also,
adds an aria-expanded attribute to the button to communicate to assistive
technologies the expanded / collapsed status of the Quick Edit form.

Props Cheffheid, audrasjb, afercia.
Fixes #38677.

[afercia]

In 42727:

Accessibility: Change the terms "Quick Edit" link to a button.

For better accessibility and semantics, user interface controls that perform an
action should be buttons. Links should exclusively be used for navigation.
See #38677 / [42725].

Fixes #43382.

[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.

[atimmer]

In 45553:

Comments: Open comment quick edit on double click.

In [42767] the quick edit button changed from a link to a button. This caused the jQuery code that selects on a link to no longer work. This commit restores the previous behavior.

Fixes #47572.
See #43382, #38677.