Apply request changes

vtex · Sep 20, 2021 · b00490c · b00490c
1 parent a570d36
commit b00490c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git 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(<TestModal />)
 
     // 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(<TestModal />)
 
     // 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(<TestModal />)
     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(<TestModal />)
 
     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(<TestModal />)
+
+    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
@@ -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
@@ -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