WordPress.org

Make WordPress Core

Opened 14 months ago

Last modified 12 months ago

#44714 new defect (bug)

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

Reported by: krupajnanda Owned by:
Milestone: Future Release Priority: normal
Severity: minor Version:
Component: Upgrade/Install Keywords: ux-feedback has-screenshots has-patch needs-refresh
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 (2)

toggle event issue.webm (611.1 KB) - added by krupajnanda 14 months ago.
Please check this visual for detail.
44714.diff (975 bytes) - added by subrataemfluence 14 months ago.
Proposed patch

Download all attachments as: .zip

Change History (9)

@krupajnanda
14 months ago

Please check this visual for detail.

#1 @swissspidy
14 months ago

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

@subrataemfluence
14 months ago

Proposed patch

#2 @subrataemfluence
14 months ago

  • Keywords has-patch added; needs-patch removed

#3 follow-up: @audrasjb
12 months 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
12 months 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
12 months 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.


12 months ago

#7 @pento
12 months ago

  • Milestone changed from 4.9.9 to Future Release
Note: See TracTickets for help on using tickets.