@dhis2-ui/modal 9.9.0-alpha.1 → 9.9.0

package/build/cjs/modal/close-button.js

@@ -15,6 +15,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _index = _interopRequireDefault(require("../locales/index.js"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const createClickHandler = onClick => event => {
@@ -26,8 +28,10 @@ const CloseButton = _ref => {
     onClick
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("button", {
+    title: _index.default.t('Close modal dialog'),
     "data-test": "dhis2-modal-close-button",
     onClick: createClickHandler(onClick),
+    "aria-label": _index.default.t('Close modal dialog'),
     className: _style.default.dynamic([["80232614", [_uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey200, _uiConstants.theme.focus, _uiConstants.colors.grey300]]])
   }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconCross16, null), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "80232614",

package/build/cjs/modal/modal.js

@@ -19,10 +19,14 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _closeButton = require("./close-button.js");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const resolveLayerStyles = hide => ({
@@ -46,6 +50,24 @@ const Modal = _ref => {
     small
   } = _ref;
   const layerStyles = resolveLayerStyles(hide);
+  (0, _react.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 /*#__PURE__*/_react.default.createElement(_layer.Layer, {
     onBackdropClick: onClose,
     className: layerStyles.className,

package/build/cjs/modal/modal.test.js

@@ -4,11 +4,66 @@ var _react = require("@testing-library/react");
 
 var _react2 = _interopRequireDefault(require("react"));
 
+var _closeButton = require("./close-button.js");
+
 var _modal = require("./modal.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 describe('Modal', () => {
+  describe('Modal Accessibility', () => {
+    it('closes when ESC key is pressed', () => {
+      const onCloseMock = jest.fn();
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_modal.Modal, {
+        onClose: onCloseMock
+      }));
+
+      const modalElement = _react.screen.getByRole('dialog');
+
+      _react.fireEvent.keyDown(modalElement, {
+        key: 'Escape',
+        code: 'Escape'
+      });
+
+      expect(onCloseMock).toHaveBeenCalled();
+    });
+    it('does not close when "Enter" is pressed', () => {
+      const onCloseMock = jest.fn();
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_modal.Modal, {
+        onClose: onCloseMock
+      }));
+
+      const modalElement = _react.screen.getByRole('dialog');
+
+      _react.fireEvent.keyDown(modalElement, {
+        key: 'Enter',
+        code: 'Enter'
+      });
+
+      expect(onCloseMock).not.toHaveBeenCalled();
+    });
+    it('does not close when "SpaceBar" is pressed', () => {
+      const onCloseMock = jest.fn();
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_modal.Modal, {
+        onClose: onCloseMock
+      }));
+
+      const modalElement = _react.screen.getByRole('dialog');
+
+      _react.fireEvent.keyDown(modalElement, {
+        key: ' ',
+        code: ' '
+      });
+
+      expect(onCloseMock).not.toHaveBeenCalled();
+    });
+    it('has a close button with proper accessibility attributes', async () => {
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_closeButton.CloseButton, null));
+      const closeButton = await _react.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', () => {
       (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_modal.Modal, null));

package/build/es/modal/close-button.js

@@ -3,6 +3,7 @@ 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);
@@ -13,8 +14,10 @@ export const CloseButton = _ref => {
     onClick
   } = _ref;
   return /*#__PURE__*/React.createElement("button", {
+    title: i18n.t('Close modal dialog'),
     "data-test": "dhis2-modal-close-button",
     onClick: createClickHandler(onClick),
+    "aria-label": i18n.t('Close modal dialog'),
     className: _JSXStyle.dynamic([["80232614", [colors.grey700, colors.grey200, colors.grey900, colors.grey200, theme.focus, colors.grey300]]])
   }, /*#__PURE__*/React.createElement(IconCross16, null), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "80232614",

package/build/es/modal/modal.js

@@ -5,7 +5,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 { CloseButton } from './close-button.js';
 
 const resolveLayerStyles = hide => ({
@@ -29,6 +29,24 @@ export const Modal = _ref => {
     small
   } = _ref;
   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 /*#__PURE__*/React.createElement(Layer, {
     onBackdropClick: onClose,
     className: layerStyles.className,

package/build/es/modal/modal.test.js

@@ -1,7 +1,52 @@
-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( /*#__PURE__*/React.createElement(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( /*#__PURE__*/React.createElement(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( /*#__PURE__*/React.createElement(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( /*#__PURE__*/React.createElement(CloseButton, null));
+      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( /*#__PURE__*/React.createElement(Modal, null));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/modal",
-    "version": "9.9.0-alpha.1",
+    "version": "9.9.0",
     "description": "UI Modal",
     "repository": {
         "type": "git",
@@ -33,12 +33,12 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/card": "9.9.0-alpha.1",
-        "@dhis2-ui/center": "9.9.0-alpha.1",
-        "@dhis2-ui/layer": "9.9.0-alpha.1",
-        "@dhis2-ui/portal": "9.9.0-alpha.1",
-        "@dhis2/ui-constants": "9.9.0-alpha.1",
-        "@dhis2/ui-icons": "9.9.0-alpha.1",
+        "@dhis2-ui/card": "9.9.0",
+        "@dhis2-ui/center": "9.9.0",
+        "@dhis2-ui/layer": "9.9.0",
+        "@dhis2-ui/portal": "9.9.0",
+        "@dhis2/ui-constants": "9.9.0",
+        "@dhis2/ui-icons": "9.9.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },