WordPress.org

Make WordPress Core

Opened 19 months ago

Closed 19 months ago

Last modified 16 months ago

#46730 closed defect (bug) (fixed)

Site Health: Introduce up/down chevrons for the Passed tests button to indicate it's current state.

Reported by: garrett-eclipse Owned by: afercia
Milestone: 5.2 Priority: normal
Severity: normal Version: 5.2
Component: Site Health Keywords: site-health has-patch
Focuses: ui, accessibility Cc:

Description

Hello,

With the new Site Health feature I wanted to suggest the verbiage on the 'Passed tests' button be updated to give it context to the user as to the action it will do. Using 'Show/Hide' it indicates it's going to display below and isn't a link to a new page/screen.

All the best

Attachments (10)

Screen Shot 2019-03-30 at 12.33.13 AM.png (9.6 KB) - added by garrett-eclipse 19 months ago.
Passed tests button, this is actually when it's expanded so the user isn't sure it it is also meant to close
Screen Shot 2019-03-30 at 12.34.27 AM.png (11.2 KB) - added by garrett-eclipse 19 months ago.
Suggested verbiage 'Show passed tests'
Screen Shot 2019-03-30 at 12.34.44 AM.png (10.1 KB) - added by garrett-eclipse 19 months ago.
Suggested verbiage 'Hide passed tests'
Screen Shot 2019-04-05 at 4.45.11 PM.png (111.1 KB) - added by garrett-eclipse 19 months ago.
Passed Tests closed
Screen Shot 2019-04-05 at 4.45.19 PM.png (111.5 KB) - added by garrett-eclipse 19 months ago.
Expanded 'Passed tests' w/ no indication except the button is focused
46730.diff (1.4 KB) - added by garrett-eclipse 19 months ago.
Introduce the Chevron .icon to the 'Passed tests' button
Screen Shot 2019-04-14 at 8.58.34 PM.png (107.8 KB) - added by garrett-eclipse 19 months ago.
Closed 'Passed tests' w/ Chevron
Screen Shot 2019-04-14 at 8.58.43 PM.png (153.2 KB) - added by garrett-eclipse 19 months ago.
Open 'Passed tests' w/ Chevron
46730.2.diff (1.4 KB) - added by garrett-eclipse 19 months ago.
Updated patch to introduce some left padding for balance
Screen Shot 2019-04-15 at 10.14.34 AM.png (8.4 KB) - added by garrett-eclipse 19 months ago.
More balanced button

Download all attachments as: .zip

Change History (28)

@garrett-eclipse
19 months ago

Passed tests button, this is actually when it's expanded so the user isn't sure it it is also meant to close

@garrett-eclipse
19 months ago

Suggested verbiage 'Show passed tests'

@garrett-eclipse
19 months ago

Suggested verbiage 'Hide passed tests'

#1 @Clorith
19 months ago

  • Keywords site-health added
  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

This was originally planned to be the approach we took, but was amended to the way you see it now to fit with other similar actions in core, and for a better experience for accessibility reasons.

See #46663

#2 @garrett-eclipse
19 months ago

  • Milestone set to Awaiting Review
  • Resolution wontfix deleted
  • Status changed from closed to reopened
  • Summary changed from Site Health: Update verbiage on 'Passed tests' button to provide context, 'Show passed tests' / 'Hide passed tests' to Site Health: Introduce up/down chevrons for the Passed tests button to indicate it's current state.

Thanks @Clorith I read through @afercia 's note and understand changing the label or button itself isn't accessible due to loss of focus, etc.

But am re-opening to suggest introducing up/down chevrons instead similar to what's found on all the accordions. Not changing the buttons visual state can also be misleading especially if one steps away from their computer and returns to forget what state they were in.

All the best

#3 @Clorith
19 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from reopened to closed

No other toggles in core use chevrons for their toggle buttons, although we are doing a drastic re-imagining of the admin-ui here, I don't see any visually pleasing aspect to this, it's very obvious looking at the page that things are expanded though (and screenreaders have the expanded state to go by), so I would consider this a non-issue at this time.

I think we'll go with what we have, and if we see any problems with this post-release, we can iterate on it at that time.

@garrett-eclipse
19 months ago

Expanded 'Passed tests' w/ no indication except the button is focused

#4 @garrett-eclipse
19 months ago

  • Focuses accessibility added
  • Milestone set to Awaiting Review
  • Resolution wontfix deleted
  • Status changed from closed to reopened

Hi @Clorith thanks for the feedback, sadly I beg to differ. This is a visual accessibility issue especially on laptops as there's no visual indication that anything occurred once the Passed Tests are expanded. See screenshots from a smaller laptop.

In this scenario there's no indication that an action occurred or that the list is now displayed below the fold. And once you change focus the blue focus border goes away leaving you thinking the button is broken.

