Make WordPress Core

Opened 6 years ago

Closed 9 months ago

Last modified 9 months ago

#44714 closed defect (bug) (fixed)

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

Reported by: krupajnanda's profile krupajnanda Owned by: joedolson's profile joedolson
Milestone: 6.3 Priority: normal
Severity: minor Version:
Component: Upgrade/Install Keywords: has-screenshots has-patch
Focuses: ui, accessibility, javascript Cc:

Description

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.

Attachments (5)

toggle event issue.webm (611.1 KB) - added by krupajnanda 6 years ago.
Please check this visual for detail.
44714.diff (975 bytes) - added by subrataemfluence 6 years ago.
Proposed patch
44714.2.diff (2.2 KB) - added by joedolson 9 months ago.
Updated patch: text change, icons
updater-collapsed.jpg (23.9 KB) - added by joedolson 9 months ago.
updater-expanded.jpg (44.7 KB) - added by joedolson 9 months ago.

Download all attachments as: .zip

Change History (25)

@krupajnanda
6 years ago

Please check this visual for detail.

#1 @swissspidy
6 years ago

  • Component changed from Text Changes to Upgrade/Install
  • Focuses accessibility added
  • Version 4.9.8 deleted

@subrataemfluence
6 years ago

Proposed patch

#2 @subrataemfluence
6 years ago

  • Keywords has-patch added; needs-patch removed

#3 follow-up: @audrasjb
6 years ago

  • Milestone changed from Awaiting Review to 4.9.9

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

#4 in reply to: ↑ 3 @subrataemfluence
6 years ago

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

#5 @afercia
5 years ago

  • Keywords needs-refresh added

Screenshot for reference:

http://cldup.com/RPqM7xXtLx.png

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}"

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


5 years ago

#7 @pento
5 years ago

  • Milestone changed from 4.9.9 to Future Release

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


4 years ago

#9 @nrqsnchz
4 years ago

  • Keywords ux-feedback removed

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 ▾ ").

#10 @krupajnanda
4 years ago

Hi @nrqsnchz,

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

Regards,
Krupa

#11 @joedolson
11 months ago

  • Milestone changed from Future Release to 6.3
  • Owner set to joedolson
  • Status changed from new to accepted

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


9 months ago

This ticket was mentioned in Slack in #core-upgrade-install by costdev. View the logs.


9 months ago

#14 @costdev
9 months ago

  • Keywords changes-requested added; needs-refresh removed

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.

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


9 months ago

@joedolson
9 months ago

Updated patch: text change, icons

#16 @joedolson
9 months ago

  • Keywords changes-requested removed

#17 @joedolson
9 months ago

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

This ticket was mentioned in PR #4694 on WordPress/wordpress-develop by @joedolson.


9 months ago
#18

Add icon to toggle & change text

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

#19 @joedolson
9 months ago

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

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.

@joedolson commented on PR #4694:


9 months ago
#20

Fixed in r56027

Note: See TracTickets for help on using tickets.