diff --git a/packages/store-ui/src/molecules/Modal/Modal.test.tsx b/packages/store-ui/src/molecules/Modal/Modal.test.tsx
index 6b7150d66f..9b1f3cbbab 100644
--- a/packages/store-ui/src/molecules/Modal/Modal.test.tsx
+++ b/packages/store-ui/src/molecules/Modal/Modal.test.tsx
@@ -47,16 +47,16 @@ describe('Modal', () => {
expect(document.querySelector(`[data-testid="${modalTestId}"]`)).toBeNull()
- const modalTriggerButton = getByTestId('trigger')
-
- fireEvent.click(modalTriggerButton)
+ fireEvent.click(getByTestId('trigger'))
expect(getByTestId('store-modal')).toBeInTheDocument()
})
+})
+describe('Modal WAI-ARIA Specifications', () => {
// WAI-ARIA tests
// https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
- it('Test WAI-ARIA Specifications: Focus first element', () => {
+ it('Focus first element', () => {
const { getByTestId } = render()
// Open the modal
@@ -66,7 +66,7 @@ describe('Modal', () => {
expect(getByTestId('first-input')).toHaveFocus()
})
- it('Test WAI-ARIA Specifications: Loop focus', () => {
+ it('Loop focus', () => {
const { getByTestId } = render()
// Open the modal
@@ -92,7 +92,7 @@ describe('Modal', () => {
expect(getByTestId('first-input')).toHaveFocus()
})
- it('Test WAI-ARIA Specifications: Focus last element before the modal was opened', () => {
+ it('Focus last element before the modal was opened', () => {
const { getByTestId } = render()
const triggerModalButton = getByTestId('trigger')
@@ -112,7 +112,7 @@ describe('Modal', () => {
expect(triggerModalButton).toHaveFocus()
})
- it('Test WAI-ARIA Specifications: Close when press escape', () => {
+ it('Close when press escape', () => {
const { getByTestId } = render()
fireEvent.click(getByTestId('trigger'))
@@ -128,4 +128,17 @@ describe('Modal', () => {
expect(document.querySelector(`[data-testid="${modalTestId}"]`)).toBeNull()
})
+
+ it('Close when click outside the modal', () => {
+ const { getByTestId } = render()
+
+ fireEvent.click(getByTestId('trigger'))
+
+ expect(getByTestId('store-modal')).toBeInTheDocument()
+
+ // Close the modal
+ fireEvent.click(getByTestId('store-overlay'))
+
+ expect(document.querySelector(`[data-testid="${modalTestId}"]`)).toBeNull()
+ })
})
diff --git a/packages/store-ui/src/molecules/Modal/Modal.tsx b/packages/store-ui/src/molecules/Modal/Modal.tsx
index 5169ad2a16..b8ad8ae144 100644
--- a/packages/store-ui/src/molecules/Modal/Modal.tsx
+++ b/packages/store-ui/src/molecules/Modal/Modal.tsx
@@ -83,13 +83,9 @@ export interface ModalProps extends ModalContentProps {
* the dialog.
*/
onDismiss?: (event: MouseEvent | KeyboardEvent) => void
- /**
- * Defines a string value that labels the current element.
- * @see aria-labelledby.
- */
- 'aria-label'?: AriaAttributes['aria-label']
/**
* Identifies the element (or elements) that labels the current element.
+ * @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby
*/
'aria-labelledby'?: AriaAttributes['aria-label']
}
diff --git a/packages/store-ui/src/molecules/Modal/useTrapFocus.ts b/packages/store-ui/src/molecules/Modal/useTrapFocus.ts
index 13f8ff8764..522851b939 100644
--- a/packages/store-ui/src/molecules/Modal/useTrapFocus.ts
+++ b/packages/store-ui/src/molecules/Modal/useTrapFocus.ts
@@ -27,7 +27,7 @@ const useTrapFocus = ({
document.hasFocus() ? (document.activeElement as HTMLElement) : null
)
- // Focus back on the element that was focused before the trapFocusNode
+ // Focus back on the element that was focused when useTrapFocus is triggered.
useEffect(() => {
const nodeToRestore = nodeToRestoreRef.current