[wp-trac] [WordPress Trac] #44714: Title should toggle to Show details to Hide details as per the event fired

[WordPress Trac]

#44714: Title should toggle to Show details to Hide details as per the event fired
-------------------------------------+-------------------------------------
 Reporter:  krupajnanda              |       Owner:  (none)
     Type:  defect (bug)             |      Status:  new
 Priority:  normal                   |   Milestone:  4.9.9
Component:  Upgrade/Install          |     Version:
 Severity:  minor                    |  Resolution:
 Keywords:  ux-feedback has-         |     Focuses:  ui, accessibility,
  screenshots has-patch needs-       |  javascript
  refresh                            |
-------------------------------------+-------------------------------------
Changes (by afercia):

 * keywords:  ux-feedback has-screenshots has-patch => ux-feedback has-
     screenshots has-patch needs-refresh


Comment:

 Screenshot for reference:

 [[Image(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}"

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/44714#comment:5>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform