feat(Modal, Dialog, and Alert)!: add new accessibility props to Modal, Dialog, and Alert's close Button #3177

dreamwasp · 2025-09-25T18:03:28Z

Overview

Updates to the Modal, Dialog, and Alert components to encapsulate props for the closeButton in a single object.
Currently using props like hideCloseButton and disableCloseButton — with this update, these props and ref, tip, and tipAlignment are stored in a closeButtonProps prop.

PR Checklist

Related to designs:
Related to JIRA ticket: [GM-1313]
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

Don't make me tap the sign.

Go to Modal and go to the "Close behavior" section
Notice that the close Button's tip is customized (Check it with VO)
Tab + click/enter/space through the buttons in the first canvas
scroll down to the "Focus management" section
Tab + click/enter/space through the buttons in the examples
Go to Dialog and go to the "Close behavior" section
Notice that the close Button's tip is customized (Check it with VO)
Tab + click/enter/space through the buttons in the first canvas
Go to Alert and go to the "Close button props" section
Notice the close Buttons now available (the 2nd example is actually dismissible)
Scroll down to "Close button customization" and see that the tip and the alignment has been customized
(optional) check out the new tests
Finish and do a celebratory dance

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

nx-cloud · 2025-09-25T18:04:56Z

View your CI Pipeline Execution ↗ for commit 384da96

Command	Status	Duration	Result
`nx run-many --target=verify --parallel=3 --all`	✅ Succeeded	<1s	View ↗
`nx run-many --target=build --all`	✅ Succeeded	1s	View ↗

☁️ Nx Cloud last updated this comment at 2025-10-03 19:01:58 UTC

…s single commit

packages/styleguide/src/lib/Molecules/Alert/Alert.mdx

aresnik11

Nice!! A couple small questions/nits

packages/styleguide/src/lib/Molecules/Modals/Dialog/Dialog.stories.tsx

aresnik11 · 2025-10-02T13:58:50Z

yarn.lock

    chokidar "^3.4.0"

-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.24.7", "@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.0", "@babel/code-frame@^7.27.1":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.24.7", "@babel/code-frame@^7.27.1":


why do we have all of these yarn.lock changes?

Not entirely sure — but I do the get same result on your ajr-nested-checkboxes branch by running
npx yarn-deduplicate and then yarn 🤔

I wonder if it's like Cass did this after I did my emotion bump b.c. a lotta packages were still duped? 🤷

yeah maybe, lets just double check with them on monday

aresnik11 · 2025-10-02T14:02:14Z

packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.mdx

+
+<Canvas of={ModalStories.CloseButtonCustomization} />
+
+If the close button is hidden, you will need to create a custom way to close the modal. You can then use the `isOpen` prop to create other controls that toggle the Modal on and off.


should we add this line to all the other stories?

Adding this to Dialog, but wondering if it's necessary for Alert — since the onClose prop kinda forces the user to implement the close logic and not sure if we'd want to encourage folks to work around that

aresnik11 · 2025-10-02T14:02:23Z

packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.mdx


 <Canvas of={ModalStories.Scrollable} />

+## Focus management


should we add this section to all the other stories?

Sounds good :)

Ended up not doing this for Alert, but would like to confirm with Cass about some Alert specific things
e.g. do we need all those closeButtonProps, or is it really just the text and alignment.

aresnik11 · 2025-10-02T14:39:14Z

packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.stories.tsx

+export const CustomClose: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <>
+      <FillButton onClick={() => setIsOpen(true)}>Open Modal</FillButton>
+      <Modal
+        {...defaultProps}
+        closeButtonProps={{ hidden: true }}
+        isOpen={isOpen}
+        onRequestClose={() => setIsOpen(false)}
+      >
+        Close the Modal!
+      </Modal>
+    </>
+  );
+};


i know this is existing but should we have a button or something to close the modal in this example? its for custom close but were not showing a custom close

Added for both Modal and Dialog (tho lmk about Dialog b.c. both the Accept/Confirm buttons do close the Dialog lol)

aresnik11 · 2025-10-02T16:43:52Z

packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.stories.tsx

  );
 };

+export const FocusManagement: React.FC = () => {


i'm not totally clear what this example is doing tbh, the 2 buttons dont seem to do anything different unless i'm missing something

were you using keyboard (tab + space/enter)?
when I was using mouse it doesn't really show anything lol

not sure, ill try again when i rereview!

packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.stories.tsx

codecademydev · 2025-10-03T19:04:48Z

📬Published Alpha Packages:

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

codecademydev · 2025-10-03T19:05:58Z

🚀 Styleguide deploy preview ready!

https://68e01e91694c74048107c2ee--gamut-preview.netlify.app

Deploy Logs

feat(ModalProps): add new accessibility props to Modal

3ccc28c

dreamwasp changed the title ~~feat(ModalProps): add new accessibility props to Modal~~ feat(ModalProps)!: add new accessibility props to Modal Sep 25, 2025

dreamwasp and others added 11 commits September 26, 2025 15:53

closeButton + props

c40314a

touch ups to examples for Modal

dfb5592

formatted

c14c368

updates to dialog to reflect modal

bf87c5c

updated Alert

5b313c6

formatting changes

c40cb41

updated dialog tests

d27552a

updated Alert tests, not sure if it's actually needed, keeping to thi…

04e7a77

…s single commit

fix up dialog test

723ec61

update story

2534d94

Merge branch 'main' into cass-gm-1313

2b09534

LinKCoding changed the title ~~feat(ModalProps)!: add new accessibility props to Modal~~ feat(Modal, Dialog, and Alert)!: add new accessibility props to Modal, Dialog, and Alert's close Button Oct 1, 2025

LinKCoding marked this pull request as ready for review October 1, 2025 16:08

LinKCoding requested a review from a team as a code owner October 1, 2025 16:08

LinKCoding requested review from jakemhiller and aresnik11 October 1, 2025 16:08

aresnik11 reviewed Oct 2, 2025

View reviewed changes

packages/styleguide/src/lib/Molecules/Alert/Alert.mdx Show resolved Hide resolved

aresnik11 reviewed Oct 2, 2025

View reviewed changes

LinKCoding added 5 commits October 3, 2025 12:04

Address Amy's feedback

6a27955

Merge branch 'main' into cass-gm-1313

16811c0

formatted

9982179

fix failing tests

2566d44

formatted

384da96


		<Canvas of={ModalStories.CloseButtonCustomization} />

		If the close button is hidden, you will need to create a custom way to close the modal. You can then use the `isOpen` prop to create other controls that toggle the Modal on and off.

feat(Modal, Dialog, and Alert)!: add new accessibility props to Modal, Dialog, and Alert's close Button #3177

Are you sure you want to change the base?

feat(Modal, Dialog, and Alert)!: add new accessibility props to Modal, Dialog, and Alert's close Button #3177

Uh oh!

Conversation

dreamwasp commented Sep 25, 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 Sep 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

aresnik11 left a comment

Choose a reason for hiding this comment

Uh oh!

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!

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!

Uh oh!

codecademydev commented Oct 3, 2025

📬Published Alpha Packages:

Uh oh!

codecademydev commented Oct 3, 2025

Uh oh!

Uh oh!

dreamwasp commented Sep 25, 2025 •

edited by LinKCoding

Loading

nx-cloud bot commented Sep 25, 2025 •

edited

Loading