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