@atlaskit/drawer 7.10.0 → 7.12.0

package/dist/cjs/components/blanket.js

@@ -10,8 +10,13 @@ var _react2 = require("@emotion/react");
 var _blanket = _interopRequireDefault(require("@atlaskit/blanket"));
 var _motion = require("@atlaskit/motion");
 var _constants = require("../constants");
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var blanketStyles = (0, _react2.css)({
   position: 'relative'
 });
@@ -42,14 +47,17 @@ var Blanket = function Blanket(_ref) {
     animationTimingFunction: _constants.animationTimingFunction
   }, function (_ref2) {
     var className = _ref2.className;
-    return (0, _react2.jsx)("div", {
-      css: blanketStyles,
-      className: className
-    }, (0, _react2.jsx)(_blanket.default, {
-      isTinted: true,
-      onBlanketClicked: onBlanketClicked,
-      testId: testId && testId
-    }));
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      (0, _react2.jsx)("div", {
+        css: blanketStyles,
+        className: className
+      }, (0, _react2.jsx)(_blanket.default, {
+        isTinted: true,
+        onBlanketClicked: onBlanketClicked,
+        testId: testId && testId
+      }))
+    );
   }));
 };
 var _default = exports.default = Blanket;

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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
 var packageName = "@atlaskit/drawer";
-var packageVersion = "7.10.0";
+var packageVersion = "7.12.0";
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({
@@ -120,6 +120,7 @@ var DrawerBase = exports.DrawerBase = /*#__PURE__*/function (_Component) {
         children = _this$props3.children,
         icon = _this$props3.icon,
         closeLabel = _this$props3.closeLabel,
+        scrollContentLabel = _this$props3.scrollContentLabel,
         width = _this$props3.width,
         shouldUnmountOnExit = _this$props3.shouldUnmountOnExit,
         onCloseComplete = _this$props3.onCloseComplete,
@@ -155,7 +156,8 @@ var DrawerBase = exports.DrawerBase = /*#__PURE__*/function (_Component) {
         overrides: overrides,
         autoFocusFirstElem: autoFocusFirstElem,
         isFocusLockEnabled: isFocusLockEnabled,
-        shouldReturnFocus: shouldReturnFocus
+        shouldReturnFocus: shouldReturnFocus,
+        scrollContentLabel: scrollContentLabel
       }, children));
     }
   }]);

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

