diff --git a/.changeset/giant-beers-draw.md b/.changeset/giant-beers-draw.md
new file mode 100644
index 0000000000..829dc7b558
--- /dev/null
+++ b/.changeset/giant-beers-draw.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/animation-library': patch
+'@twilio-paste/core': patch
+---
+
+Bumped the version of React-Spring to 9.1.2 in order to fix a TS issue.
diff --git a/.changeset/tender-icons-obey.md b/.changeset/tender-icons-obey.md
new file mode 100644
index 0000000000..32010a8032
--- /dev/null
+++ b/.changeset/tender-icons-obey.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/modal-dialog-primitive': patch
+'@twilio-paste/core': patch
+---
+
+Bumped the version of Reach/Dialog to 0.15.0
diff --git a/packages/paste-core/components/modal/__tests__/index.spec.tsx b/packages/paste-core/components/modal/__tests__/index.spec.tsx
index e8cb443bef..5d6fa0dccd 100644
--- a/packages/paste-core/components/modal/__tests__/index.spec.tsx
+++ b/packages/paste-core/components/modal/__tests__/index.spec.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import {useUID} from '@twilio-paste/uid-library';
import {render} from 'react-dom';
-import {render as testRender, fireEvent, cleanup} from '@testing-library/react';
+import {render as testRender, fireEvent} from '@testing-library/react';
import {Theme} from '@twilio-paste/theme';
import {Button} from '@twilio-paste/button';
import {Box} from '@twilio-paste/box';
@@ -102,7 +102,6 @@ describe('Modal', () => {
const {getByTestId} = testRender();
expect(getByTestId('modal').getAttribute('role')).toEqual('dialog');
expect(getByTestId('modal').getAttribute('aria-modal')).toEqual('true');
- cleanup();
});
it('should be labelled by the correct heading', () => {
@@ -110,33 +109,47 @@ describe('Modal', () => {
expect(getByTestId('modal').getAttribute('aria-labelledby')).toEqual(
getByTestId('modal-heading').getAttribute('id')
);
- cleanup();
});
it('should be be able to take arbitrary html attributes on the container', () => {
const {getByTestId} = testRender();
expect(getByTestId('modal').getAttribute('aria-busy')).toEqual('true');
expect(getByTestId('modal').getAttribute('id')).toEqual('a-new-id');
- cleanup();
+ });
+
+ it('should render with focusable elements in the modal content', () => {
+ const {getByTestId} = testRender(
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ expect(getByTestId('modal')).toBeDefined();
});
it('should focus on the first focusable element in the modal, the close button', () => {
const {getByTestId} = testRender();
expect(document.activeElement).toEqual(getByTestId('modal-header').querySelector('button'));
- cleanup();
});
it('should focus on the element provided as the initialFocus element in the modal', () => {
const {getByTestId} = testRender();
expect(document.activeElement).toEqual(getByTestId('modal-body').querySelector('input'));
- cleanup();
});
it('should call the onDismiss function when the close button is clicked', () => {
const {getByTestId} = testRender();
fireEvent.click(getByTestId('modal-header').querySelector('button') as HTMLButtonElement);
expect(handleCloseMock).toHaveBeenCalled();
- cleanup();
});
it('Should have no accessibility violations', async () => {
diff --git a/packages/paste-core/components/modal/src/Modal.tsx b/packages/paste-core/components/modal/src/Modal.tsx
index e40697f56a..d3c35cb8f2 100644
--- a/packages/paste-core/components/modal/src/Modal.tsx
+++ b/packages/paste-core/components/modal/src/Modal.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
import * as PropTypes from 'prop-types';
import {styled, css} from '@twilio-paste/styling-library';
import {useTransition, animated} from '@twilio-paste/animation-library';
+import {safelySpreadBoxProps} from '@twilio-paste/box';
import {pasteBaseStyles} from '@twilio-paste/theme';
import {ModalDialogPrimitiveOverlay, ModalDialogPrimitiveContent} from '@twilio-paste/modal-dialog-primitive';
import {ModalContext} from './ModalContext';
@@ -130,8 +131,7 @@ const Modal = React.forwardRef(
>