@atlaskit/modal-dialog 12.6.7 → 12.6.9

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/modal-dialog
 
+## 12.6.9
+
+### Patch Changes
+
+- [`c8d28bd7519`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c8d28bd7519) - Adds role of region to modal dialog body when scrollable
+
+## 12.6.8
+
+### Patch Changes
+
+- [`d6f63fa1abc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6f63fa1abc) - Adds support for surface detection when using design tokens. Enabling children to be styled with the Modal’s surface color when using the `utility.elevation.surface.current` design token.
+- Updated dependencies
+
 ## 12.6.7
 
 ### Patch Changes

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

@@ -18,6 +18,7 @@ var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
+var _tokens = require("@atlaskit/tokens");
 var _constants = require("../constants");
 var _context = require("../context");
 var _useOnMotionFinish3 = _interopRequireDefault(require("../hooks/use-on-motion-finish"));
@@ -36,9 +37,8 @@ var dialogStyles = (0, _react2.css)((_css = {
   flex: '0 1 auto',
   flexDirection: 'column',
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
-  color: _constants.textColor,
-  pointerEvents: 'auto'
-}, (0, _defineProperty2.default)(_css, _primitives.media.above.xs, {
+  color: _constants.textColor
+}, (0, _defineProperty2.default)(_css, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), (0, _defineProperty2.default)(_css, "pointerEvents", 'auto'), (0, _defineProperty2.default)(_css, _primitives.media.above.xs, {
   width: 'var(--modal-dialog-width)',
   maxWidth: 'inherit',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage

package/dist/cjs/internal/components/scroll-container.js

@@ -109,8 +109,10 @@ var ScrollContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   return (0, _react2.jsx)(_focusRing.default, {
     isInset: true
   }, (0, _react2.jsx)("div", {
+    // tabindex is allowed here so that keyboard users can scroll content
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     tabIndex: showContentFocus ? 0 : undefined,
+    role: showContentFocus ? 'region' : undefined,
     "aria-label": showContentFocus ? 'Scrollable content' : undefined,
     "data-testid": testId && "".concat(testId, "--scrollable"),
     ref: (0, _mergeRefs.default)([ref, scrollableRef]),

package/dist/cjs/modal-wrapper.js

@@ -84,7 +84,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.6.7"
+    packageVersion: "12.6.9"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {

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

@@ -9,6 +9,7 @@ import FocusRing from '@atlaskit/focus-ring';
 import FadeIn from '@atlaskit/motion/fade-in';
 import { media } from '@atlaskit/primitives';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
+import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 import { borderRadius, textColor } from '../constants';
 import { ModalContext, ScrollContext } from '../context';
 import useOnMotionFinish from '../hooks/use-on-motion-finish';
@@ -26,6 +27,7 @@ const dialogStyles = css({
   flexDirection: 'column',
   backgroundColor: `var(--ds-surface-overlay, ${N0})`,
   color: textColor,
+  [CURRENT_SURFACE_CSS_VAR]: `var(--ds-surface-overlay, ${N0})`,
   pointerEvents: 'auto',
   [media.above.xs]: {
     width: 'var(--modal-dialog-width)',

package/dist/es2019/internal/components/scroll-container.js

@@ -88,8 +88,10 @@ const ScrollContainer = /*#__PURE__*/forwardRef((props, ref) => {
   return jsx(FocusRing, {
     isInset: true
   }, jsx("div", {
+    // tabindex is allowed here so that keyboard users can scroll content
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     tabIndex: showContentFocus ? 0 : undefined,
+    role: showContentFocus ? 'region' : undefined,
     "aria-label": showContentFocus ? 'Scrollable content' : undefined,
     "data-testid": testId && `${testId}--scrollable`,
     ref: mergeRefs([ref, scrollableRef]),

package/dist/es2019/modal-wrapper.js

@@ -70,7 +70,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.6.7"
+    packageVersion: "12.6.9"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {

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

@@ -13,6 +13,7 @@ import FocusRing from '@atlaskit/focus-ring';
 import FadeIn from '@atlaskit/motion/fade-in';
 import { media } from '@atlaskit/primitives';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
+import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 import { borderRadius, textColor } from '../constants';
 import { ModalContext, ScrollContext } from '../context';
 import useOnMotionFinish from '../hooks/use-on-motion-finish';
@@ -29,9 +30,8 @@ var dialogStyles = css((_css = {
   flex: '0 1 auto',
   flexDirection: 'column',
   backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
-  color: textColor,
-  pointerEvents: 'auto'
-}, _defineProperty(_css, media.above.xs, {
+  color: textColor
+}, _defineProperty(_css, CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(N0, ")")), _defineProperty(_css, "pointerEvents", 'auto'), _defineProperty(_css, media.above.xs, {
   width: 'var(--modal-dialog-width)',
   maxWidth: 'inherit',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage

package/dist/esm/internal/components/scroll-container.js

@@ -99,8 +99,10 @@ var ScrollContainer = /*#__PURE__*/forwardRef(function (props, ref) {
   return jsx(FocusRing, {
     isInset: true
   }, jsx("div", {
+    // tabindex is allowed here so that keyboard users can scroll content
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     tabIndex: showContentFocus ? 0 : undefined,
+    role: showContentFocus ? 'region' : undefined,
     "aria-label": showContentFocus ? 'Scrollable content' : undefined,
     "data-testid": testId && "".concat(testId, "--scrollable"),
     ref: mergeRefs([ref, scrollableRef]),

package/dist/esm/modal-wrapper.js

@@ -74,7 +74,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.6.7"
+    packageVersion: "12.6.9"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/modal-dialog",
-  "version": "12.6.7",
+  "version": "12.6.9",
   "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
     "@atlaskit/portal": "^4.3.0",
     "@atlaskit/primitives": "^1.2.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.15.0",
+    "@atlaskit/tokens": "^1.17.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -50,6 +50,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/button": "*",
     "@atlaskit/ssr": "*",