Ensure visual start/stop cues are visible to keyboard-only users

[SiobhyB]

Related to 6658-gh-Automattic/dotcom-forge

Proposed Changes

At the moment, there are some visual cues when users hover over the start/stop buttons to indicate what the buttons do when they're clicked. These cues aren't visible to keyboard-only users, hover. With this PR, the cues are now visible to keyboard-only users.

Recording:

tabbing.mov

Testing Instructions

• Tab through the Studio app using your keyboard.
• For sites that aren't running:
  • Tab over the dark circle in the sidebar and verify the circle turns into a green triangle, indicating that the site's server will be started when clicked.
• For sites that are running:
  • Tab over the green circle in the sidebar and verify the circle turns into a red square, indicating that the site will be stopped when clicked.
  • Tab over the "Running" button in the upper right of the select site's window. Verify that it turns into a "Stop" button to indicate the site will be stopped when clicked.

Note

An aria-label has been added to the "Stop" button to ensure there is no confusion for screen-reader users. For users who rely on screen readers, this text will state that the site is running and the button is for use to stop the site.

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[derekblank]

LGTM! 🚀 I was able to verify that the change works as expected:

For non-running sites, I was able to tab onto a site start button in the sidebar, and start the site both by clicking on the button and by pressing spacebar.

For currently running sites, I was able to tab through sites in the sidebar as above, and also tab onto the Running button and stop it using click/spacebar.

[dcalhoun]

@SiobhyB I believe that a11y labels and a11y in general is more of an art than a strict ruleset, so there is definitely no definitely "right" or "wrong" for this. However, I wanted to share my prior thoughts that using the term "click" in button feels a bit redundant and that we might improvement this specific button by inserting the site's name as additional label context.

I'd love to hear your perspective on my thoughts and what you believe is most helpful for users for this button. Thanks! 🙇🏻

[SiobhyB]

@dcalhoun, thank you for sharing your point of view! I agree that this is subjective and there is likely not a strict right or wrong approach. I think your argument for simplicity and removing redundancy is valid.

After considering both options, I still have a slight personal preference for the clear and direct "click" instruction in this instance. I feel that the button serves two purposes: 1. To indicate that the site is running. 2. To provide a way to stop the site, if users want to. I believe the current text does a good job of meeting both those purposes in a way that is helpful and clear.

That said, I'd definitely be open to this being changed if you feel strongly and would be happy to review alternatives!