@atlaskit/drawer 7.5.5 → 7.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/drawer
 
+## 7.6.0
+
+### Minor Changes
+
+- [`288b53175c0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/288b53175c0) - [ux] We are testing focus trap behavior for drawer in screen reader mode behind a feature flag. Now focus is set to first element and does not go beyond the content of the modal dialog. If this fix is successful, it will be available in a later release.
+
 ## 7.5.5
 
 ### Patch Changes

package/dist/cjs/components/index.js

@@ -27,7 +27,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
 var packageName = "@atlaskit/drawer";
-var packageVersion = "7.5.5";
+var packageVersion = "7.6.0";
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({
@@ -128,7 +128,9 @@ var DrawerBase = /*#__PURE__*/function (_Component) {
         shouldReturnFocus = _this$props3.shouldReturnFocus,
         overrides = _this$props3.overrides,
         _this$props3$zIndex = _this$props3.zIndex,
-        zIndex = _this$props3$zIndex === void 0 ? 'unset' : _this$props3$zIndex;
+        zIndex = _this$props3$zIndex === void 0 ? 'unset' : _this$props3$zIndex,
+        label = _this$props3.label,
+        titleId = _this$props3.titleId;
       return /*#__PURE__*/_react.default.createElement(_portal.default, {
         zIndex: zIndex
       }, /*#__PURE__*/_react.default.createElement(_blanket.default, {
@@ -143,6 +145,8 @@ var DrawerBase = /*#__PURE__*/function (_Component) {
         onCloseComplete: onCloseComplete,
         onOpenComplete: onOpenComplete,
         width: width,
+        label: label,
+        titleId: titleId,
         shouldUnmountOnExit: shouldUnmountOnExit
         // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
         ,

package/dist/cjs/components/primitives/drawer-wrapper.js

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.wrapperWidth = exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _useCallbackRef = require("use-callback-ref");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _tokens = require("@atlaskit/tokens");
 var _usePreventProgrammaticScroll = _interopRequireDefault(require("./hooks/use-prevent-programmatic-scroll"));
@@ -50,7 +52,9 @@ var DrawerWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, scrollRe
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? 'narrow' : _ref$width,
     testId = _ref.testId,
-    drawerRef = _ref.drawerRef;
+    drawerRef = _ref.drawerRef,
+    label = _ref.label,
+    titleId = _ref.titleId;
   /**
    * We use a callback ref to assign the `<Content />` component to the forwarded `scrollRef`.
    * This ref comes from `react-scrolllock` to allow touch scrolling, eg.: `<ScrollLock><TouchScrollable>{children}</TouchScrollable><ScrollLock>`
@@ -67,13 +71,19 @@ var DrawerWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, scrollRe
   }, [scrollRef]);
   var ref = (0, _useCallbackRef.useMergeRefs)([drawerRef, assignSecondChildRef]);
   (0, _usePreventProgrammaticScroll.default)();
-  return (0, _react2.jsx)("div", {
+  var modalDialogAttributes = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc') && {
+    'aria-modal': true,
+    role: 'dialog',
+    'aria-label': label,
+    'aria-labelledby': titleId
+  };
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: wrapperStyles,
     style: wrapperWidth[width],
     className: className,
     "data-testid": testId,
     ref: ref
-  }, children);
+  }, modalDialogAttributes), children);
 });
 var _default = DrawerWrapper;
 exports.default = _default;

package/dist/cjs/components/primitives/index.js

@@ -63,7 +63,9 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
     shouldReturnFocus = _ref2.shouldReturnFocus,
     autoFocusFirstElem = _ref2.autoFocusFirstElem,
     isFocusLockEnabled = _ref2.isFocusLockEnabled,
-    width = _ref2.width;
+    width = _ref2.width,
+    label = _ref2.label,
+    titleId = _ref2.titleId;
   var getOverrides = (0, _utils.createExtender)(defaults, overrides);
   var _getOverrides = getOverrides('Sidebar'),
     Sidebar = _getOverrides.component,
@@ -97,7 +99,9 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       className: className,
       width: width,
       testId: testId,
-      drawerRef: drawerRef
+      drawerRef: drawerRef,
+      label: label,
+      titleId: titleId
     }, (0, _react2.jsx)(Sidebar, sideBarOverrides, (0, _react2.jsx)(_iconButton.default, {
       onClick: onClose,
       testId: testId && 'DrawerPrimitiveSidebarCloseButton'

package/dist/cjs/constants.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.widths = exports.transitionTimingFunction = exports.transitionDurationMs = exports.transitionDuration = exports.defaultFocusLockSettings = exports.animationTimingFunction = void 0;
 var _curves = require("@atlaskit/motion/curves");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var transitionDuration = '0.22s';
 exports.transitionDuration = transitionDuration;
 var transitionDurationMs = 220;
@@ -20,6 +21,6 @@ exports.animationTimingFunction = animationTimingFunction;
 var defaultFocusLockSettings = {
   isFocusLockEnabled: true,
   shouldReturnFocus: true,
-  autoFocusFirstElem: false
+  autoFocusFirstElem: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc') || false
 };
 exports.defaultFocusLockSettings = defaultFocusLockSettings;

package/dist/es2019/components/index.js

@@ -8,7 +8,7 @@ import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
 import DrawerPrimitive from './primitives';
 const packageName = "@atlaskit/drawer";
-const packageVersion = "7.5.5";
+const packageVersion = "7.6.0";
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
   action: 'dismissed',
@@ -96,7 +96,9 @@ export class DrawerBase extends Component {
       isFocusLockEnabled,
       shouldReturnFocus,
       overrides,
-      zIndex = 'unset'
+      zIndex = 'unset',
+      label,
+      titleId
     } = this.props;
     return /*#__PURE__*/React.createElement(Portal, {
       zIndex: zIndex
@@ -112,6 +114,8 @@ export class DrawerBase extends Component {
       onCloseComplete: onCloseComplete,
       onOpenComplete: onOpenComplete,
       width: width,
+      label: label,
+      titleId: titleId,
       shouldUnmountOnExit: shouldUnmountOnExit
       // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
       ,

package/dist/es2019/components/primitives/drawer-wrapper.js

@@ -1,8 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-
 import { forwardRef, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useMergeRefs } from 'use-callback-ref';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N0 } from '@atlaskit/theme/colors';
 import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 import usePreventProgrammaticScroll from './hooks/use-prevent-programmatic-scroll';
@@ -42,7 +43,9 @@ const DrawerWrapper = /*#__PURE__*/forwardRef(({
   className,
   width = 'narrow',
   testId,
-  drawerRef
+  drawerRef,
+  label,
+  titleId
 }, scrollRef) => {
   /**
    * We use a callback ref to assign the `<Content />` component to the forwarded `scrollRef`.
@@ -60,12 +63,18 @@ const DrawerWrapper = /*#__PURE__*/forwardRef(({
   }, [scrollRef]);
   const ref = useMergeRefs([drawerRef, assignSecondChildRef]);
   usePreventProgrammaticScroll();
-  return jsx("div", {
+  const modalDialogAttributes = getBooleanFF('platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc') && {
+    'aria-modal': true,
+    role: 'dialog',
+    'aria-label': label,
+    'aria-labelledby': titleId
+  };
+  return jsx("div", _extends({
     css: wrapperStyles,
     style: wrapperWidth[width],
     className: className,
     "data-testid": testId,
     ref: ref
-  }, children);
+  }, modalDialogAttributes), children);
 });
 export default DrawerWrapper;

package/dist/es2019/components/primitives/index.js

@@ -58,7 +58,9 @@ const DrawerPrimitive = ({
   shouldReturnFocus,
   autoFocusFirstElem,
   isFocusLockEnabled,
-  width
+  width,
+  label,
+  titleId
 }) => {
   const getOverrides = createExtender(defaults, overrides);
   const {
@@ -95,7 +97,9 @@ const DrawerPrimitive = ({
     className: className,
     width: width,
     testId: testId,
-    drawerRef: drawerRef
+    drawerRef: drawerRef,
+    label: label,
+    titleId: titleId
   }, jsx(Sidebar, sideBarOverrides, jsx(IconButton, {
     onClick: onClose,
     testId: testId && 'DrawerPrimitiveSidebarCloseButton'

package/dist/es2019/constants.js

@@ -1,4 +1,5 @@
 import { easeOut } from '@atlaskit/motion/curves';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const transitionDuration = '0.22s';
 export const transitionDurationMs = 220;
 export const transitionTimingFunction = easeOut;
@@ -7,5 +8,5 @@ export const animationTimingFunction = () => easeOut;
 export const defaultFocusLockSettings = {
   isFocusLockEnabled: true,
   shouldReturnFocus: true,
-  autoFocusFirstElem: false
+  autoFocusFirstElem: getBooleanFF('platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc') || false
 };

package/dist/esm/components/index.js

@@ -18,7 +18,7 @@ import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
 import DrawerPrimitive from './primitives';
 var packageName = "@atlaskit/drawer";
-var packageVersion = "7.5.5";
+var packageVersion = "7.6.0";
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({
@@ -119,7 +119,9 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
         shouldReturnFocus = _this$props3.shouldReturnFocus,
         overrides = _this$props3.overrides,
         _this$props3$zIndex = _this$props3.zIndex,
-        zIndex = _this$props3$zIndex === void 0 ? 'unset' : _this$props3$zIndex;
+        zIndex = _this$props3$zIndex === void 0 ? 'unset' : _this$props3$zIndex,
+        label = _this$props3.label,
+        titleId = _this$props3.titleId;
       return /*#__PURE__*/React.createElement(Portal, {
         zIndex: zIndex
       }, /*#__PURE__*/React.createElement(Blanket, {
@@ -134,6 +136,8 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
         onCloseComplete: onCloseComplete,
         onOpenComplete: onOpenComplete,
         width: width,
+        label: label,
+        titleId: titleId,
         shouldUnmountOnExit: shouldUnmountOnExit
         // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
         ,

package/dist/esm/components/primitives/drawer-wrapper.js

@@ -1,10 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _css;
 /** @jsx jsx */
-
 import { forwardRef, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useMergeRefs } from 'use-callback-ref';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N0 } from '@atlaskit/theme/colors';
 import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 import usePreventProgrammaticScroll from './hooks/use-prevent-programmatic-scroll';
@@ -43,7 +44,9 @@ var DrawerWrapper = /*#__PURE__*/forwardRef(function (_ref, scrollRef) {
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? 'narrow' : _ref$width,
     testId = _ref.testId,
-    drawerRef = _ref.drawerRef;
+    drawerRef = _ref.drawerRef,
+    label = _ref.label,
+    titleId = _ref.titleId;
   /**
    * We use a callback ref to assign the `<Content />` component to the forwarded `scrollRef`.
    * This ref comes from `react-scrolllock` to allow touch scrolling, eg.: `<ScrollLock><TouchScrollable>{children}</TouchScrollable><ScrollLock>`
@@ -60,12 +63,18 @@ var DrawerWrapper = /*#__PURE__*/forwardRef(function (_ref, scrollRef) {
   }, [scrollRef]);
   var ref = useMergeRefs([drawerRef, assignSecondChildRef]);
   usePreventProgrammaticScroll();
-  return jsx("div", {
+  var modalDialogAttributes = getBooleanFF('platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc') && {
+    'aria-modal': true,
+    role: 'dialog',
+    'aria-label': label,
+    'aria-labelledby': titleId
+  };
+  return jsx("div", _extends({
     css: wrapperStyles,
     style: wrapperWidth[width],
     className: className,
     "data-testid": testId,
     ref: ref
-  }, children);
+  }, modalDialogAttributes), children);
 });
 export default DrawerWrapper;

package/dist/esm/components/primitives/index.js

@@ -59,7 +59,9 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
     shouldReturnFocus = _ref2.shouldReturnFocus,
     autoFocusFirstElem = _ref2.autoFocusFirstElem,
     isFocusLockEnabled = _ref2.isFocusLockEnabled,
-    width = _ref2.width;
+    width = _ref2.width,
+    label = _ref2.label,
+    titleId = _ref2.titleId;
   var getOverrides = createExtender(defaults, overrides);
   var _getOverrides = getOverrides('Sidebar'),
     Sidebar = _getOverrides.component,
@@ -93,7 +95,9 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       className: className,
       width: width,
       testId: testId,
-      drawerRef: drawerRef
+      drawerRef: drawerRef,
+      label: label,
+      titleId: titleId
     }, jsx(Sidebar, sideBarOverrides, jsx(IconButton, {
       onClick: onClose,
       testId: testId && 'DrawerPrimitiveSidebarCloseButton'

package/dist/esm/constants.js

@@ -1,4 +1,5 @@
 import { easeOut } from '@atlaskit/motion/curves';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var transitionDuration = '0.22s';
 export var transitionDurationMs = 220;
 export var transitionTimingFunction = easeOut;
@@ -9,5 +10,5 @@ export var animationTimingFunction = function animationTimingFunction() {
 export var defaultFocusLockSettings = {
   isFocusLockEnabled: true,
   shouldReturnFocus: true,
-  autoFocusFirstElem: false
+  autoFocusFirstElem: getBooleanFF('platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc') || false
 };

package/dist/types/components/index.d.ts

@@ -22,10 +22,10 @@ export declare class DrawerBase extends Component<DrawerProps, {
     handleKeyDown: (event: KeyboardEvent) => void;
     render(): JSX.Element | null;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen"> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | keyof import("./types").DrawerLabel> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
     autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
     isFocusLockEnabled?: boolean | undefined;
     shouldReturnFocus?: boolean | undefined;
     width: DrawerWidth;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings | keyof import("./types").DrawerLabel> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/primitives/drawer-wrapper.d.ts

@@ -2,7 +2,7 @@
 import { ReactElement, Ref } from 'react';
 import { DrawerPrimitiveProps, Widths } from '../types';
 export declare const wrapperWidth: Widths;
-interface FocusLockRefTargetProps extends Pick<DrawerPrimitiveProps, 'width' | 'testId'> {
+interface FocusLockRefTargetProps extends Pick<DrawerPrimitiveProps, 'width' | 'testId' | 'label' | 'titleId'> {
     /**
      * This must have two children explicitly as we target the second child as the Content.
      */

package/dist/types/components/primitives/index.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { DrawerPrimitiveProps } from '../types';
-declare const DrawerPrimitive: ({ children, icon: Icon, onClose, onCloseComplete, onOpenComplete, overrides, testId, in: isOpen, shouldReturnFocus, autoFocusFirstElem, isFocusLockEnabled, width, }: DrawerPrimitiveProps) => jsx.JSX.Element;
+declare const DrawerPrimitive: ({ children, icon: Icon, onClose, onCloseComplete, onOpenComplete, overrides, testId, in: isOpen, shouldReturnFocus, autoFocusFirstElem, isFocusLockEnabled, width, label, titleId, }: DrawerPrimitiveProps) => jsx.JSX.Element;
 export default DrawerPrimitive;

package/dist/types/components/types.d.ts

@@ -54,6 +54,18 @@ export interface BaseProps {
      */
     overrides?: OverridesType;
 }
+export interface DrawerLabel {
+    /**
+     * Refers to an aria-label attribute. Sets an accessible name for drawer wrapper to announce it to users of assistive technology.
+     * Usage of either this, or the `titleId` attribute is strongly recommended.
+     */
+    label?: string;
+    /**
+     * Id referenced by the drawer wrapper's aria-labelledby attribute. This id should be assigned to the drawer title element.
+     * Usage of either this, or the `label` attribute is strongly recommended.
+     */
+    titleId?: string;
+}
 export type DefaultsType = {
     Sidebar: {
         component: React.ComponentType<SidebarProps>;
@@ -96,11 +108,11 @@ export interface ContentProps extends React.HTMLProps<HTMLDivElement> {
     cssFn: (defaultStyles: CSSObject) => CSSObject;
 }
 export type ContentCSSProps = Omit<ContentProps, 'cssFn'>;
-export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings {
+export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings, DrawerLabel {
     in: boolean;
     onClose: (event: SyntheticEvent<HTMLElement>) => void;
 }
-export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsProps & {
+export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsProps & DrawerLabel & {
     /**
      * Callback function called while the drawer is displayed and `keydown` event is triggered.
      */
@@ -122,7 +134,7 @@ export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsPro
 };
 export interface FocusLockSettings {
     /**
-     * Controls whether to focus the first tabbable element inside the focus lock.
+     * Controls whether to focus the first tabbable element inside the focus lock. Set to `true` by default.
      */
     autoFocusFirstElem?: boolean | (() => HTMLElement | null);
     /**
@@ -130,14 +142,14 @@ export interface FocusLockSettings {
      */
     isFocusLockEnabled?: boolean;
     /**
-     * Whether to return the focus to the previous active element on closing the drawer.
+     * Controls whether to return the focus to the previous active element on closing the drawer. Set to `true` by default.
      */
     shouldReturnFocus?: boolean;
 }
 export interface FocusLockProps extends FocusLockSettings {
     /**
      * Content inside the focus lock.
-     * Must strictly be a ReactElement and it *must* be implemented to take a `ref` passed from `react-scrolllock` to enable Touch Scrolling.
+     * Must strictly be a ReactElement and it *must* be implemented to take a `ref` passed from `react-scrollock` to enable Touch Scrolling.
      */
     children?: ReactElement;
 }

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

@@ -22,10 +22,10 @@ export declare class DrawerBase extends Component<DrawerProps, {
     handleKeyDown: (event: KeyboardEvent) => void;
     render(): JSX.Element | null;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen"> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | keyof import("./types").DrawerLabel> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
     autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
     isFocusLockEnabled?: boolean | undefined;
     shouldReturnFocus?: boolean | undefined;
     width: DrawerWidth;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings | keyof import("./types").DrawerLabel> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/components/primitives/drawer-wrapper.d.ts

@@ -2,7 +2,7 @@
 import { ReactElement, Ref } from 'react';
 import { DrawerPrimitiveProps, Widths } from '../types';
 export declare const wrapperWidth: Widths;
-interface FocusLockRefTargetProps extends Pick<DrawerPrimitiveProps, 'width' | 'testId'> {
+interface FocusLockRefTargetProps extends Pick<DrawerPrimitiveProps, 'width' | 'testId' | 'label' | 'titleId'> {
     /**
      * This must have two children explicitly as we target the second child as the Content.
      */

package/dist/types-ts4.5/components/primitives/index.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { DrawerPrimitiveProps } from '../types';
-declare const DrawerPrimitive: ({ children, icon: Icon, onClose, onCloseComplete, onOpenComplete, overrides, testId, in: isOpen, shouldReturnFocus, autoFocusFirstElem, isFocusLockEnabled, width, }: DrawerPrimitiveProps) => jsx.JSX.Element;
+declare const DrawerPrimitive: ({ children, icon: Icon, onClose, onCloseComplete, onOpenComplete, overrides, testId, in: isOpen, shouldReturnFocus, autoFocusFirstElem, isFocusLockEnabled, width, label, titleId, }: DrawerPrimitiveProps) => jsx.JSX.Element;
 export default DrawerPrimitive;

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

@@ -54,6 +54,18 @@ export interface BaseProps {
      */
     overrides?: OverridesType;
 }
+export interface DrawerLabel {
+    /**
+     * Refers to an aria-label attribute. Sets an accessible name for drawer wrapper to announce it to users of assistive technology.
+     * Usage of either this, or the `titleId` attribute is strongly recommended.
+     */
+    label?: string;
+    /**
+     * Id referenced by the drawer wrapper's aria-labelledby attribute. This id should be assigned to the drawer title element.
+     * Usage of either this, or the `label` attribute is strongly recommended.
+     */
+    titleId?: string;
+}
 export type DefaultsType = {
     Sidebar: {
         component: React.ComponentType<SidebarProps>;
@@ -96,11 +108,11 @@ export interface ContentProps extends React.HTMLProps<HTMLDivElement> {
     cssFn: (defaultStyles: CSSObject) => CSSObject;
 }
 export type ContentCSSProps = Omit<ContentProps, 'cssFn'>;
-export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings {
+export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings, DrawerLabel {
     in: boolean;
     onClose: (event: SyntheticEvent<HTMLElement>) => void;
 }
-export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsProps & {
+export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsProps & DrawerLabel & {
     /**
      * Callback function called while the drawer is displayed and `keydown` event is triggered.
      */
@@ -122,7 +134,7 @@ export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsPro
 };
 export interface FocusLockSettings {
     /**
-     * Controls whether to focus the first tabbable element inside the focus lock.
+     * Controls whether to focus the first tabbable element inside the focus lock. Set to `true` by default.
      */
     autoFocusFirstElem?: boolean | (() => HTMLElement | null);
     /**
@@ -130,14 +142,14 @@ export interface FocusLockSettings {
      */
     isFocusLockEnabled?: boolean;
     /**
-     * Whether to return the focus to the previous active element on closing the drawer.
+     * Controls whether to return the focus to the previous active element on closing the drawer. Set to `true` by default.
      */
     shouldReturnFocus?: boolean;
 }
 export interface FocusLockProps extends FocusLockSettings {
     /**
      * Content inside the focus lock.
-     * Must strictly be a ReactElement and it *must* be implemented to take a `ref` passed from `react-scrolllock` to enable Touch Scrolling.
+     * Must strictly be a ReactElement and it *must* be implemented to take a `ref` passed from `react-scrollock` to enable Touch Scrolling.
      */
     children?: ReactElement;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/drawer",
-  "version": "7.5.5",
+  "version": "7.6.0",
   "description": "A drawer is a panel that slides in from the left side of the screen.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,9 +37,10 @@
     "@atlaskit/blanket": "^12.4.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/motion": "^1.4.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/portal": "^4.3.0",
-    "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.18.0",
+    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/tokens": "^1.22.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -54,12 +55,14 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
     "lodash": "^4.17.21",
@@ -90,5 +93,10 @@
       ]
     }
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "platform-feature-flags": {
+    "platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc": {
+      "type": "boolean"
+    }
+  }
 }

package/report.api.md

@@ -65,6 +65,7 @@ const _default: React_2.ForwardRefExoticComponent<
       | 'shouldUnmountOnExit'
       | 'testId'
       | 'zIndex'
+      | keyof DrawerLabel
     > &
       Partial<
         Pick<
@@ -102,6 +103,7 @@ const _default: React_2.ForwardRefExoticComponent<
     | 'testId'
     | 'width'
     | 'zIndex'
+    | keyof DrawerLabel
     | keyof FocusLockSettings
   > &
     React_2.RefAttributes<any>
@@ -120,6 +122,12 @@ export type DefaultsType = {
   };
 };
 
+// @public (undocumented)
+interface DrawerLabel {
+  label?: string;
+  titleId?: string;
+}
+
 // @public (undocumented)
 export type DrawerPrimitiveDefaults = Pick<DefaultsType, 'Content' | 'Sidebar'>;
 
@@ -130,7 +138,10 @@ export type DrawerPrimitiveOverrides = Pick<
 >;
 
 // @public (undocumented)
-export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings {
+export interface DrawerPrimitiveProps
+  extends BaseProps,
+    FocusLockSettings,
+    DrawerLabel {
   // (undocumented)
   in: boolean;
   // (undocumented)
@@ -140,7 +151,8 @@ export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings {
 // @public (undocumented)
 export type DrawerProps = BaseProps &
   FocusLockSettings &
-  WithAnalyticsEventsProps & {
+  WithAnalyticsEventsProps &
+  DrawerLabel & {
     onKeyDown?: (event: SyntheticEvent) => void;
     onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent: any) => void;
     isOpen: boolean;

package/tmp/api-report-tmp.d.ts

@@ -39,12 +39,12 @@ export interface ContentProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 // @public (undocumented)
-const _default: React_2.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof WithAnalyticsEventsProps>, "children" | "icon" | "isOpen" | "onClose" | "onCloseComplete" | "onKeyDown" | "onOpenComplete" | "overrides" | "shouldUnmountOnExit" | "testId" | "zIndex"> & Partial<Pick<Omit<DrawerProps, keyof WithAnalyticsEventsProps>, "width" | keyof FocusLockSettings>> & Partial<Pick<{
+const _default: React_2.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof WithAnalyticsEventsProps>, "children" | "icon" | "isOpen" | "onClose" | "onCloseComplete" | "onKeyDown" | "onOpenComplete" | "overrides" | "shouldUnmountOnExit" | "testId" | "zIndex" | keyof DrawerLabel> & Partial<Pick<Omit<DrawerProps, keyof WithAnalyticsEventsProps>, "width" | keyof FocusLockSettings>> & Partial<Pick<{
     autoFocusFirstElem?: (() => HTMLElement | null) | boolean | undefined;
     isFocusLockEnabled?: boolean | undefined;
     shouldReturnFocus?: boolean | undefined;
     width: DrawerWidth;
-}, never>> & React_2.RefAttributes<any> & WithContextProps, "analyticsContext" | "children" | "icon" | "isOpen" | "key" | "onClose" | "onCloseComplete" | "onKeyDown" | "onOpenComplete" | "overrides" | "shouldUnmountOnExit" | "testId" | "width" | "zIndex" | keyof FocusLockSettings> & React_2.RefAttributes<any>>;
+}, never>> & React_2.RefAttributes<any> & WithContextProps, "analyticsContext" | "children" | "icon" | "isOpen" | "key" | "onClose" | "onCloseComplete" | "onKeyDown" | "onOpenComplete" | "overrides" | "shouldUnmountOnExit" | "testId" | "width" | "zIndex" | keyof DrawerLabel| keyof FocusLockSettings > & React_2.RefAttributes<any>>;
 export default _default;
 
 // @public (undocumented)
@@ -59,6 +59,12 @@ export type DefaultsType = {
     };
 };
 
+// @public (undocumented)
+interface DrawerLabel {
+    label?: string;
+    titleId?: string;
+}
+
 // @public (undocumented)
 export type DrawerPrimitiveDefaults = Pick<DefaultsType, 'Content' | 'Sidebar'>;
 
@@ -66,7 +72,7 @@ export type DrawerPrimitiveDefaults = Pick<DefaultsType, 'Content' | 'Sidebar'>;
 export type DrawerPrimitiveOverrides = Pick<OverridesType, 'Content' | 'Sidebar'>;
 
 // @public (undocumented)
-export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings {
+export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings, DrawerLabel {
     // (undocumented)
     in: boolean;
     // (undocumented)
@@ -74,7 +80,7 @@ export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings {
 }
 
 // @public (undocumented)
-export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsProps & {
+export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsProps & DrawerLabel & {
     onKeyDown?: (event: SyntheticEvent) => void;
     onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent: any) => void;
     isOpen: boolean;