fix(InfoTip): fix DOM ordering + tip not being reread

[dreamwasp]

Overview

Fixes DOM ordering and Infotip not being re-read on retrigger (known issue with aria-live on Chrome)

i've found that properly fixing the floating alignment would require an entire overhaul of the Popover component -- i've caught a larger epic for that here.

instead, the user can tab through the screenreader text for the floating component which does respect DOM order - giving the user the correct information in the correct order even if its not the same HTML element. this is a quick fix, i'm planning for a long-term fix with the adjustments to the Popover component but thats a much larger effort.

PR Checklist

• Related to JIRA ticket: [gm-788, ENT-73]
• 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. Head to InfoTip story
2. Turn on VO
3. Trigger an InfoTip at least 3x times - you should hear it read each re-trigger
4. Navigate to the alignment section
5. Open a top-aligned infotip
6. You should be able to hear the tip announced, and navigate through the text in correct DOM order using CTRL + OPT
7. Open a bottom-aligned infotip
8. You should be able to hear the tip announced, and navigate through the text in correct DOM order using CTRL + OPT
9. Navigate to the floating section
10. You should be able to hear the tip announced, and navigate through the text in correct DOM order using CTRL + OPT. The tip will not be highlighted, though the information should be communicated in the correct order.
11. Navigate to ToolTip page
12. You should only hear tips communicated as the Buttons and not repeated when navigating with CTRL + OPT
13. Profit

PR Links and Envs

Repository	PR Link	PR Env
Monolith	Monolith PR	Monolith Env
Portal	Portal Link	Portal Env

[codecademydev]

📬Published Alpha Packages:

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

[codecademydev]

🚀 Styleguide deploy preview ready!

https://6696b309b4404cfc93855779--gamut-preview.netlify.app

Deploy Logs

[aresnik11]

LGTM! Works as expected ✨