WordPress.org

Make WordPress Core

Opened 19 months ago

Closed 3 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.0 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 19 months ago.
Markup/JS update only.
38677.1.patch (2.1 KB) - added by Cheffheid 19 months ago.
Markup/JS update and supporting styles
38677.diff (2.4 KB) - added by afercia 3 months ago.

Download all attachments as: .zip

Change History (19)

@Cheffheid
19 months ago

Markup/JS update only.

@Cheffheid
19 months ago

Markup/JS update and supporting styles

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


19 months ago

#2 @afercia
19 months ago

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

#3 @afercia
17 months ago

  • Keywords semantic-buttons added

#4 @Cheffheid
13 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.


3 months ago

#6 @SergeyBiryukov
3 months ago

  • Milestone changed from Future Release to 5.0

#7 @audrasjb
3 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
3 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
3 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
3 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
3 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
3 months ago

#13 @afercia
3 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
3 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
3 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
3 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.

Note: See TracTickets for help on using tickets.