WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 11 months ago

Last modified 3 months ago

#38677 closed enhancement (fixed)

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

Reported by: Cheffheid Owned by: afercia
Milestone: 5.1 Priority: normal
Severity: normal Version:
Component: Administration Keywords: semantic-buttons has-patch
Focuses: ui, accessibility, javascript Cc:

Description

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

Related: #26504, #35126

Attachments (3)

38677.patch (1.1 KB) - added by Cheffheid 2 years ago.
Markup/JS update only.
38677.1.patch (2.1 KB) - added by Cheffheid 2 years ago.
Markup/JS update and supporting styles
38677.diff (2.4 KB) - added by afercia 11 months ago.

Download all attachments as: .zip

Change History (20)

@Cheffheid
2 years ago

Markup/JS update only.

@Cheffheid
2 years ago

Markup/JS update and supporting styles

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


2 years ago

#2 @afercia
2 years ago

  • Milestone changed from Awaiting Review to Future Release
  • Version trunk deleted

#3 @afercia
2 years ago

  • Keywords semantic-buttons added

#4 @Cheffheid
22 months ago

  • Keywords has-patch added

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.

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


11 months ago

#6 @SergeyBiryukov
11 months ago

  • Milestone changed from Future Release to 5.0

#7 @audrasjb
11 months ago

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

#8 @audrasjb
11 months ago

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

#9 @audrasjb
11 months ago

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

#10 @afercia
11 months ago

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 :)

#11 @audrasjb
11 months ago

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.

@afercia
11 months ago

#13 @afercia
11 months ago

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

#14 @afercia
11 months ago

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

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.

#15 @afercia
11 months ago

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.

#16 @afercia
11 months ago

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.

#17 @pento
3 months ago

  • Milestone changed from 5.0 to 5.1
Note: See TracTickets for help on using tickets.