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

[Cheffheid]

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.

[Cheffheid]

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

[Cheffheid]

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.

[Cheffheid]

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.

[afercia]

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]

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:

[afercia]

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

[Cheffheid]

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.

[afercia]

Thanks @Cheffheid !

[afercia]

40453.3.diff​ slightly simplifies the HTML.

[afercia]

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.

[afercia]

In 40648:

Add missing semicolons after [40646].

See #40453.