Merge pull request #1465 from dhis2/LIBS-567/modal-accessibility-tran…

…slation

chore: update modal accessibility and translation

components/modal/src/modal/close-button.js

@@ -2,15 +2,18 @@ import { colors, theme } from '@dhis2/ui-constants'
 import { IconCross16 } from '@dhis2/ui-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
+import i18n from '../locales/index.js'
 
 const createClickHandler = (onClick) => (event) => {
     onClick({}, event)
 }
 
 export const CloseButton = ({ onClick }) => (
     <button
+        title={i18n.t('Close modal dialog')}
         data-test="dhis2-modal-close-button"
         onClick={createClickHandler(onClick)}
+        aria-label={i18n.t('Close modal dialog')}
     >
         <IconCross16 />
         <style jsx>{`

components/modal/src/modal/modal.js

@@ -4,7 +4,7 @@ import { Layer } from '@dhis2-ui/layer'
 import { spacers, spacersNum, sharedPropTypes } from '@dhis2/ui-constants'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { resolve } from 'styled-jsx/css'
 import { CloseButton } from './close-button.js'
 
@@ -28,6 +28,27 @@ export const Modal = ({
     small,
 }) => {
     const layerStyles = resolveLayerStyles(hide)
+
+    useEffect(() => {
+        if (hide) {
+            return
+        }
+
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape' && onClose) {
+                event.preventDefault()
+                event.stopPropagation()
+                onClose()
+            }
+        }
+
+        document.addEventListener('keydown', handleKeyDown)
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown)
+        }
+    }, [hide, onClose])
+
     return (
         <Layer
             onBackdropClick={onClose}

components/modal/src/modal/modal.test.js

@@ -1,8 +1,48 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, fireEvent } from '@testing-library/react'
 import React from 'react'
+import { CloseButton } from './close-button.js'
 import { Modal } from './modal.js'
 
 describe('Modal', () => {
+    describe('Modal Accessibility', () => {
+        it('closes when ESC key is pressed', () => {
+            const onCloseMock = jest.fn()
+            render(<Modal onClose={onCloseMock} />)
+
+            const modalElement = screen.getByRole('dialog')
+            fireEvent.keyDown(modalElement, { key: 'Escape', code: 'Escape' })
+            expect(onCloseMock).toHaveBeenCalled()
+        })
+
+        it('does not close when "Enter" is pressed', () => {
+            const onCloseMock = jest.fn()
+            render(<Modal onClose={onCloseMock} />)
+
+            const modalElement = screen.getByRole('dialog')
+            fireEvent.keyDown(modalElement, { key: 'Enter', code: 'Enter' })
+            expect(onCloseMock).not.toHaveBeenCalled()
+        })
+
+        it('does not close when "SpaceBar" is pressed', () => {
+            const onCloseMock = jest.fn()
+            render(<Modal onClose={onCloseMock} />)
+
+            const modalElement = screen.getByRole('dialog')
+            fireEvent.keyDown(modalElement, { key: ' ', code: ' ' })
+            expect(onCloseMock).not.toHaveBeenCalled()
+        })
+
+        it('has a close button with proper accessibility attributes', async () => {
+            render(<CloseButton />)
+            const closeButton = await screen.findByLabelText(
+                /Close modal dialog/
+            )
+
+            expect(closeButton).toBeInTheDocument()
+            expect(closeButton.tagName).toBe('BUTTON')
+        })
+    })
+
     describe('Regular dimensions', () => {
         it('has the correct dimension styles in its default state', () => {
             render(<Modal />)