feat: update modal accessibility improvements

collections/forms/i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-02-21T10:19:12.883Z\n"
-"PO-Revision-Date: 2024-02-21T10:19:12.883Z\n"
+"POT-Creation-Date: 2024-02-21T15:08:47.300Z\n"
+"PO-Revision-Date: 2024-02-21T15:08:47.300Z\n"
 
 msgid "Upload file"
 msgstr "Upload file"

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, { useEffect } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { resolve } from 'styled-jsx/css'
 import { CloseButton } from './close-button.js'
 
@@ -29,19 +29,26 @@ export const Modal = ({
 }) => {
     const layerStyles = resolveLayerStyles(hide)
 
-    const handleKeyDown = (event) => {
-        if (event.key === 'Escape' && onClose) {
-            onClose()
-        }
-    }
+    const handleKeyDown = useCallback(
+        (event) => {
+            if (event.key === 'Escape' && onClose) {
+                onClose()
+            }
+        },
+        [onClose]
+    )
 
     useEffect(() => {
-        document.addEventListener('keydown', handleKeyDown)
+        if (hide) {
+            return
+        }
+        const handleKeyDownCallback = handleKeyDown
+        document.addEventListener('keydown', handleKeyDownCallback)
 
         return () => {
-            document.removeEventListener('keydown', handleKeyDown)
+            document.removeEventListener('keydown', handleKeyDownCallback)
         }
-    }, [onClose])
+    }, [handleKeyDown, hide])
 
     return (
         <Layer