fix(MenuItem_Anchor_tooltipTarget): Focus state fixes

[jrood]

Overview

( This PR has some overlap with #2791 (review) )

Update implementation and color for focus states of Anchor, MenuItem, and focusable Tooltip target.

The initial desire was to fix an a11y issue found via TestIO where border color was incorrect for MenuItem focus states in Safari. In the process, we found that Safari doesn't honor outline styles using auto. The initial solution was to switch auto to solid for MenuItem focus boarders and other elements with the same issue. However, we then found that solid introduces new issues where native outlines don't handle border-radius as expected.

For buttons and some Anchor variants, we already have a convention for using a :before pseudo-element rather than outline for focus state borders. This approach doesn't suffer from the same color, border-radius, and browser-inconsistency issues. This PR fixes the a11y issue by updating MenuItems to use this same pseudo-element pattern for focus borders. The same change is made for the Anchor variants that did not yet use this approach and for focusable Tooltip targets. A color fix for focused Anchor text color is also included.

PR Checklist

• Related to designs:
• Related to JIRA ticket: REACH-3073
• I have run this code to verify it works
• This PR includes unit tests for the code change
• This PR includes testing instructions tests for the code change
• The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Setup

• Go to Mac System Settings -> Keyboard
• Verify that the "Keyboard navigation" toggle is enabled
• Open Safari, Safari Settings CMD + , -> Advanced
• Verify that "Press Tab to highlight each item on a webpage" is checked
• Do the three tests below using Safari:

MenuItem

• Go to /?path=/docs/molecules-menu--menu
• Tab through MenuItems on the Action and Navigation variants
• Verify that a blue/hyper focus state is shown

Anchor

• Go to /?path=/docs/typography-anchor--anchor
• Tab through Anchor variants
• Verify that the primary color is always for Anchor text while focused

Focusable target for Tooltip

• Go to /?path=/docs/atoms-tooltip--tool-tip
• Tab onto the target for the "Focusable" example
• Verify that a blue/hyper focus state is shown

PR Links and Envs

Repository	PR Link	Preview Env
Monolith	Monolith PR	Monolith Preview
Monorepo	Monorepo PR	PortalApp Preview LE Preview

[codecademydev]

📬Published Alpha Packages:

@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]

[codecademydev]

🚀 Styleguide deploy preview ready!

https://652050803634d8275304fb3a--gamut-preview.netlify.app

Deploy Logs

[dreamwasp]

tested in the PRs envs and locally + all lgtm, thanks for taking this on!