If we're not going to add any cognitive indication that something occurred I would suggest we abandon the hiding of the section entirely.

Thanks

#5 follow-up: @xkon
19 months ago

Hm, checking this on a smaller screen I do see the point that @garrett-eclipse is making. Apart from the scrollbar height ( which is easily missed ) there's no other change to indicate that something extra popped up underneath.

On the other hand while testing this on various screen sizes ( at least on what I have + browser tools ) I didn't find a case that I couldn't see the passed content as well when clicking the button as I had already scrolled to the end of the page, so that itself was the indicator.

Maybe this is a rare case of scroll/screen size/count of current issues that could trigger the same situation.

Personally I wouldn't mind as well not having to click on an extra button to see the passed tests. I know it's meant to keep the screen distraction-free so we can focus on the issues at hand, but those tests are either way already at the end of the list so it doesn't make any major difference to me. Also sometimes I catch myself "needing" to push the Passed Tests buttons as I have to confirm that the test actually went there instead of just vanishing from the list, if that makes sense :D .

#6 in reply to: ↑ 5 @garrett-eclipse
19 months ago

Thanks @xkon, a few more thoughts below;

Replying to xkon:

Hm, checking this on a smaller screen I do see the point that @garrett-eclipse is making. Apart from the scrollbar height ( which is easily missed ) there's no other change to indicate that something extra popped up underneath.

On the other hand while testing this on various screen sizes ( at least on what I have + browser tools ) I didn't find a case that I couldn't see the passed content as well when clicking the button as I had already scrolled to the end of the page, so that itself was the indicator.

Maybe this is a rare case of scroll/screen size/count of current issues that could trigger the same situation.

Although currently the issue is presented on small screens once additional test are added moving the button down further it'll become an issue on larger and larger devices depending on the amount of issues. And in some cases no more tests are needed to produce this the site just needs to fail more tests to have more items in the top two lists.

Personally I wouldn't mind as well not having to click on an extra button to see the passed tests. I know it's meant to keep the screen distraction-free so we can focus on the issues at hand, but those tests are either way already at the end of the list so it doesn't make any major difference to me. Also sometimes I catch myself "needing" to push the Passed Tests buttons as I have to confirm that the test actually went there instead of just vanishing from the list, if that makes sense :D .

I like this idea, there's no reason to hide those tests, it just adds another click, would be nice to just display them at the bottom.

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


19 months ago

#8 follow-up: @afercia
19 months ago

  • Milestone changed from Awaiting Review to Future Release

A chevron icon as visual indicator makes sense! Moving to future release, patch welcome! :) I guess it can be included in 5.2 if a patch comes to life in the next 1 - 2 days.

@garrett-eclipse
19 months ago

Introduce the Chevron .icon to the 'Passed tests' button

@garrett-eclipse
19 months ago

Closed 'Passed tests' w/ Chevron

@garrett-eclipse
19 months ago

Open 'Passed tests' w/ Chevron

#9 in reply to: ↑ 8 @garrett-eclipse
19 months ago

  • Keywords has-patch needs-testing added

Replying to afercia:

A chevron icon as visual indicator makes sense! Moving to future release, patch welcome! :) I guess it can be included in 5.2 if a patch comes to life in the next 1 - 2 days.

Hi @afercia srry it's day 3 ;) hope it's not too late to be reviewed.

I uploaded 46730.diff to re-use the chevron from the accordions into the 'Passed tests' button. Screens attached.

#10 @afercia
19 months ago

Thanks @garrett-eclipse. /Cc @Clorith any objections? Maybe I'd consider to increase a bit the left padding to balance the spacing. For example:

http://cldup.com/eQ5hygPbG3.png

@garrett-eclipse
19 months ago

Updated patch to introduce some left padding for balance

#11 @garrett-eclipse
19 months ago

Thanks @afercia good call, I've refreshed the patch (46730.2.diff) to introduce some left padding for balance. See screen.

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


19 months ago

#13 @melchoyce
19 months ago

I think the chevron definitely helps clarify what the button does, let's go with it.

#14 @melchoyce
19 months ago

Note about chevron color in #46934.

#15 @afercia
19 months ago

  • Keywords needs-testing removed
  • Milestone changed from Future Release to 5.2

#16 @afercia
19 months ago

  • Owner set to afercia
  • Resolution set to fixed
  • Status changed from reopened to closed

In 45201:

Administration: Add a chevron icon to the Site Health "Passed tests" button.

The chevron icon helps clarify what the button does.

Props garrett-eclipse, Clorith, xkon, melchoyce.
Fixes #46730.

#17 @melchoyce
19 months ago

In 45202:

Administration: Update chevron color in Site Health.

Props afercia.
Fixes #46934. See #46730.

#18 @spacedmonkey
16 months ago

  • Component changed from Administration to Site Health
Note: See TracTickets for help on using tickets.