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

dreamwasp · 2025-11-20T15:08:07Z

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

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

Floating without links:

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

Floating with links:

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

Inline without links:

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

Inline with links:

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

GridForm + ConnectedForm

Head to the infotip section of GridForm or ConnectedForm + check it out

Screen reader check:

Use VO/NVDA to verify custom aria-role, label, and labelledby get announced
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 · 2025-11-20T15:08:58Z

View your CI Pipeline Execution ↗ for commit a880b53

☁️ Nx Cloud last updated this comment at 2026-01-28 20:14:14 UTC

LinKCoding

Overall, looks great!
It's much cleaner than the delayed announcement and the duplicate screenreader text.
Works great in VO and the focus control is 🔥

Left some nits, but not blocking and up to you if you'd want to implement.

LinKCoding · 2026-01-15T17:22:36Z

packages/styleguide/src/lib/Molecules/Tips/InfoTip/InfoTip.mdx


+## Custom Accessible Labeling
+
+Provide either `ariaLabel` or `ariaLabelledby` to ensure screen reader users understand the purpose of the InfoTip button.


Note: the phrasing here is stronger than the current JSDoc:

Its recommended to provide either ariaLabel or ariaLabelledby.

where "recommended" to me feels a bit more optional.

LinKCoding · 2026-01-15T17:23:09Z