@@ -6,10 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
-var _excluded = ["cssFn"];
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _excluded = ["cssFn", "scrollContentLabel"];
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var defaultStyles = {
   flex: 1,
   overflow: 'auto',
@@ -20,20 +26,41 @@ var contentCSS = function contentCSS() {
 };
 var Content = function Content(_ref) {
   var cssFn = _ref.cssFn,
+    _ref$scrollContentLab = _ref.scrollContentLabel,
+    scrollContentLabel = _ref$scrollContentLab === void 0 ? 'Scrollable content' : _ref$scrollContentLab,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (
-    /**
-     * I noticed the implementation at @atlaskit/checkbox would send the props to cssFn rather
-     * than the defaultStyles as the overrides guide suggests. I went with what the overrides
-     * guide suggested as it made more sense as a transformer of the current styles rather than
-     * a complete override with no chance of partially changing styles.
-     */
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showContentFocus = _useState2[0],
+    setContentFocus = _useState2[1];
+  var scrollableRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var setLazyContentFocus = function setLazyContentFocus() {
+      var target = scrollableRef.current;
+      target && setContentFocus(target.scrollHeight > target.clientHeight);
+    };
+    setLazyContentFocus();
+  }, []);
 
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
-    (0, _react.jsx)("div", (0, _extends2.default)({
-      css: (0, _react.css)(cssFn(defaultStyles))
-    }, props))
-  );
+  /**
+   * I noticed the implementation at @atlaskit/checkbox would send the props to cssFn rather
+   * than the defaultStyles as the overrides guide suggests. I went with what the overrides
+   * guide suggested as it made more sense as a transformer of the current styles rather than
+   * a complete override with no chance of partially changing styles.
+   */
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    css: (0, _react2.css)(cssFn(defaultStyles)),
+    ref: scrollableRef
+    // 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 ? scrollContentLabel : undefined,
+    "data-testId": "drawer-contents"
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, props));
 };
 var _default = exports.default = {
   component: Content,

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

@@ -13,7 +13,11 @@ var _colors = require("@atlaskit/theme/colors");
 var _tokens = require("@atlaskit/tokens");
 var _usePreventProgrammaticScroll = _interopRequireDefault(require("./hooks/use-prevent-programmatic-scroll"));
 var _css;
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var wrapperWidth = exports.wrapperWidth = {
   full: {
     width: '100vw'
@@ -67,8 +71,12 @@ var DrawerWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, scrollRe
   var ref = (0, _useCallbackRef.useMergeRefs)([drawerRef, assignSecondChildRef]);
   (0, _usePreventProgrammaticScroll.default)();
   return (0, _react2.jsx)("div", {
-    css: wrapperStyles,
-    style: wrapperWidth[width],
+    css: wrapperStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: wrapperWidth[width]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     "data-testid": testId,
     ref: ref,

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

@@ -20,7 +20,11 @@ var _focusLock = _interopRequireDefault(require("./focus-lock"));
 var _sidebar = _interopRequireDefault(require("./sidebar"));
 var _excluded = ["component"],
   _excluded2 = ["component"];
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // Misc.
 // ------------------------------
 
@@ -58,6 +62,7 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
     Icon = _ref2.icon,
     _ref2$closeLabel = _ref2.closeLabel,
     closeLabel = _ref2$closeLabel === void 0 ? 'Close drawer' : _ref2$closeLabel,
+    scrollContentLabel = _ref2.scrollContentLabel,
     onClose = _ref2.onClose,
     onCloseComplete = _ref2.onCloseComplete,
     onOpenComplete = _ref2.onOpenComplete,
@@ -99,7 +104,9 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       autoFocusFirstElem: autoFocusFirstElem,
       isFocusLockEnabled: isFocusLockEnabled,
       shouldReturnFocus: shouldReturnFocus
-    }, (0, _react2.jsx)(_drawerWrapper.default, {
+    }, (0, _react2.jsx)(_drawerWrapper.default
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: className,
       width: width,
       testId: testId,
@@ -117,7 +124,9 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       label: closeLabel,
       shape: "circle",
       appearance: "subtle"
-    })), (0, _react2.jsx)(Content, contentOverrides, children)));
+    })), (0, _react2.jsx)(Content, (0, _extends2.default)({
+      scrollContentLabel: scrollContentLabel
+    }, contentOverrides), children)));
   }));
 };
 

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

