Launchpad: Improve focus style for accessibility

[gabrielcaires]

Related to #87469

Proposed Changes

• Improve the focus state to follow accessibility requirements

Customer Home

https://github.com/Automattic/wp-calypso/assets/38718/d2f302e3-2d5c-453f-9d78-8b91ee734240

Tailored Onboarding

https://github.com/Automattic/wp-calypso/assets/38718/00c8af09-cdbb-44c4-a12d-5b68313a5199

Testing Instructions

• Go to the customer's home and use the tab to navigate between the buttons
• Go to any onboarding flow, go to the launchpad page and use the tab to navigate between the buttons

Pre-merge Checklist

• [ ] Has the general commit checklist been followed? (PCYsg-hS-p2)
• [ ] https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md for your changes?
• [ ] Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• [ ] Have you checked for TypeScript, React or other console errors?
• [ ] Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• [ ] Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• [ ] For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions[bot]]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-98104

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-98104&env=jetpack

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• blaze-dashboard
• odyssey-stats
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/launchpad-item-focus on your sandbox.

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[valterlorran]

I think we should ask @nuriapenya to chime in on this. I just wanted to check if she has any thoughts regarding these changes.

[markbiek]

Agreed that @nuriapenya should weigh in.

My first thought is this looks very cramped on the left side.

[gabrielcaires]

Agreed that @nuriapenya should weigh in.

My first thought is this looks very cramped on the left side. @markbiek @valterlorran

I agree it seems weird but it is the standard way to do it when we are dealing with a list of links, as you can see on google:

However, I added a tiny space between the border and the content. It causes a little jump. I am not sure if it is good or bad for accessibility issues, no other styles provoke content "jumping", so I have mixed feelings about it.

https://github.com/Automattic/wp-calypso/assets/38718/4fa7a219-ba11-49c1-96e6-574ac5b3dc93

[daledupreez]

However, I added a tiny space between the border and the content. It causes a little jump. I am not sure if it is good or bad for accessibility issues, no other styles provoke content "jumping", so I have mixed feelings about it.

Weird jumps => definitely not good!

Can we add a :not(:focus) selector that adds the same effective padding for the non-focused case? This might avoid the visible jump.

[markbiek]

I wanted to share this article about accessible focus indicators from an accessibility author that I really love: https://www.sarasoueidan.com/blog/focus-indicators/

A lot of the article is more specific to buttons but there's also good information about lists and other things.

She has one interesting suggestion for focus indicators on the kind of list we're talking about in this PR:

I'll defer to design's judgement but this might be another way to do it.

[gabrielcaires]

Can we add a :not(:focus) selector that adds the same effective padding for the non-focused case? This might avoid the visible jump.

I was trying to avoid it to not miss the left alignment but it seems optically aligned and I think it is better than jump as you can see here.

Updated version here:

https://github.com/Automattic/wp-calypso/assets/38718/8fb1e429-d3f4-4a40-bc4d-c42e38510534

@markbiek I liked the approach, but my concern is we already have another list on the same screen but I would like to have more design inputs @nuriapenya

https://github.com/Automattic/wp-calypso/assets/38718/98d0455d-21b2-4d4d-adbc-5dbf45ea3de7