packages/gamut/src/Tip/InfoTip/index.tsx

 export type InfoTipProps = TipBaseProps & {
  alignment?: TipBaseAlignment;
+  /**
+   * Accessible label for the InfoTip button. Its recommended to provide either `ariaLabel` or `ariaLabelledby`.


Nit: "Its" => "It's"
Also nit: Feels appropriate to remove "recommended", but would defer to an a11y expert if there's any opinion there.

LinKCoding · 2026-01-15T17:23:19Z

packages/gamut/src/Tip/InfoTip/index.tsx

+   */
+  ariaLabel?: string;
+  /**
+   * ID of an element that labels the InfoTip button. Its recommended to provide either `ariaLabel` or `ariaLabelledby`.


Nit: "Its" => "It's"

packages/styleguide/src/lib/Molecules/Tips/InfoTip/InfoTip.mdx

Co-authored-by: Kenny Lin <[email protected]>

LinKCoding

Looks great!
Left a quick note for your consideration~

LinKCoding · 2026-01-23T16:22:38Z

packages/gamut/src/Tip/InfoTip/utils.ts

+export type InfoTipPropsWithoutAria = Omit<
+  InfoTipProps,
+  'ariaLabel' | 'ariaLabelledby'
+> & {


This Omit makes me think that InfoTipPropsWithAriaLabel and InfoTipPropsWithAriaLabelledby can share an InfoTipsBaseProps (that get exported and used here)

and then the aria-* specific props be part of a discriminated union.

Food for thought :)

codecov · 2026-01-26T21:21:38Z

Codecov Report

❌ Patch coverage is 98.75000% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 89.04%. Comparing base (dba147a) to head (a880b53).
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
packages/gamut/src/Tip/InfoTip/index.tsx	94.73%	1 Missing ⚠️
packages/gamut/src/Tip/InfoTip/type-utils.ts	94.44%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3215      +/-   ##
==========================================
- Coverage   89.65%   89.04%   -0.62%     
==========================================
  Files         353      236     -117     
  Lines        5065     4298     -767     
  Branches     1606     1446     -160     
==========================================
- Hits         4541     3827     -714     
+ Misses        516      463      -53     
  Partials        8        8

Flag	Coverage Δ
main	`?`
pull-request	`89.04% <98.75%> (?)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

LinKCoding

Looked over Radio, CheckBox with InfoTip
and GridForm (which had a Radio with InfoTip)
and the VO announces the label now too! 🔥

codecademydev · 2026-01-28T20:14:46Z

📬 Published Alpha Packages:

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

github-actions · 2026-01-28T20:20:48Z

🚀 Styleguide deploy preview ready!

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

aresnik11 and others added 27 commits November 6, 2025 10:01

add logs

498f64c

up timeout

b11d0d6

add another log

bb9a2dd

try something

c81bae1

longer timeout

39830e8

change back

3513a21

try this

d0e9ab1

fix(InfoTip): wrap focus when shift tabbing

658cc64

tests passing, need to dry up

60c60cc

dry up tests

25abb10

Children

8e49f83

fix

c0bb30d

Merge branch 'main' into cass-ajr-GMT-1479

d4dcb51

lint

cf339b3

lint fix

7de0791

Merge branch 'main' into cass-ajr-GMT-1479

0cd4a2c

refactors

d9ada19

format

1b2d3d0

fix view

2781953

DRY up test code

1204594

Merge branch 'main' into cass-ajr-GMT-1479

c159886

test polling

5e68141

added better focus mgmt + fixed esc handler for inline

ba6f9a7

better docs

53b3d5f

fix popover r/l width

bede696

refactor for container refs

259a63b

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

b00417e

dreamwasp changed the title ~~fix(InfoTip): Remove ariaa-live and implement focus mgmt~~ fix(InfoTip): Remove aria-live and implement focus mgmt Nov 20, 2025

remove aria-live

a42c7db

dreamwasp added 3 commits January 6, 2026 13:45

amy commments

d22d5c2

merged dev

fc3a7e4

fix example

f403686

dreamwasp changed the title ~~fix(InfoTip): Remove aria-live and implement focus mgmt~~ fix(InfoTip)!: Remove aria-live and implement focus mgmt Jan 15, 2026

LinKCoding approved these changes Jan 15, 2026

View reviewed changes

dreamwasp and others added 11 commits January 16, 2026 09:55

Update packages/styleguide/src/lib/Molecules/Tips/InfoTip/InfoTip.mdx

6b87d97

Co-authored-by: Kenny Lin <[email protected]>

Update packages/styleguide/src/lib/Molecules/Tips/InfoTip/InfoTip.mdx

c39d7ac

Co-authored-by: Kenny Lin <[email protected]>

try new utility

b0a6cb4

more performant

32e5c26

formatted :-)

7a273c3

test restricted types

2cd5c4f

fix radio groups

70c2759

format

3acc56e

not required but mutually exclusive

bc6efa7

docs tweaks

f5ae7e1

format

070e933

LinKCoding approved these changes Jan 23, 2026

View reviewed changes

dreamwasp and others added 7 commits January 23, 2026 14:39

radio infotip

9cd007b

tweak subcomponent types

ba6e85c

tweak some test utils

142682b

added checkbox infotip

8f8379d

Merge branch 'main' into cass-GMT-216

15d46b5

fix rerouting issues

dfbd493

Merge branch 'main' into cass-GMT-216

4679440

LinKCoding approved these changes Jan 27, 2026

View reviewed changes

dreamwasp and others added 2 commits January 28, 2026 14:26

port types

f6225b3

Merge branch 'main' into cass-GMT-216

a880b53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Uh oh!

dreamwasp commented Nov 20, 2025 •

edited by LinKCoding

Loading

Uh oh!

nx-cloud bot commented Nov 20, 2025 •

edited

Loading

Uh oh!

LinKCoding left a comment

Uh oh!

LinKCoding Jan 15, 2026

Uh oh!

LinKCoding Jan 15, 2026

Uh oh!

LinKCoding Jan 15, 2026

Uh oh!

Uh oh!

Uh oh!

LinKCoding left a comment

Uh oh!

LinKCoding Jan 23, 2026

Uh oh!

codecov bot commented Jan 26, 2026 •

edited

Loading

Uh oh!

LinKCoding left a comment

Uh oh!

codecademydev commented Jan 28, 2026

Uh oh!

github-actions bot commented Jan 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants


		## Custom Accessible Labeling

		Provide either `ariaLabel` or `ariaLabelledby` to ensure screen reader users understand the purpose of the InfoTip button.

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

dreamwasp commented Nov 20, 2025 • edited by LinKCoding Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

PR Checklist

Testing Instructions

PR Links and Envs

Uh oh!

nx-cloud bot commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LinKCoding left a comment

Choose a reason for hiding this comment

Uh oh!

LinKCoding Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

LinKCoding Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

LinKCoding Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

LinKCoding left a comment

Choose a reason for hiding this comment

Uh oh!

LinKCoding Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

LinKCoding left a comment

Choose a reason for hiding this comment

Uh oh!

codecademydev commented Jan 28, 2026

Uh oh!

github-actions bot commented Jan 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

dreamwasp commented Nov 20, 2025 •

edited by LinKCoding

Loading

nx-cloud bot commented Nov 20, 2025 •

edited

Loading

codecov bot commented Jan 26, 2026 •

edited

Loading