@@ -10,7 +10,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["cssFn"];
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var defaultStyle = {
   alignItems: 'center',
   boxSizing: 'border-box',
@@ -29,7 +33,7 @@ var sidebarCSS = function sidebarCSS() {
 var Sidebar = function Sidebar(_ref) {
   var cssFn = _ref.cssFn,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   return (0, _react.jsx)("div", (0, _extends2.default)({
     css: (0, _react.css)(cssFn(defaultStyle))
   }, props));

package/dist/es2019/components/blanket.js

@@ -1,5 +1,10 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import AkBlanket from '@atlaskit/blanket';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
@@ -35,7 +40,9 @@ const Blanket = ({
     animationTimingFunction: animationTimingFunction
   }, ({
     className
-  }) => jsx("div", {
+  }) =>
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  jsx("div", {
     css: blanketStyles,
     className: className
   }, jsx(AkBlanket, {

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.10.0";
+const packageVersion = "7.12.0";
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
   action: 'dismissed',
@@ -89,6 +89,7 @@ export class DrawerBase extends Component {
       children,
       icon,
       closeLabel,
+      scrollContentLabel,
       width,
       shouldUnmountOnExit,
       onCloseComplete,
@@ -124,7 +125,8 @@ export class DrawerBase extends Component {
       overrides: overrides,
       autoFocusFirstElem: autoFocusFirstElem,
       isFocusLockEnabled: isFocusLockEnabled,
-      shouldReturnFocus: shouldReturnFocus
+      shouldReturnFocus: shouldReturnFocus,
+      scrollContentLabel: scrollContentLabel
     }, children));
   }
 }

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

@@ -1,6 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+import { useEffect, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 const defaultStyles = {
   flex: 1,
@@ -10,19 +16,39 @@ const defaultStyles = {
 const contentCSS = () => defaultStyles;
 const Content = ({
   cssFn,
+  scrollContentLabel = 'Scrollable content',
   ...props
-}) =>
-/**
- * I noticed the implementation at @atlaskit/checkbox would send the props to cssFn rather
- * than the defaultStyles as the overrides guide suggests. I went with what the overrides
- * guide suggested as it made more sense as a transformer of the current styles rather than
- * a complete override with no chance of partially changing styles.
- */
+}) => {
+  const [showContentFocus, setContentFocus] = useState(false);
+  const scrollableRef = useRef(null);
+  useEffect(() => {
+    const setLazyContentFocus = () => {
+      const target = scrollableRef.current;
+      target && setContentFocus(target.scrollHeight > target.clientHeight);
+    };
+    setLazyContentFocus();
+  }, []);
 
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
-jsx("div", _extends({
-  css: css(cssFn(defaultStyles))
-}, props));
+  /**
+   * I noticed the implementation at @atlaskit/checkbox would send the props to cssFn rather
+   * than the defaultStyles as the overrides guide suggests. I went with what the overrides
+   * guide suggested as it made more sense as a transformer of the current styles rather than
+   * a complete override with no chance of partially changing styles.
+   */
+  return jsx("div", _extends({
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    css: css(cssFn(defaultStyles)),
+    ref: scrollableRef
+    // 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 ? scrollContentLabel : undefined,
+    "data-testId": "drawer-contents"
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, props));
+};
 export default {
   component: Content,
   cssFn: contentCSS

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

@@ -1,5 +1,10 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { forwardRef, useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useMergeRefs } from 'use-callback-ref';
 import { N0 } from '@atlaskit/theme/colors';
@@ -62,8 +67,12 @@ const DrawerWrapper = /*#__PURE__*/forwardRef(({
   const ref = useMergeRefs([drawerRef, assignSecondChildRef]);
   usePreventProgrammaticScroll();
   return jsx("div", {
-    css: wrapperStyles,
-    style: wrapperWidth[width],
+    css: wrapperStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: wrapperWidth[width]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     "data-testid": testId,
     ref: ref,

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

@@ -1,7 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
 import { useCallback, useRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { IconButton } from '@atlaskit/button/new';
 import ArrowLeft from '@atlaskit/icon/glyph/arrow-left';
@@ -51,6 +56,7 @@ const DrawerPrimitive = ({
   children,
   icon: Icon,
   closeLabel = 'Close drawer',
+  scrollContentLabel,
   onClose,
   onCloseComplete,
   onOpenComplete,
@@ -95,7 +101,9 @@ const DrawerPrimitive = ({
     autoFocusFirstElem: autoFocusFirstElem,
     isFocusLockEnabled: isFocusLockEnabled,
     shouldReturnFocus: shouldReturnFocus
-  }, jsx(DrawerWrapper, {
+  }, jsx(DrawerWrapper
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: className,
     width: width,
     testId: testId,
@@ -111,7 +119,9 @@ const DrawerPrimitive = ({
     label: closeLabel,
     shape: "circle",
     appearance: "subtle"
-  })), jsx(Content, contentOverrides, children)))));
+  })), jsx(Content, _extends({
+    scrollContentLabel: scrollContentLabel
+  }, contentOverrides), children)))));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

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

@@ -1,6 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { N500 } from '@atlaskit/theme/colors';
 const defaultStyle = {
@@ -20,7 +24,7 @@ const Sidebar = ({
   cssFn,
   ...props
 }) => {
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   return jsx("div", _extends({
     css: css(cssFn(defaultStyle))
   }, props));

package/dist/esm/components/blanket.js

@@ -1,5 +1,10 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import AkBlanket from '@atlaskit/blanket';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
@@ -34,14 +39,17 @@ var Blanket = function Blanket(_ref) {
     animationTimingFunction: animationTimingFunction
   }, function (_ref2) {
     var className = _ref2.className;
-    return jsx("div", {
-      css: blanketStyles,
-      className: className
-    }, jsx(AkBlanket, {
-      isTinted: true,
-      onBlanketClicked: onBlanketClicked,
-      testId: testId && testId
-    }));
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      jsx("div", {
+        css: blanketStyles,
+        className: className
+      }, jsx(AkBlanket, {
+        isTinted: true,
+        onBlanketClicked: onBlanketClicked,
+        testId: testId && testId
+      }))
+    );
   }));
 };
 export default Blanket;

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.10.0";
+var packageVersion = "7.12.0";
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({
@@ -111,6 +111,7 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
         children = _this$props3.children,
         icon = _this$props3.icon,
         closeLabel = _this$props3.closeLabel,
+        scrollContentLabel = _this$props3.scrollContentLabel,
         width = _this$props3.width,
         shouldUnmountOnExit = _this$props3.shouldUnmountOnExit,
         onCloseComplete = _this$props3.onCloseComplete,
@@ -146,7 +147,8 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
         overrides: overrides,
         autoFocusFirstElem: autoFocusFirstElem,
         isFocusLockEnabled: isFocusLockEnabled,
-        shouldReturnFocus: shouldReturnFocus
+        shouldReturnFocus: shouldReturnFocus,
+        scrollContentLabel: scrollContentLabel
       }, children));
     }
   }]);

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

