fix(InfoTip): Remove aria-live and implement focus mgmt

[dreamwasp]

Overview

Adds props to InfoTip for customizing the button's aria-label and aria-labelledby attribute. Also adds automatic focus management - when you open an InfoTip, focus moves to the content container. This removed aria-live since it's no longer needed.

PR Checklist

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

Testing Instructions

ButtonProps:

1. Go to InfoTip Storybook story ButtonProps
2. Check devtools - default button should have aria-label "Show information"
3. Verify custom aria-label examples work
4. Verify name attribute gets applied

Auto-focus + keyboard nav (verify tab order makes sense!):

Floating without links:

1. Go to Default story with placement: "floating"
2. Tab to to InfoTip button + press enter - focus should automatically move to the popover content
3. Press Tab - should wrap back to button (no getting stuck in empty popover)
4. Also works with VO on click.

Floating with links:

1. Go to WithLinksOrButtons story
2. Open with keyboard - focus auto-moves to popover content
3. Tab through the links - should move naturally
4. After last link, Tab wraps back to InfoTip button
5. Shift+Tab from button - should exit backward to previous page element (no trap)

Inline without links:

1. Go to Default story (default inline placement)
2. Open with keyboard - focus auto-moves to tip content
3. Tab - moves to next element in document (normal flow)

Inline with links:

1. Make a quick test with inline placement + links
2. Open it - focus auto-moves to content
3. Tab through - should follow normal document flow with the links

Screen reader check:

1. Use VO/NVDA to verify custom aria-labels get announced
2. Make sure the auto-focus to content is smooth and announced properly

Finish and do a celebratory dance 🎉

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit d1626f1

---

☁️ Nx Cloud last updated this comment at 2025-12-09 20:31:06 UTC

[codecademydev]

📬 Published Alpha Packages:

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

[github-actions]

🚀 Styleguide deploy preview ready!

Preview URL: https://693887ca4efe4757bcbe7fda--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/693887ca4efe4757bcbe7fda