fix(ProgressBar): adds focus outline

[aresnik11]

Overview

Updates ProgressBar to show focus outline for screenreader only text.

PR Checklist

• Related to designs:
• Related to JIRA ticket: GM-953,GM-545
• 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

Note: please test locally, there's some weirdness with storybook previews

1. Open the storybook preview and go to ProgressBar
2. Open VoiceOver
3. Navigate through the page and confirm there is visible keyboard focus when Progress: X% figure is read aloud
4. See mono PR for testing instructions there. Any uses of ProgressBar in monolith are dead code.

PR Links and Envs

Repository	PR Link	PR Env
Monolith	Monolith PR	Monolith Env
Mono	Mono Link	Mono Env

[nx-cloud]

View your CI Pipeline Execution ↗ for commit e93a6f9.

---

☁️ Nx Cloud last updated this comment at 2025-02-04 18:11:41 UTC

[codecademydev]

🚀 Styleguide deploy preview ready!

https://67a2527408ba7e55ccb9db6f--gamut-preview.netlify.app

Deploy Logs

[codecademydev]

📬Published Alpha Packages:

@codecademy/gamut@59.0.1-alpha.e93a6f.0
@codecademy/gamut-kit@0.6.470-alpha.e93a6f.0

[LinKCoding]

tested locally and works great!