@@ -1,8 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["cssFn"];
+var _excluded = ["cssFn", "scrollContentLabel"];
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+import { useEffect, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 var defaultStyles = {
   flex: 1,
@@ -14,20 +21,41 @@ var contentCSS = function contentCSS() {
 };
 var Content = function Content(_ref) {
   var cssFn = _ref.cssFn,
+    _ref$scrollContentLab = _ref.scrollContentLabel,
+    scrollContentLabel = _ref$scrollContentLab === void 0 ? 'Scrollable content' : _ref$scrollContentLab,
     props = _objectWithoutProperties(_ref, _excluded);
-  return (
-    /**
-     * I noticed the implementation at @atlaskit/checkbox would send the props to cssFn rather
-     * than the defaultStyles as the overrides guide suggests. I went with what the overrides
-     * guide suggested as it made more sense as a transformer of the current styles rather than
-     * a complete override with no chance of partially changing styles.
-     */
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showContentFocus = _useState2[0],
+    setContentFocus = _useState2[1];
+  var scrollableRef = useRef(null);
+  useEffect(function () {
+    var setLazyContentFocus = function setLazyContentFocus() {
+      var target = scrollableRef.current;
+      target && setContentFocus(target.scrollHeight > target.clientHeight);
+    };
+    setLazyContentFocus();
+  }, []);
 
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
-    jsx("div", _extends({
-      css: css(cssFn(defaultStyles))
-    }, props))
-  );
+  /**
+   * I noticed the implementation at @atlaskit/checkbox would send the props to cssFn rather
+   * than the defaultStyles as the overrides guide suggests. I went with what the overrides
+   * guide suggested as it made more sense as a transformer of the current styles rather than
+   * a complete override with no chance of partially changing styles.
+   */
+  return jsx("div", _extends({
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    css: css(cssFn(defaultStyles)),
+    ref: scrollableRef
+    // 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 ? scrollContentLabel : undefined,
+    "data-testId": "drawer-contents"
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, props));
 };
 export default {
   component: Content,

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

@@ -1,7 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _css;
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { forwardRef, useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useMergeRefs } from 'use-callback-ref';
 import { N0 } from '@atlaskit/theme/colors';
@@ -60,8 +65,12 @@ var DrawerWrapper = /*#__PURE__*/forwardRef(function (_ref, scrollRef) {
   var ref = useMergeRefs([drawerRef, assignSecondChildRef]);
   usePreventProgrammaticScroll();
   return jsx("div", {
-    css: wrapperStyles,
-    style: wrapperWidth[width],
+    css: wrapperStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: wrapperWidth[width]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     "data-testid": testId,
     ref: ref,

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

@@ -2,9 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["component"],
   _excluded2 = ["component"];
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
 import { useCallback, useRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { IconButton } from '@atlaskit/button/new';
 import ArrowLeft from '@atlaskit/icon/glyph/arrow-left';
@@ -53,6 +58,7 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
     Icon = _ref2.icon,
     _ref2$closeLabel = _ref2.closeLabel,
     closeLabel = _ref2$closeLabel === void 0 ? 'Close drawer' : _ref2$closeLabel,
+    scrollContentLabel = _ref2.scrollContentLabel,
     onClose = _ref2.onClose,
     onCloseComplete = _ref2.onCloseComplete,
     onOpenComplete = _ref2.onOpenComplete,
@@ -94,7 +100,9 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       autoFocusFirstElem: autoFocusFirstElem,
       isFocusLockEnabled: isFocusLockEnabled,
       shouldReturnFocus: shouldReturnFocus
-    }, jsx(DrawerWrapper, {
+    }, jsx(DrawerWrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: className,
       width: width,
       testId: testId,
@@ -112,7 +120,9 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       label: closeLabel,
       shape: "circle",
       appearance: "subtle"
-    })), jsx(Content, contentOverrides, children)));
+    })), jsx(Content, _extends({
+      scrollContentLabel: scrollContentLabel
+    }, contentOverrides), children)));
   }));
 };