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

[garrett-eclipse]

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

[garrett-eclipse]

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]

Suggested verbiage 'Show passed tests'

[garrett-eclipse]

Suggested verbiage 'Hide passed tests'

[Clorith]

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

[garrett-eclipse]

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

[Clorith]

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]

Passed Tests closed

[garrett-eclipse]

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

[garrett-eclipse]

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

[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.

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 .

[garrett-eclipse]

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.

[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.

[garrett-eclipse]

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

[garrett-eclipse]

Closed 'Passed tests' w/ Chevron

[garrett-eclipse]

Open 'Passed tests' w/ Chevron

[garrett-eclipse]

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.

[afercia]

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

[garrett-eclipse]

Updated patch to introduce some left padding for balance

[garrett-eclipse]

More balanced button

[garrett-eclipse]

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

[melchoyce]

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

[melchoyce]

Note about chevron color in #46934.

[afercia]

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.

[melchoyce]

In 45202:

Administration: Update chevron color in Site Health.

Props afercia.
Fixes #46934. See #46730.