WordPress.org

Make WordPress Core

Opened 13 months ago

Closed 13 months ago

Last modified 13 months 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 13 months ago.
Change the "Show Details" anchor tag to a button.
40453.diff (2.7 KB) - added by afercia 13 months ago.
40453.2.diff (3.7 KB) - added by afercia 13 months ago.
40453.3.diff (3.7 KB) - added by afercia 13 months ago.

Download all attachments as: .zip

Change History (18)

@Cheffheid
13 months ago

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

#1 @Cheffheid
13 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 13 months ago by Cheffheid (previous) (diff)

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


13 months ago

#3 @rianrietveld
13 months ago

  • Milestone changed from Awaiting Review to 4.8

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

#6 @afercia
13 months 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
13 months ago

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


13 months ago

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


13 months ago

#10 @Cheffheid
13 months 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
13 months ago

  • Keywords commit added

Thanks @Cheffheid !

@afercia
13 months ago

#12 @afercia
13 months ago

40453.3.diff slightly simplifies the HTML.

#13 @afercia
13 months 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
13 months ago

In 40648:

Add missing semicolons after [40646].

See #40453.

Note: See TracTickets for help on using tickets.