Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#50516 closed defect (bug) (fixed)

Use ARIA button class on plugin and theme auto-updates action links

Reported by: audrasjb's profile audrasjb Owned by: whyisjake's profile whyisjake
Milestone: 5.5 Priority: normal
Severity: normal Version: 5.5
Component: Upgrade/Install Keywords: has-patch commit
Focuses: accessibility Cc:

Description

This ticket is a follow-up to #50512 which raises 4 independent issues related to plugin and theme auto-updates feature.

Props should go to @ryokuhi who summarized the issue.


Currently, Enable / Disable controls are links. According to the accessibility coding standards (see the third row in the table):

  • the control should be a link when JavaScript is not available and a button the rest of the time.

According to the current implementation, instead:

  • when JavaScript is off, the links work because they have a working href attribute;
  • when JavaScript is on, the links behave like buttons, but they’re still perceived as links.

A partial solution would be to add the CSS class aria-button-if-js, that adds a role=button for these cases; this doesn't make the link-as-button work through spacebar as expected, though.

Attachments (2)

50516.diff (2.0 KB) - added by audrasjb 4 years ago.
Partially fixes the issue by adding aria-button-if-js class to action links
50516.2.diff (9.1 KB) - added by afercia 4 years ago.

Download all attachments as: .zip

Change History (11)

@audrasjb
4 years ago

Partially fixes the issue by adding aria-button-if-js class to action links

#1 @audrasjb
4 years ago

  • Keywords has-patch added; needs-patch removed

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


4 years ago

#3 @afercia
4 years ago

  • Version set to trunk

#4 @afercia
4 years ago

  • Keywords needs-refresh added

@afercia
4 years ago

#5 @afercia
4 years ago

  • Keywords commit added; needs-refresh removed

50516.2.diff makes all the auto-updates toggle controls be perceived and behave like buttons. Also:

  1. wp_theme_auto_update_setting_template() is only used for the tmpl-theme-single JS template. This means that with JS off, this template won't be rendered. All the links with a href attribute for no-JS support used here are a bit pointless. These can be button elements.
  2. Adds keyup and keydown events to make these controls behave like buttons: activated when the Spacebar is released and preventing the page from scrolling when the Spacebar is pressed.
  3. Avoids to update the href attribute when the controls are buttons (which don't have a href).
  4. Avods to target elements based on their type: since the markup may change at any time, it's better to not use element selectors.
  5. Changes a speak message from "Enable auto-updates" to "Auto-updates enabled".
  6. Removes the polite argument from the wp.a11y.speak() calls, as polite is the default value .
  7. Minor CSS improvements.
  8. Minor JS coding standards.

Some testing would be nice :)

#6 @whyisjake
4 years ago

  • Owner set to whyisjake
  • Status changed from new to accepted

Love the spacebar controls.

#7 @whyisjake
4 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 48418:

Upgrade/Install: Use ARIA button class on plugin and theme auto-updates action links

According to the [accesability guidelines](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/#semantics-for-controls), the control should be a link when JavaScript is not available and a button the rest of the time.

In addition, handlers were added for spacebar usage, and some changes to the a11y speak verbiage.

Fixes #50516.
Props ryokuhi, audrasjb, afercia, whyisjake/

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


4 years ago

#9 @SergeyBiryukov
4 years ago

In 48428:

Themes: Correct closing tag for the "Enable auto-updates" button in the JS template for theme auto-update setting.

Follow-up to [48418].

See #50516.

Note: See TracTickets for help on using tickets.