WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 18 months ago

Last modified 10 months ago

#38674 closed enhancement (fixed)

Semantic elements for non-link links: update-core.php (show/hide hidden updates)

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

Description

This toggle is a link with simply href="#". Should be a button.

Related: #26504, #35126

Attachments (3)

38674.patch (608 bytes) - added by Cheffheid 3 years ago.
markup update, no style changes
38674.1.patch (1.6 KB) - added by Cheffheid 3 years ago.
Markup update, full styles update
38674.diff (1.8 KB) - added by afercia 18 months ago.

Download all attachments as: .zip

Change History (14)

#1 @Cheffheid
3 years ago

Much like #38671, I'll make two patches. One that relies on .button-link and one that's its own entity with styles included.

@Cheffheid
3 years ago

markup update, no style changes

@Cheffheid
3 years ago

Markup update, full styles update

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


3 years ago

#3 @afercia
3 years ago

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

#4 @afercia
3 years ago

  • Keywords semantic-buttons added

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


18 months ago

#6 @afercia
18 months ago

  • Keywords has-patch added
  • Milestone changed from Future Release to 5.0

#7 @audrasjb
18 months ago

Hi,
Tested on 4.9.4.
The patch looks good to me.

Cheers,
Jb

#8 @afercia
18 months ago

  • Keywords has-screenshots added

For reference, this link-that-should-be-a-button appears only when the site language is other than en-US and there is a core update. At that point, users have the ability to hide updates:

https://cldup.com/zQ-FISuJEC.png

Once updates are hidden, a link to toggle the hidden updates visibility appears: this link should be a button:

https://cldup.com/YCEYr47cXe.png

https://cldup.com/s5j8Z-BKZS.png

@afercia
18 months ago

#9 @afercia
18 months ago

  • Keywords commit added
  • Owner set to afercia
  • Status changed from new to assigned

Looking back at this, I think the link should be a button and also look like a button. There's no reason why it should look like a link, as it just toggles the visibility of the hidden updates container.

38674.diff also adds an aria-expanded attribute, improves the distance between the buttons, and fixes the toggle animation "jump" due to the top margin on the animated div.

Some testing would be nice.

Screenshot:

https://cldup.com/Et-WD-fqb4.png

#10 @afercia
18 months ago

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

In 42785:

Accessibility: Change the "Show / Hide dismissed updates" 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 communicate the expandable panel state
and improves the buttons spacing.

Props Cheffheid, audrasjb, afercia.
Fixes #38674.

#11 @pento
10 months ago

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