Title should toggle to Show details to Hide details as per the event fired

[krupajnanda]

On upload-core.php page --> While theme and/or plugin is being updated, information title should be toggled to Hide details when user clicked on Show details

Please check this attachment.

[krupajnanda]

Please check this visual for detail.

[subrataemfluence]

Proposed patch

[audrasjb]

Hi, thanks for the ticket.

I tested the patch and it looks good to me.

Per today's accessibility team meeting, let's move it to 4.9.9 milestone in order to see if it can land in the next minor.

Cheers,

Jb

[subrataemfluence]

Thanks @audrasjb for testing the patch :)

Replying to audrasjb:

Hi, thanks for the ticket.

I tested the patch and it looks good to me.

Per today's accessibility team meeting, let's move it to 4.9.9 milestone in order to see if it can land in the next minor.

Cheers,

Jb

[afercia]

Screenshot for reference:

Generally, I wouldn't recommend to dynamically change the accessible name of a control, whether it's a button text, aria-label, a link text, etc. The name of an UI control shouldn't change.

Scenario:

• a blind screen reader user navigates the content and learns there's a "Show details" button
• the user activates the button and explores the content underneath
• then the user wants to collapse the details and will look for a "Show details" button, either by navigating backwards or by other means (e.g. screen readers can list all the controls in a page)
• however, there's no control named "Show details" any longer, because the name has changed
• the user will have to figure out what happened and guess that's really the button he/she was looking for

While that's not an impossible task, changing the name will certainly make it harder.

Additionally: this button uses an aria-expanded attribute to communicate the collapsed / expanded state of the content it toggles. aria-expanded is automatically announced by screen readers and gives an important feedback to users. Changing the text of the button would make the perceived information a bit confusing. Screen readers will read out:

• "Show details {collapsed}"
• "Hide details {expanded}"

Worth also considering the potential confusion for many other users, for example users with cognitive impairments, non tech-savvy users, etc.

Visually, I'm not sure what's the value added by changing the button text. It's pretty clear the button toggles the content. Instead, what is missing is a visual representation of the collapsed / expanded state. Not sure this visual representation of the state is really necessary in this specific case, but in several other places in the WordPress admin a down / up arrow icon is used for this purpose.

From an UI perspective, one more source of confusion is that this control is a button but looks like a link. Alas, this happens in many other places in the admin. As a user, I would be in doubt: as it looks like a link, does this mean it navigates to another page? Ideally, buttons should look like buttons. This is part of a broader issue though and it would need some design feedback.

To recap: I'd rather consider to not use the word "Show" to start with. Worth noting also the word "toggle" shouldn't be used, as it's very hard to translate in many languages, see #34753. I'd recommend to simplify and just not use "Show". A simpler wording like "More details" or even just "Details" could work. Optionally, worth considering using a down / up arrow. Visually and semantically this would be perceived as something like:

• "More details {down arrow} {collapsed}"
• "More details {up arrow} {expanded}"

[nrqsnchz]

We discussed this ticket during Design triage today (​https://wordpress.slack.com/archives/C02S78ZAL/p1585586048070600).

We agree with the suggestion of changing the label ("More details") and adding an up/down arrow to the toggle (" More details ▾ ").

[krupajnanda]

Hi @nrqsnchz,

Thank you for considering this suggestion! Collapse up and down arrow button will be better and more thoughtful.

Regards,
Krupa

[costdev]

This was reviewed during the recent component triage session. Replacing the needs-refresh keyword with changes-requested as the patch still applies cleanly against trunk.

[joedolson]

Updated patch: text change, icons

[joedolson]

While this still has the link design, the addition of the arrow icon helps provide visual affordance that this is a button.

Add icon to toggle & change text

Trac ticket: https://core.trac.wordpress.org/ticket/44714

[joedolson]

In 56027:

Upgrade/Install: Update 'show details' button change.

Add a up/down arrow for visual affordance about the purpose of the button link; change button text from "Show details" to "More details".

Props krupajnanda, subrataemfluence, audrasjb, afercia, nrqsnchz, joedolson.
Fixes #44714.

Fixed in r56027