fix(Modal): Give Modal programmatic focus instead of close button

[LinKCoding]

Overview

Update Modal to give programmatic focus to the Modal instead of the close button.

Update Modal to give programmatic focus to the Modal instead of the close button.

PR Checklist

• Related to designs:
• Related to JIRA ticket: GM-753
• 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 Gamut's Modal page and "Trigger Modal" (?path=/docs/molecules-modals-modal--trigger-modal)
2. Turn on VO
3. Click on "Open Modal" Or "Open multi-view Modal"
4. Notice that the programmatic focus is on the Modal container (and not the close button)
5. Tab off the Modal container (into the close button)
6. Notice that you cannot tab back into the Modal container
7. Go to Dialog and "Trigger Dialog" (?path=/docs/molecules-modals-dialog--trigger-dialog#triggering-a-dialog)
8. Click on "Open Dialog"
9. repeat steps 4-6
   —
   Mono
10. Use the LE Preview link in the PR!
11. Go to a ex where you can gain progress (e.g. https://tayra.codecademy.com/courses/introduction-to-javascript/lessons/variables/exercises/var?PR_ENV=le-pr-6984)
12. Turn on VO
13. Click "Reset Workspace" at the bottom of the page
14. Notice that the Modal's focus is now on the container
15. Tab off the Modal container (into the close button)
16. Notice that you cannot tab back into the Modal container
    ...
17. Profit!

PR Links and Envs

Repository	PR Link	PR Env
Monolith	Monolith PR	Monolith Env
Portal	Portal Link	Portal Env
Another Repo	Another Link	Another Env

[dreamwasp]

couple tiny things but looks great + works great

[dreamwasp]

weirdly i'm unable to trigger this on Enter button press 🤔

[LinKCoding]

(For documentation) Turns out this is something with Storybook and having multiple dialogs opened.
If all the other stories on the dialog page are deleted, then the example works 🤷

That said, it works in prod, so writing this off as a quirk of SB

[codecademydev]

📬Published Alpha Packages:

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

[codecademydev]

🚀 Styleguide deploy preview ready!

https://669eadc2cc801e2d19fcd688--gamut-preview.netlify.app

Deploy Logs