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 c39d7ac

☁️ Nx Cloud last updated this comment at 2026-01-16 14:57:50 UTC

aresnik11

Looking really good!! Just a couple of smaller storybook asks

aresnik11 · 2025-12-12T14:55:06Z

packages/gamut/src/ConnectedForm/__tests__/ConnectedForm.test.tsx

+  it('automatically labels InfoTip button by the field label when label is a string', () => {
+    const { view } = renderWithInfotip({ infotip: { info } });
+
+    view.getByRole('button', { name: new RegExp(label) });


why do we need new RegExp here

i initially did it cos optional is added by the field label, but i'll just make it more specific

aresnik11 · 2025-12-15T18:05:29Z

packages/styleguide/src/lib/Organisms/GridForm/Fields.stories.tsx

+    fields: [
+      {
+        label: 'Email address',
+        name: 'email',
+        size: 9,
+        type: 'email',
+        infotip: {
+          info: 'We will never share your email with third parties.',
+        },
+      },
+    ],


can this be floating? or change the alignment

aresnik11 · 2025-12-15T18:06:35Z

packages/styleguide/src/lib/Organisms/GridForm/Fields.mdx

+## InfoTip
+
+Any field can include an `infotip` prop to provide additional context to users.
+
+### Automatic labelling
+
+InfoTip buttons are automatically labelled by string field labels for accessibility.
+
+<Canvas of={FieldsStories.InfoTipAutoLabelling} />
+
+### ReactNode labels
+
+For ReactNode labels, you have three options:
+
+- `labelledByFieldLabel: true` - opt into automatic labelling by the field label
+- `ariaLabel` - provide a custom accessible name
+- `ariaLabelledby` - reference another element on the page, such as a section heading
+
+<Canvas of={FieldsStories.InfoTipWithReactNodeLabel} />


can this go with the other infotip info? thats currently under layout. i trust your judgement on whether to move that to here or move this to there

good call out - i'll add a link to the layout section since this is a little nitty gritty

aresnik11 · 2025-12-15T18:14:18Z

packages/styleguide/src/lib/Molecules/Tips/InfoTip/InfoTip.stories.tsx

+          I am some helpful yet concise text that needs more explanation
+        </Text>
+        <InfoTip
+          {...args}


this is getting the ariaLabel="More information" prop from args

aresnik11 · 2025-12-15T21:35:59Z

...styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormGroup/ConnectedFormGroup.stories.tsx

+    >
+      <ConnectedFormGroup
+        field={{ component: ConnectedInput, type: 'email' }}
+        infotip={{ info: 'We will never share your email with third parties.' }}


can this be floating? or change the alignment

aresnik11 · 2025-12-15T21:36:46Z

...styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormGroup/ConnectedFormGroup.stories.tsx

+      </Text>
+      <ConnectedFormGroup
+        field={{ component: ConnectedInput }}
+        infotip={{


i would also prob change the alignment on these so you dont have to scroll to see them open

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]>

codecademydev · 2026-01-16T14:58:40Z

📬 Published Alpha Packages:

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

github-actions · 2026-01-16T15:01:15Z

🚀 Styleguide deploy preview ready!

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

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

formatted

6af94df

Base automatically changed from cass-ajr-GMT-1479 to main December 4, 2025 18:13

dreamwasp and others added 12 commits December 4, 2025 15:42

need to confirm merge changes

cf5edf9

put selector back

4647bcb

start infotip form accessibility

5e8ee27

Merge branch 'main' into cass-GMT-216

aabf026

add docs to form infotips

cadb7f4

Merge branch 'main' into cass-GMT-216

aa36d99

needless comment

08c5459

test token

f80df1d

publish

d1626f1

Merge branch 'main' into cass-GMT-216

0a823ee

More information microcopy

d860310

add tests

8dd47a3

dreamwasp marked this pull request as ready for review December 11, 2025 18:43

dreamwasp requested a review from a team as a code owner December 11, 2025 18:43

dreamwasp requested review from LinKCoding and jakemhiller December 11, 2025 18:43

aresnik11 reviewed Dec 15, 2025

View reviewed changes

dreamwasp and others added 5 commits December 17, 2025 09:54

Merge branch 'main' into cass-GMT-216

ef78c2c

Merge branch 'main' into cass-GMT-216

f8f5412

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 2 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]>


		## 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

Conversation

dreamwasp commented Nov 20, 2025 • edited 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!

aresnik11 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LinKCoding left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

codecademydev commented Jan 16, 2026

Uh oh!

github-actions bot commented Jan 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

dreamwasp commented Nov 20, 2025 •

edited

Loading

nx-cloud bot commented Nov 20, 2025 •

edited

Loading