@pingux/astro 1.15.0-alpha.0 → 1.15.0-alpha.1

package/lib/cjs/components/Modal/Modal.js

@@ -58,7 +58,7 @@ var _hooks = require("../../hooks");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "closeButton", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps"];
+var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -71,6 +71,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
       closeButton = props.closeButton,
+      hasAutoFocus = props.hasAutoFocus,
       hasCloseButton = props.hasCloseButton,
       id = props.id,
       isClosedOnBlur = props.isClosedOnBlur,
@@ -136,11 +137,12 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, others, containerProps), (0, _react2.jsx)(_focus.FocusScope, {
     contain: true,
     restoreFocus: true,
-    autoFocus: true
+    autoFocus: hasAutoFocus
   }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "modal.content"
   }, propsContentProps, overlayProps, dialogProps, modalProps, {
-    ref: modalRef
+    ref: modalRef,
+    "aria-modal": true
   }), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : (0, _react2.jsx)(_IconButton["default"], {
     "aria-label": "Close modal window",
     "data-id": "icon-button__close-modal-window",
@@ -160,6 +162,9 @@ Modal.propTypes = {
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: _propTypes["default"].string,
 
+  /** Whether to auto focus the first focusable element in the focus scope on mount. */
+  hasAutoFocus: _propTypes["default"].bool,
+
   /** Whether the modal has a visible close button. */
   hasCloseButton: _propTypes["default"].bool,
 

package/lib/cjs/components/Modal/tests/Modal.unit.test.js

@@ -27,7 +27,8 @@ var getComponent = function getComponent() {
 (0, _testAxe["default"])(getComponent);
 test('default modal', function () {
   getComponent();
-  expect(_testWrapper.screen.queryByRole('dialog')).toBeInTheDocument(); // Close button not rendered by default
+  expect(_testWrapper.screen.queryByRole('dialog')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('dialog')).toHaveAttribute('aria-modal', 'true'); // Close button not rendered by default
 
   expect(_testWrapper.screen.queryByRole('button')).not.toBeInTheDocument();
 });
@@ -199,4 +200,23 @@ test('should render a custom close button if hasCloseButton is true and custom b
   });
   expect(_testWrapper.screen.queryByRole('button')).not.toBeInTheDocument();
   expect(_testWrapper.screen.queryByTestId('test')).toBeInTheDocument();
+});
+test('shouldn\'t auto focus the first tabbable element', function () {
+  getComponent({
+    hasCloseButton: true
+  });
+
+  var button = _testWrapper.screen.queryByRole('button');
+
+  expect(button).not.toHaveFocus();
+});
+test('should auto focus the first tabbable element if "hasAutoFocus" is true', function () {
+  getComponent({
+    hasCloseButton: true,
+    hasAutoFocus: true
+  });
+
+  var button = _testWrapper.screen.queryByRole('button');
+
+  expect(button).toHaveFocus();
 });

package/lib/components/Modal/Modal.js

@@ -9,7 +9,7 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "closeButton", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps"];
+var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps"];
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -30,6 +30,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
       closeButton = props.closeButton,
+      hasAutoFocus = props.hasAutoFocus,
       hasCloseButton = props.hasCloseButton,
       id = props.id,
       isClosedOnBlur = props.isClosedOnBlur,
@@ -95,11 +96,12 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   }, others, containerProps), ___EmotionJSX(FocusScope, {
     contain: true,
     restoreFocus: true,
-    autoFocus: true
+    autoFocus: hasAutoFocus
   }, ___EmotionJSX(Box, _extends({
     variant: "modal.content"
   }, propsContentProps, overlayProps, dialogProps, modalProps, {
-    ref: modalRef
+    ref: modalRef,
+    "aria-modal": true
   }), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : ___EmotionJSX(IconButton, {
     "aria-label": "Close modal window",
     "data-id": "icon-button__close-modal-window",
@@ -119,6 +121,9 @@ Modal.propTypes = {
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string,
 
+  /** Whether to auto focus the first focusable element in the focus scope on mount. */
+  hasAutoFocus: PropTypes.bool,
+
   /** Whether the modal has a visible close button. */
   hasCloseButton: PropTypes.bool,
 

package/lib/components/Modal/tests/Modal.unit.test.js

@@ -18,7 +18,8 @@ var getComponent = function getComponent() {
 axeTest(getComponent);
 test('default modal', function () {
   getComponent();
-  expect(screen.queryByRole('dialog')).toBeInTheDocument(); // Close button not rendered by default
+  expect(screen.queryByRole('dialog')).toBeInTheDocument();
+  expect(screen.queryByRole('dialog')).toHaveAttribute('aria-modal', 'true'); // Close button not rendered by default
 
   expect(screen.queryByRole('button')).not.toBeInTheDocument();
 });
@@ -169,4 +170,19 @@ test('should render a custom close button if hasCloseButton is true and custom b
   });
   expect(screen.queryByRole('button')).not.toBeInTheDocument();
   expect(screen.queryByTestId('test')).toBeInTheDocument();
+});
+test('shouldn\'t auto focus the first tabbable element', function () {
+  getComponent({
+    hasCloseButton: true
+  });
+  var button = screen.queryByRole('button');
+  expect(button).not.toHaveFocus();
+});
+test('should auto focus the first tabbable element if "hasAutoFocus" is true', function () {
+  getComponent({
+    hasCloseButton: true,
+    hasAutoFocus: true
+  });
+  var button = screen.queryByRole('button');
+  expect(button).toHaveFocus();
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.15.0-alpha.0",
+  "version": "1.15.0-alpha.1",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",