Skip to content

feat(InfoTip): Add global escape close#3194

Merged
codecademydev merged 16 commits intomainfrom
ajr-global-esc-close-infotip
Nov 4, 2025
Merged

feat(InfoTip): Add global escape close#3194
codecademydev merged 16 commits intomainfrom
ajr-global-esc-close-infotip

Conversation

@aresnik11
Copy link
Contributor

@aresnik11 aresnik11 commented Oct 22, 2025 •
edited
Loading

Overview

Adds a global escape close to floating InfoTips. Also moves focus back to info button after focus leaves the infotip. Fixes a bug where the infotip text was not getting read by screenreaders.

PR Checklist

  • Related to designs:
  • Related to JIRA ticket: GMT-218
  • 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

  1. Go to Infotip story
  2. Go to the floating placement story
  3. Open the info tip
  4. Click escape and confirm it closes and that focus is moved back to the info button 🎉
  5. Continue navigating via keyboard and confirm you move on to the next element
  6. Go to the with links or buttons story
  7. Open the info tip
  8. Click escape and confirm it closes and that focus is moved back to the info button 🎉
  9. Continue navigating via keyboard and confirm you move on to the next element
  10. Check it with VO
  11. Confirm when you open an infotip it reads the text inside
  12. Finish and do a celebratory dance

PR Links and Envs

Repository PR Link
Monolith Monolith PR
Mono Mono PR

@nx-cloud
Copy link

nx-cloud bot commented Oct 22, 2025 •
edited
Loading

View your CI Pipeline Execution ↗ for commit 342d5b3

☁️ Nx Cloud last updated this comment at 2025-11-04 17:04:25 UTC

@aresnik11 aresnik11 changed the title Ajr global esc close infotip feat(InfoTip): Add global escape close Oct 27, 2025
@aresnik11 aresnik11 marked this pull request as ready for review October 27, 2025 18:26
@aresnik11 aresnik11 requested a review from a team as a code owner October 27, 2025 18:26
LinKCoding
LinKCoding approved these changes Oct 29, 2025
View reviewed changes
Copy link
Contributor

@LinKCoding LinKCoding left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Works well in SB and left one tiny nit
🔥

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

const InfoTipExample: React.FC<InfoTipProps> = (args) => {
return (
export const Default: Story = {
Copy link
Contributor

@LinKCoding LinKCoding Oct 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love all these changes, thanks~

dreamwasp
dreamwasp reviewed Oct 31, 2025
View reviewed changes
Copy link
Contributor

@dreamwasp dreamwasp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

left comments just about the handleFocusOut function, i'm gonna check out mono and see how its working there!

@aresnik11 aresnik11 requested a review from dreamwasp November 3, 2025 15:24
dreamwasp
dreamwasp approved these changes Nov 4, 2025
View reviewed changes
Copy link
Contributor

@dreamwasp dreamwasp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks great + sounds great on VO - thanks for fixing the VO bug!

@aresnik11 aresnik11 added the Ship It :shipit: Automerge this PR when possible label Nov 4, 2025
@codecademydev
Copy link
Collaborator

codecademydev commented Nov 4, 2025

📬 Published Alpha Packages:

@codecademy/gamut@67.2.2-alpha.0a4643.0
@codecademy/gamut-kit@0.6.561-alpha.0a4643.0
@codecademy/styleguide@78.2.3-alpha.0a4643.0

@github-actions
Copy link
Contributor

github-actions bot commented Nov 4, 2025

🚀 Styleguide deploy preview ready!

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

@aresnik11 aresnik11 removed the Ship It :shipit: Automerge this PR when possible label Nov 4, 2025
@aresnik11 aresnik11 added the Ship It :shipit: Automerge this PR when possible label Nov 4, 2025
@codecademydev codecademydev merged commit dcffe03 into main Nov 4, 2025
17 of 19 checks passed
@codecademydev codecademydev removed the Ship It :shipit: Automerge this PR when possible label Nov 4, 2025
@codecademydev codecademydev deleted the ajr-global-esc-close-infotip branch November 4, 2025 17:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@LinKCoding LinKCoding LinKCoding approved these changes

@dreamwasp dreamwasp dreamwasp approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@aresnik11 @codecademydev @LinKCoding @dreamwasp