WordPress.org

Make WordPress Core

Opened 2 months ago

Closed 6 weeks ago

Last modified 6 weeks ago

#40453 closed enhancement (fixed)

Semantic elements for non-link links: class-bulk-upgrader-skin.php

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

Description

When bulk upgrading themes or plugins, the "Show Details" link for each successful update simply toggle a block of text and should be changed to a button.

Related: #26504.

Attachments (4)

40453.patch (1.8 KB) - added by Cheffheid 2 months ago.
Change the "Show Details" anchor tag to a button.
40453.diff (2.7 KB) - added by afercia 7 weeks ago.
40453.2.diff (3.7 KB) - added by afercia 7 weeks ago.
40453.3.diff (3.7 KB) - added by afercia 6 weeks ago.

Download all attachments as: .zip

Change History (18)

@Cheffheid
2 months ago

Change the "Show Details" anchor tag to a button.

#1 @Cheffheid
2 months ago

  • Keywords has-patch semantic-buttons added

It could probably use some additional love to also reveal the state (aria-expanded?) and perhaps a way to direct screen readers to the actual details block when it's visible.

I don't think that should be part of the scope of this ticket though, but rather should be its own enhancement ticket.

Last edited 2 months ago by Cheffheid (previous) (diff)

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


2 months ago

#3 @rianrietveld
2 months ago

  • Milestone changed from Awaiting Review to 4.8

#4 @Cheffheid
2 months ago

For the sake of clarity, this is about the dealy in the GIF below. On /wp-admin/update-core.php when you update multiple themes/plugins at once.

https://i.imgur.com/K2nSusF.gif

#5 @afercia
7 weeks ago

It could probably use some additional love to also reveal the state (aria-expanded?) and perhaps a way to direct screen readers to the actual details block when it's visible.

Yep, not so ideal that the revealed div is before the link/button. But there's a technical reason for that, difficult to address.

@afercia
7 weeks ago

#6 @afercia
7 weeks ago

  • Keywords has-screenshots added
  • Owner set to Cheffheid
  • Status changed from new to assigned
  • Version trunk deleted

Refreshed patch removes some inline JavaScript, adds aria-expanded, move the progress div under the notice when the button gets clicked. @Cheffheid and everyone, some testing would be nice :)

Testing with Safari+VoiceOver:

https://cldup.com/Bs37mqUq2g.png

@afercia
7 weeks ago

#7 @afercia
7 weeks ago

Refreshed patch adds some comments. Also, introduces a js- prefix for CSS classes meant to be exclusively used for JS targeting, see #40686.

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


7 weeks ago

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


6 weeks ago

#10 @Cheffheid
6 weeks ago

I like it, moving it below with JS is pretty clever :thumbsup:

Seems to work pretty well in IE11, Edge, and Firefox with NVDA - which announces the same as VoiceOver (just in a different order) in all three browsers.

http://i.imgur.com/iPqo5lz.png

#11 @afercia
6 weeks ago

  • Keywords commit added

Thanks @Cheffheid !

@afercia
6 weeks ago

#12 @afercia
6 weeks ago

40453.3.diff slightly simplifies the HTML.

#13 @afercia
6 weeks ago

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

In 40646:

Accessibility: Change the "Show details" links in the update core screen to buttons.

These controls toggle the visibility of the update progress: they perform an action
therefore they should be buttons. Also:

  • uses aria-expanded to communicate the toggle button state
  • removes some inline JavaScript
  • when clicking the toggle buttons, the progress details get moved with JavaScript after the button: this helps users of assistive technologies in finding them and makes the UI a bit more intuitive

Props Cheffheid, afercia.
See #26504.
Fixes #40453.

#14 @afercia
6 weeks ago

In 40648:

Add missing semicolons after [40646].

See #40453.

Note: See TracTickets for help on using tickets.