@atlaskit/modal-dialog 14.18.3 → 15.0.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/modal-dialog
 
+## 15.0.0
+
+### Major Changes
+
+- [`babe23b40c154`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/babe23b40c154) -
+  Removes the `boolean` type for the `autoFocus` prop in the modal dialog. This improves the
+  accessibility of the modal dialog by ensuring focus always moves to the first interactive element,
+  as per the WCAG accessibility guidelines for modal dialogs.
+
+  You can run the included codemod to remove all boolean instances of `autoFocus`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.18.3
 
 ### Patch Changes

package/codemods/{not-yet-boolean-autofocus-removal.tsx → 15.0.0-boolean-autofocus-removal.tsx}

@@ -1,9 +1,9 @@
 import type { API, FileInfo, Options } from 'jscodeshift';
 
-import { removeAutoFocus } from './migrations/remove-props';
+import { removeBooleanAutoFocus } from './migrations/remove-props';
 import { createTransformer } from './utils/create-transformer';
 
 const transformer: (fileInfo: FileInfo, { jscodeshift }: API, options: Options) => string =
-	createTransformer('@atlaskit/modal-dialog', [removeAutoFocus]);
+	createTransformer('@atlaskit/modal-dialog', [removeBooleanAutoFocus]);
 
 export default transformer;

package/codemods/__tests__/{not-yet-boolean-autofocus-removal.tsx → next-boolean-autofocus-removal.tsx}

@@ -1,6 +1,6 @@
 jest.autoMockOff();
 
-import transformer from '../not-yet-boolean-autofocus-removal';
+import transformer from '../15.0.0-boolean-autofocus-removal';
 
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 

package/codemods/migrations/remove-props.tsx

@@ -1,6 +1,6 @@
 import { createRemoveFuncIfBooleanFor } from '../utils/create-remove-func-if-boolean-for';
 
-export const removeAutoFocus: (
+export const removeBooleanAutoFocus: (
 	j: import('jscodeshift/src/core').JSCodeshift,
 	source: import('jscodeshift/src/Collection').Collection<Node>,
 ) => void = createRemoveFuncIfBooleanFor('@atlaskit/modal-dialog', 'ModalDialog', 'autoFocus');

package/dist/cjs/internal/components/modal-dialog.js

@@ -65,7 +65,7 @@ var ModalDialog = function ModalDialog(props) {
     _props$shouldScrollIn = props.shouldScrollInViewport,
     shouldScrollInViewport = _props$shouldScrollIn === void 0 ? false : _props$shouldScrollIn,
     shouldCloseOnEscapePress = props.shouldCloseOnEscapePress,
-    providedAutoFocus = props.autoFocus,
+    autoFocus = props.autoFocus,
     stackIndex = props.stackIndex,
     onClose = props.onClose,
     onCloseComplete = props.onCloseComplete,
@@ -82,10 +82,6 @@ var ModalDialog = function ModalDialog(props) {
   var id = (0, _useId.useId)();
   var titleId = "modal-dialog-title-".concat(id);
   var defaultTestId = testId || 'modal-dialog';
-  // https://product-fabric.atlassian.net/browse/DSP-24307
-  // If flag and falsy, use true instead.
-  // When we remove boolean `autoFocus`, we won't have to worry about this
-  var autoFocus = !providedAutoFocus ? true : providedAutoFocus;
   (0, _react.useEffect)(function () {
     // Modal dialogs can appear on top of iframe elements that are on another domain.
     // There is a Chrome bug where drag and drop in an element on top of a cross domain
@@ -97,7 +93,7 @@ var ModalDialog = function ModalDialog(props) {
 
     return (0, _combine.combine)((0, _element.disableDraggingToCrossOriginIFramesForElement)(), (0, _textSelection.disableDraggingToCrossOriginIFramesForTextSelection)(), (0, _external.disableDraggingToCrossOriginIFramesForExternal)());
   }, []);
-  (0, _useAutoFocus.default)((0, _typeof2.default)(autoFocus) === 'object' ? autoFocus : undefined,
+  (0, _useAutoFocus.default)(autoFocus,
   // When a user supplies  a ref to focus we enable this hook
   (0, _typeof2.default)(autoFocus) === 'object');
   var _useOnMotionFinish = (0, _useOnMotionFinish3.default)({

package/dist/cjs/internal/components/modal-wrapper.js

@@ -2,7 +2,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var _reactScrolllock = _interopRequireWildcard(require("react-scrolllock"));
 var _analyticsNext = require("@atlaskit/analytics-next");
@@ -27,7 +28,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _useModalStack = _interopRequireDefault(require("../hooks/use-modal-stack"));
 var _usePreventProgrammaticScroll = _interopRequireDefault(require("../hooks/use-prevent-programmatic-scroll"));
 var _modalDialog = _interopRequireDefault(require("./modal-dialog"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var fillScreenStyles = null;
 var allowlistElements = function allowlistElements(element, callback) {
   // Allow focus to reach elements outside the modal:
@@ -53,8 +54,7 @@ var allowlistElements = function allowlistElements(element, callback) {
  * - [Usage](https://atlassian.design/components/modal-dialog/usage)
  */
 var InternalModalWrapper = function InternalModalWrapper(props) {
-  var _props$autoFocus = props.autoFocus,
-    autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
+  var autoFocus = props.autoFocus,
     focusLockAllowlist = props.focusLockAllowlist,
     _props$shouldCloseOnE = props.shouldCloseOnEscapePress,
     shouldCloseOnEscapePress = _props$shouldCloseOnE === void 0 ? true : _props$shouldCloseOnE,
@@ -85,16 +85,14 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
   var stackIndex = stackIndexOverride || calculatedStackIndex;
   var isForeground = stackIndex === 0;
 
-  // When a user supplies a ref to focus we skip auto focus via react-focus-lock
-  // When flag is true and a ref is not supplied, autofocus is true. See https://product-fabric.atlassian.net/browse/DSP-24307
-  // When we remove boolean `autoFocus`, we won't have to worry about this
-  var autoFocusLock = typeof autoFocus === 'boolean';
+  // If no ref is provided, autofocus on first element
+  var autoFocusLock = !((0, _typeof2.default)(autoFocus) === 'object');
   var onCloseHandler = (0, _analyticsNext.usePlatformLeafEventHandler)({
     fn: providedOnClose || _noop.default,
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "0.0.0-development"
+    packageVersion: "14.18.3"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/es2019/internal/components/modal-dialog.js

@@ -53,7 +53,7 @@ const ModalDialog = props => {
     width = 'medium',
     shouldScrollInViewport = false,
     shouldCloseOnEscapePress,
-    autoFocus: providedAutoFocus,
+    autoFocus,
     stackIndex,
     onClose,
     onCloseComplete,
@@ -69,10 +69,6 @@ const ModalDialog = props => {
   const id = useId();
   const titleId = `modal-dialog-title-${id}`;
   const defaultTestId = testId || 'modal-dialog';
-  // https://product-fabric.atlassian.net/browse/DSP-24307
-  // If flag and falsy, use true instead.
-  // When we remove boolean `autoFocus`, we won't have to worry about this
-  const autoFocus = !providedAutoFocus ? true : providedAutoFocus;
   useEffect(() => {
     // Modal dialogs can appear on top of iframe elements that are on another domain.
     // There is a Chrome bug where drag and drop in an element on top of a cross domain
@@ -84,7 +80,7 @@ const ModalDialog = props => {
 
     return combine(disableDraggingToCrossOriginIFramesForElement(), disableDraggingToCrossOriginIFramesForTextSelection(), disableDraggingToCrossOriginIFramesForExternal());
   }, []);
-  useAutoFocus(typeof autoFocus === 'object' ? autoFocus : undefined,
+  useAutoFocus(autoFocus,
   // When a user supplies  a ref to focus we enable this hook
   typeof autoFocus === 'object');
   const [motionRef, onMotionFinish] = useOnMotionFinish({

package/dist/es2019/internal/components/modal-wrapper.js

@@ -45,7 +45,7 @@ const allowlistElements = (element, callback) => {
  */
 const InternalModalWrapper = props => {
   const {
-    autoFocus = true,
+    autoFocus,
     focusLockAllowlist,
     shouldCloseOnEscapePress = true,
     shouldCloseOnOverlayClick = true,
@@ -71,16 +71,14 @@ const InternalModalWrapper = props => {
   const stackIndex = stackIndexOverride || calculatedStackIndex;
   const isForeground = stackIndex === 0;
 
-  // When a user supplies a ref to focus we skip auto focus via react-focus-lock
-  // When flag is true and a ref is not supplied, autofocus is true. See https://product-fabric.atlassian.net/browse/DSP-24307
-  // When we remove boolean `autoFocus`, we won't have to worry about this
-  const autoFocusLock = typeof autoFocus === 'boolean';
+  // If no ref is provided, autofocus on first element
+  const autoFocusLock = !(typeof autoFocus === 'object');
   const onCloseHandler = usePlatformLeafEventHandler({
     fn: providedOnClose || noop,
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "0.0.0-development"
+    packageVersion: "14.18.3"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {

package/dist/esm/internal/components/modal-dialog.js

@@ -56,7 +56,7 @@ var ModalDialog = function ModalDialog(props) {
     _props$shouldScrollIn = props.shouldScrollInViewport,
     shouldScrollInViewport = _props$shouldScrollIn === void 0 ? false : _props$shouldScrollIn,
     shouldCloseOnEscapePress = props.shouldCloseOnEscapePress,
-    providedAutoFocus = props.autoFocus,
+    autoFocus = props.autoFocus,
     stackIndex = props.stackIndex,
     onClose = props.onClose,
     onCloseComplete = props.onCloseComplete,
@@ -73,10 +73,6 @@ var ModalDialog = function ModalDialog(props) {
   var id = useId();
   var titleId = "modal-dialog-title-".concat(id);
   var defaultTestId = testId || 'modal-dialog';
-  // https://product-fabric.atlassian.net/browse/DSP-24307
-  // If flag and falsy, use true instead.
-  // When we remove boolean `autoFocus`, we won't have to worry about this
-  var autoFocus = !providedAutoFocus ? true : providedAutoFocus;
   useEffect(function () {
     // Modal dialogs can appear on top of iframe elements that are on another domain.
     // There is a Chrome bug where drag and drop in an element on top of a cross domain
@@ -88,7 +84,7 @@ var ModalDialog = function ModalDialog(props) {
 
     return combine(disableDraggingToCrossOriginIFramesForElement(), disableDraggingToCrossOriginIFramesForTextSelection(), disableDraggingToCrossOriginIFramesForExternal());
   }, []);
-  useAutoFocus(_typeof(autoFocus) === 'object' ? autoFocus : undefined,
+  useAutoFocus(autoFocus,
   // When a user supplies  a ref to focus we enable this hook
   _typeof(autoFocus) === 'object');
   var _useOnMotionFinish = useOnMotionFinish({

package/dist/esm/internal/components/modal-wrapper.js

@@ -1,5 +1,6 @@
 /* modal-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
+import _typeof from "@babel/runtime/helpers/typeof";
 import "./modal-wrapper.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -44,8 +45,7 @@ var allowlistElements = function allowlistElements(element, callback) {
  * - [Usage](https://atlassian.design/components/modal-dialog/usage)
  */
 var InternalModalWrapper = function InternalModalWrapper(props) {
-  var _props$autoFocus = props.autoFocus,
-    autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
+  var autoFocus = props.autoFocus,
     focusLockAllowlist = props.focusLockAllowlist,
     _props$shouldCloseOnE = props.shouldCloseOnEscapePress,
     shouldCloseOnEscapePress = _props$shouldCloseOnE === void 0 ? true : _props$shouldCloseOnE,
@@ -76,16 +76,14 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
   var stackIndex = stackIndexOverride || calculatedStackIndex;
   var isForeground = stackIndex === 0;
 
-  // When a user supplies a ref to focus we skip auto focus via react-focus-lock
-  // When flag is true and a ref is not supplied, autofocus is true. See https://product-fabric.atlassian.net/browse/DSP-24307
-  // When we remove boolean `autoFocus`, we won't have to worry about this
-  var autoFocusLock = typeof autoFocus === 'boolean';
+  // If no ref is provided, autofocus on first element
+  var autoFocusLock = !(_typeof(autoFocus) === 'object');
   var onCloseHandler = usePlatformLeafEventHandler({
     fn: providedOnClose || noop,
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "0.0.0-development"
+    packageVersion: "14.18.3"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/types/types.d.ts

@@ -19,10 +19,8 @@ export interface ModalDialogProps {
      * accessibility regressions. Pass an element `ref` to focus on a specific element.
      *
      * Default value is `true`.
-     *
-     * @deprecated {@link https://hello.jira.atlassian.cloud/browse/ENGHEALTH-28588 Learn more about why `false` should not be used and will be removed.}
      */
-    autoFocus?: boolean | RefObject<HTMLElement | null | undefined>;
+    autoFocus?: RefObject<HTMLElement | null | undefined>;
     /**
      * Contents of the modal dialog.
      */

package/dist/types-ts4.5/types.d.ts

@@ -19,10 +19,8 @@ export interface ModalDialogProps {
      * accessibility regressions. Pass an element `ref` to focus on a specific element.
      *
      * Default value is `true`.
-     *
-     * @deprecated {@link https://hello.jira.atlassian.cloud/browse/ENGHEALTH-28588 Learn more about why `false` should not be used and will be removed.}
      */
-    autoFocus?: boolean | RefObject<HTMLElement | null | undefined>;
+    autoFocus?: RefObject<HTMLElement | null | undefined>;
     /**
      * Contents of the modal dialog.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "14.18.3",
+	"version": "15.0.0",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/icon": "^34.3.0",
+		"@atlaskit/icon": "^34.4.0",
 		"@atlaskit/layering": "^3.7.0",
 		"@atlaskit/motion": "^6.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -79,7 +79,7 @@
 		"@atlaskit/radio": "^8.6.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/select": "^21.10.0",
-		"@atlaskit/spotlight": "^0.13.0",
+		"@atlaskit/spotlight": "^0.14.0",
 		"@atlaskit/textfield": "^8.3.0",
 		"@atlaskit/tooltip": "^22.0.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",