@atlaskit/page-layout 1.7.9 → 1.7.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/page-layout
 
+## 1.7.11
+
+### Patch Changes
+
+- [`edb659b9f7b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/edb659b9f7b) - Reverts changes that added aria-hidden to key interactive navigational elements
+
+## 1.7.10
+
+### Patch Changes
+
+- [`6263a07010c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6263a07010c) - Still behind a feature flag, reduces the breakpoint at which the new mobile functionality for our left sidebar "flyout mode" in mobile is applied (reduced from ~1024px to ~768px).
+
 ## 1.7.9
 
 ### Patch Changes

package/dist/cjs/components/resize-control/grab-area.js

@@ -67,6 +67,7 @@ var GrabArea = function GrabArea(_ref) {
     "aria-label": label,
     "data-testid": testId,
     disabled: isDisabled,
+    "aria-hidden": isLeftSidebarCollapsed,
     type: "button"
     // The separator role is applied to a button to utilize the native
     // interactive and disabled functionality on the resize separator. While a

package/dist/cjs/components/resize-control/index.js

@@ -87,7 +87,7 @@ var ResizeControl = function ResizeControl(_ref) {
   var unbindEvents = (0, _react.useRef)(null);
   var mobileMediaQuery = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
-  (0, _responsive.UNSAFE_useMediaQuery)('below.md') : null;
+  (0, _responsive.UNSAFE_useMediaQuery)('below.sm') : null;
 
   // Used in some cases to ensure function references don't have to change
   // TODO: more functions could use `stableSidebarState` rather than `leftSidebarState`

package/dist/cjs/components/resize-control/resize-button.js

@@ -27,7 +27,7 @@ var increaseHitAreaStyles = (0, _react.css)({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var mobileStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.md, {
+var mobileStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.sm, {
   opacity: 1
 })) : undefined;
 var resizeIconButtonStyles = (0, _react.css)({

package/dist/cjs/components/slots/internal/left-sidebar-inner.js

@@ -18,7 +18,7 @@ var _hooks = require("../../../common/hooks");
 var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var mobileStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.md, {
+var mobileStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.sm, {
   width: "".concat(_constants.MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, "px"),
   position: 'fixed',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
@@ -30,7 +30,7 @@ var mobileStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-syst
 })) : undefined;
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var mobileInnerFlyoutStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.md, {
+var mobileInnerFlyoutStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.sm, {
   width: "min(90vw, ".concat(_constants.MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH, "px)"),
   maxWidth: _constants.MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH,
   transition: "width ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s, box-shadow ").concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s")

package/dist/cjs/components/slots/internal/left-sidebar-outer.js

@@ -23,7 +23,7 @@ var _slotFocusRing = _interopRequireDefault(require("./slot-focus-ring"));
 var prefersReducedMotionStyles = (0, _react2.css)((0, _motion.prefersReducedMotion)());
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var mobileStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.md, {
+var mobileStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.sm, {
   width: _constants.MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH,
   cursor: 'pointer',
   opacity: 1,
@@ -36,7 +36,7 @@ var mobileStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-syst
 })) : undefined;
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var mobileFlyoutStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.md, {
+var mobileFlyoutStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.sm, {
   cursor: 'revert'
 })) : undefined;
 var outerStyles = (0, _react2.css)({
@@ -98,7 +98,7 @@ var LeftSidebarOuter = function LeftSidebarOuter(_ref, ref) {
        * On mobile, the `onClick` handler controls the toggled flyout behaviour.
        * This is not intended to be how you use this with a keyboard, there is a ResizeButton for this intentionally instead.
        */
-      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
       (0, _react2.jsx)("div", (0, _extends2.default)({
         css: [
         // mobile breakpoint styles
@@ -111,8 +111,7 @@ var LeftSidebarOuter = function LeftSidebarOuter(_ref, ref) {
         onMouseOver: onMouseOver,
         onMouseLeave: onMouseLeave,
         onClick: onClick,
-        ref: ref,
-        "aria-hidden": "true"
+        ref: ref
       }, selector), children)
     );
   });

package/dist/cjs/components/slots/internal/resizable-children-wrapper.js

@@ -43,12 +43,15 @@ var ResizableChildrenWrapper = function ResizableChildrenWrapper(_ref) {
     _ref$hasCollapsedStat = _ref.hasCollapsedState,
     hasCollapsedState = _ref$hasCollapsedStat === void 0 ? false : _ref$hasCollapsedStat,
     _ref$isFlyoutOpen = _ref.isFlyoutOpen,
-    isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen;
+    isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen,
+    testId = _ref.testId;
   var isCollapsing = (0, _hooks.useIsSidebarCollapsing)();
   var isCollapsed = isLeftSidebarCollapsed || hasCollapsedState;
   var isHidden = isCollapsing || isCollapsed && !isFlyoutOpen;
   return (0, _react.jsx)("div", {
-    css: [resizableChildrenWrapperStyles, isHidden && hideLeftSidebarContentsStyles, prefersReducedMotionStyles]
+    css: [resizableChildrenWrapperStyles, isHidden && hideLeftSidebarContentsStyles, prefersReducedMotionStyles],
+    "aria-hidden": isHidden,
+    "data-testid": testId
   }, (0, _react.jsx)("div", {
     css: fixedChildrenWrapperStyles
   }, children));

package/dist/cjs/components/slots/left-sidebar.js

@@ -229,7 +229,7 @@ var LeftSidebar = function LeftSidebar(props) {
   };
   var mobileMediaQuery = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
-  (0, _responsive.UNSAFE_useMediaQuery)('below.md') : null;
+  (0, _responsive.UNSAFE_useMediaQuery)('below.sm') : null;
   var openMobileFlyout = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
   (0, _react.useCallback)(function () {
@@ -264,7 +264,7 @@ var LeftSidebar = function LeftSidebar(props) {
   }, [setLeftSidebarState, onCollapse, mobileMediaQuery]) : undefined;
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g')) {
     // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
-    (0, _responsive.UNSAFE_useMediaQuery)('below.md', function (event) {
+    (0, _responsive.UNSAFE_useMediaQuery)('below.sm', function (event) {
       setLeftSidebarState(function (current) {
         if (event.matches && !current.isLeftSidebarCollapsed) {
           // Sidebar was previously open when resizing downwards, convert the sidebar being open to a flyout being open
@@ -297,8 +297,16 @@ var LeftSidebar = function LeftSidebar(props) {
       isDisabled: !isFlyoutOpen
     });
   }
-  return (0, _react2.jsx)(_react.Fragment, null, (mobileMediaQuery === null || mobileMediaQuery === void 0 ? void 0 : mobileMediaQuery.matches) && (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && (0, _react2.jsx)("div", {
-    "aria-hidden": "true",
+  return (0, _react2.jsx)(_react.Fragment, null, (mobileMediaQuery === null || mobileMediaQuery === void 0 ? void 0 : mobileMediaQuery.matches) && (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') &&
+  /**
+   * On desktop, the `onClick` handlers controls the temporary flyout behavior.
+   * This is an intentionally mouse-only experience, it may even be disruptive with keyboard navigation.
+   *
+   * On mobile, the `onClick` handler controls the toggled flyout behaviour.
+   * This is not intended to be how you use this with a keyboard, there is a ResizeButton for this intentionally instead.
+   */
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+  (0, _react2.jsx)("div", {
     css: [hiddenBackdropStyles, isFlyoutOpen && openBackdropStyles],
     onClick: closeMobileFlyout
   }), (0, _react2.jsx)(_leftSidebarOuter.default, {
@@ -319,7 +327,8 @@ var LeftSidebar = function LeftSidebar(props) {
   }, (0, _react2.jsx)(_resizableChildrenWrapper.default, {
     isFlyoutOpen: isFlyoutOpen,
     isLeftSidebarCollapsed: isLeftSidebarCollapsed,
-    hasCollapsedState: !notFirstRun.current && collapsedState === 'collapsed'
+    hasCollapsedState: !notFirstRun.current && collapsedState === 'collapsed',
+    testId: testId && "".concat(testId, "-resize-children-wrapper")
   }, children), (0, _react2.jsx)(_resizeControl.default, {
     testId: testId,
     resizeGrabAreaLabel: resizeGrabAreaLabel,

package/dist/cjs/components/slots/page-layout.js

@@ -29,7 +29,7 @@ var gridStyles = (0, _react2.css)({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var gridStylesMobile = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.md, {
+var gridStylesMobile = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.sm, {
   gridTemplateAreas: gridTemplateAreasMobile,
   gridTemplateColumns: "".concat(_constants.LEFT_PANEL_WIDTH, " minmax(0, 1fr)")
 })) : undefined;

package/dist/cjs/components/slots/slot-dimensions.js

@@ -12,6 +12,6 @@ var _default = function _default(_ref) {
   var variableName = _ref.variableName,
     value = _ref.value,
     mobileValue = _ref.mobileValue;
-  return /*#__PURE__*/_react.default.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"), (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileValue && "".concat(_responsive.UNSAFE_media.below.md, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"));
+  return /*#__PURE__*/_react.default.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"), (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileValue && "".concat(_responsive.UNSAFE_media.below.sm, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"));
 };
 exports.default = _default;

package/dist/cjs/controllers/sidebar-resize-controller.js

@@ -65,7 +65,7 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
   var transition = (0, _react.useRef)(null);
   var mobileMediaQuery = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
-  (0, _responsive.UNSAFE_useMediaQuery)('below.md') : null;
+  (0, _responsive.UNSAFE_useMediaQuery)('below.sm') : null;
   var isOpen = mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? isFlyoutOpen : !isLeftSidebarCollapsed;
   var expandLeftSidebar = (0, _react.useCallback)(function () {
     var _transition$current2, _transition$current3;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.7.9",
+	"version": "1.7.11",
 	"sideEffects": false
 }

package/dist/es2019/components/resize-control/grab-area.js

@@ -66,6 +66,7 @@ const GrabArea = ({
   "aria-label": label,
   "data-testid": testId,
   disabled: isDisabled,
+  "aria-hidden": isLeftSidebarCollapsed,
   type: "button"
   // The separator role is applied to a button to utilize the native
   // interactive and disabled functionality on the resize separator. While a

package/dist/es2019/components/resize-control/index.js

@@ -80,7 +80,7 @@ const ResizeControl = ({
   const unbindEvents = useRef(null);
   const mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
-  useMediaQuery('below.md') : null;
+  useMediaQuery('below.sm') : null;
 
   // Used in some cases to ensure function references don't have to change
   // TODO: more functions could use `stableSidebarState` rather than `leftSidebarState`

package/dist/es2019/components/resize-control/resize-button.js

@@ -20,7 +20,7 @@ const increaseHitAreaStyles = css({
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  [UNSAFE_media.below.md]: {
+  [UNSAFE_media.below.sm]: {
     opacity: 1
   }
 }) : undefined;

package/dist/es2019/components/slots/internal/left-sidebar-inner.js

@@ -12,7 +12,7 @@ const prefersReducedMotionStyles = css(prefersReducedMotion());
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  [UNSAFE_media.below.md]: {
+  [UNSAFE_media.below.sm]: {
     width: `${MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH}px`,
     position: 'fixed',
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
@@ -27,7 +27,7 @@ const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-l
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const mobileInnerFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  [UNSAFE_media.below.md]: {
+  [UNSAFE_media.below.sm]: {
     width: `min(90vw, ${MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH}px)`,
     maxWidth: MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH,
     transition: `width ${TRANSITION_DURATION}ms ${easeOut} 0s, box-shadow ${TRANSITION_DURATION}ms ${easeOut} 0s`

package/dist/es2019/components/slots/internal/left-sidebar-outer.js

@@ -16,7 +16,7 @@ const prefersReducedMotionStyles = css(prefersReducedMotion());
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  [UNSAFE_media.below.md]: {
+  [UNSAFE_media.below.sm]: {
     width: MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH,
     cursor: 'pointer',
     opacity: 1,
@@ -32,7 +32,7 @@ const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-l
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const mobileFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  [UNSAFE_media.below.md]: {
+  [UNSAFE_media.below.sm]: {
     cursor: 'revert'
   }
 }) : undefined;
@@ -99,7 +99,7 @@ const LeftSidebarOuter = ({
    * On mobile, the `onClick` handler controls the toggled flyout behaviour.
    * This is not intended to be how you use this with a keyboard, there is a ResizeButton for this intentionally instead.
    */
-  // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+  // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
   jsx("div", _extends({
     css: [
     // mobile breakpoint styles
@@ -112,8 +112,7 @@ const LeftSidebarOuter = ({
     onMouseOver: onMouseOver,
     onMouseLeave: onMouseLeave,
     onClick: onClick,
-    ref: ref,
-    "aria-hidden": "true"
+    ref: ref
   }, selector), children));
 };
 export default /*#__PURE__*/forwardRef(LeftSidebarOuter);

package/dist/es2019/components/slots/internal/resizable-children-wrapper.js

@@ -34,13 +34,16 @@ const ResizableChildrenWrapper = ({
   children,
   isLeftSidebarCollapsed = false,
   hasCollapsedState = false,
-  isFlyoutOpen = false
+  isFlyoutOpen = false,
+  testId
 }) => {
   const isCollapsing = useIsSidebarCollapsing();
   const isCollapsed = isLeftSidebarCollapsed || hasCollapsedState;
   const isHidden = isCollapsing || isCollapsed && !isFlyoutOpen;
   return jsx("div", {
-    css: [resizableChildrenWrapperStyles, isHidden && hideLeftSidebarContentsStyles, prefersReducedMotionStyles]
+    css: [resizableChildrenWrapperStyles, isHidden && hideLeftSidebarContentsStyles, prefersReducedMotionStyles],
+    "aria-hidden": isHidden,
+    "data-testid": testId
   }, jsx("div", {
     css: fixedChildrenWrapperStyles
   }, children));

package/dist/es2019/components/slots/left-sidebar.js

@@ -224,7 +224,7 @@ const LeftSidebar = props => {
   };
   const mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
-  useMediaQuery('below.md') : null;
+  useMediaQuery('below.sm') : null;
   const openMobileFlyout = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
   useCallback(() => {
@@ -261,7 +261,7 @@ const LeftSidebar = props => {
   }, [setLeftSidebarState, onCollapse, mobileMediaQuery]) : undefined;
   if (getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g')) {
     // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
-    useMediaQuery('below.md', event => {
+    useMediaQuery('below.sm', event => {
       setLeftSidebarState(current => {
         if (event.matches && !current.isLeftSidebarCollapsed) {
           // Sidebar was previously open when resizing downwards, convert the sidebar being open to a flyout being open
@@ -296,8 +296,16 @@ const LeftSidebar = props => {
       isDisabled: !isFlyoutOpen
     });
   }
-  return jsx(Fragment, null, (mobileMediaQuery === null || mobileMediaQuery === void 0 ? void 0 : mobileMediaQuery.matches) && getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && jsx("div", {
-    "aria-hidden": "true",
+  return jsx(Fragment, null, (mobileMediaQuery === null || mobileMediaQuery === void 0 ? void 0 : mobileMediaQuery.matches) && getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') &&
+  /**
+   * On desktop, the `onClick` handlers controls the temporary flyout behavior.
+   * This is an intentionally mouse-only experience, it may even be disruptive with keyboard navigation.
+   *
+   * On mobile, the `onClick` handler controls the toggled flyout behaviour.
+   * This is not intended to be how you use this with a keyboard, there is a ResizeButton for this intentionally instead.
+   */
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+  jsx("div", {
     css: [hiddenBackdropStyles, isFlyoutOpen && openBackdropStyles],
     onClick: closeMobileFlyout
   }), jsx(LeftSidebarOuter, {
@@ -318,7 +326,8 @@ const LeftSidebar = props => {
   }, jsx(ResizableChildrenWrapper, {
     isFlyoutOpen: isFlyoutOpen,
     isLeftSidebarCollapsed: isLeftSidebarCollapsed,
-    hasCollapsedState: !notFirstRun.current && collapsedState === 'collapsed'
+    hasCollapsedState: !notFirstRun.current && collapsedState === 'collapsed',
+    testId: testId && `${testId}-resize-children-wrapper`
   }, children), jsx(ResizeControl, {
     testId: testId,
     resizeGrabAreaLabel: resizeGrabAreaLabel,

package/dist/es2019/components/slots/page-layout.js

@@ -32,7 +32,7 @@ const gridStyles = css({
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const gridStylesMobile = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  [UNSAFE_media.below.md]: {
+  [UNSAFE_media.below.sm]: {
     gridTemplateAreas: gridTemplateAreasMobile,
     gridTemplateColumns: `${LEFT_PANEL_WIDTH} minmax(0, 1fr)`
   }

package/dist/es2019/components/slots/slot-dimensions.js

@@ -5,4 +5,4 @@ export default (({
   variableName,
   value,
   mobileValue
-}) => /*#__PURE__*/React.createElement("style", null, `:root{--${variableName}:${value}px;}`, getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileValue && `${UNSAFE_media.below.md} { :root{--${variableName}:${mobileValue}px;} }`));
+}) => /*#__PURE__*/React.createElement("style", null, `:root{--${variableName}:${value}px;}`, getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileValue && `${UNSAFE_media.below.sm} { :root{--${variableName}:${mobileValue}px;} }`));

package/dist/es2019/controllers/sidebar-resize-controller.js

@@ -52,7 +52,7 @@ export const SidebarResizeController = ({
   const transition = useRef(null);
   const mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
-  useMediaQuery('below.md') : null;
+  useMediaQuery('below.sm') : null;
   const isOpen = mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? isFlyoutOpen : !isLeftSidebarCollapsed;
   const expandLeftSidebar = useCallback(() => {
     var _transition$current2, _transition$current3;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.7.9",
+	"version": "1.7.11",
 	"sideEffects": false
 }

package/dist/esm/components/resize-control/grab-area.js

@@ -61,6 +61,7 @@ var GrabArea = function GrabArea(_ref) {
     "aria-label": label,
     "data-testid": testId,
     disabled: isDisabled,
+    "aria-hidden": isLeftSidebarCollapsed,
     type: "button"
     // The separator role is applied to a button to utilize the native
     // interactive and disabled functionality on the resize separator. While a

package/dist/esm/components/resize-control/index.js

@@ -83,7 +83,7 @@ var ResizeControl = function ResizeControl(_ref) {
   var unbindEvents = useRef(null);
   var mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
-  useMediaQuery('below.md') : null;
+  useMediaQuery('below.sm') : null;
 
   // Used in some cases to ensure function references don't have to change
   // TODO: more functions could use `stableSidebarState` rather than `leftSidebarState`

package/dist/esm/components/resize-control/resize-button.js

@@ -21,7 +21,7 @@ var increaseHitAreaStyles = css({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
+var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.sm, {
   opacity: 1
 })) : undefined;
 var resizeIconButtonStyles = css({

package/dist/esm/components/slots/internal/left-sidebar-inner.js

@@ -11,7 +11,7 @@ import { useIsSidebarDragging } from '../../../common/hooks';
 var prefersReducedMotionStyles = css(prefersReducedMotion());
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
+var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.sm, {
   width: "".concat(MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, "px"),
   position: 'fixed',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
@@ -23,7 +23,7 @@ var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-lay
 })) : undefined;
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var mobileInnerFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
+var mobileInnerFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.sm, {
   width: "min(90vw, ".concat(MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH, "px)"),
   maxWidth: MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH,
   transition: "width ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s, box-shadow ").concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s")

package/dist/esm/components/slots/internal/left-sidebar-outer.js

@@ -15,7 +15,7 @@ import SlotFocusRing from './slot-focus-ring';
 var prefersReducedMotionStyles = css(prefersReducedMotion());
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
+var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.sm, {
   width: MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH,
   cursor: 'pointer',
   opacity: 1,
@@ -28,7 +28,7 @@ var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-lay
 })) : undefined;
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var mobileFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
+var mobileFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.sm, {
   cursor: 'revert'
 })) : undefined;
 var outerStyles = css({
@@ -90,7 +90,7 @@ var LeftSidebarOuter = function LeftSidebarOuter(_ref, ref) {
        * On mobile, the `onClick` handler controls the toggled flyout behaviour.
        * This is not intended to be how you use this with a keyboard, there is a ResizeButton for this intentionally instead.
        */
-      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
       jsx("div", _extends({
         css: [
         // mobile breakpoint styles
@@ -103,8 +103,7 @@ var LeftSidebarOuter = function LeftSidebarOuter(_ref, ref) {
         onMouseOver: onMouseOver,
         onMouseLeave: onMouseLeave,
         onClick: onClick,
-        ref: ref,
-        "aria-hidden": "true"
+        ref: ref
       }, selector), children)
     );
   });

package/dist/esm/components/slots/internal/resizable-children-wrapper.js

@@ -37,12 +37,15 @@ var ResizableChildrenWrapper = function ResizableChildrenWrapper(_ref) {
     _ref$hasCollapsedStat = _ref.hasCollapsedState,
     hasCollapsedState = _ref$hasCollapsedStat === void 0 ? false : _ref$hasCollapsedStat,
     _ref$isFlyoutOpen = _ref.isFlyoutOpen,
-    isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen;
+    isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen,
+    testId = _ref.testId;
   var isCollapsing = useIsSidebarCollapsing();
   var isCollapsed = isLeftSidebarCollapsed || hasCollapsedState;
   var isHidden = isCollapsing || isCollapsed && !isFlyoutOpen;
   return jsx("div", {
-    css: [resizableChildrenWrapperStyles, isHidden && hideLeftSidebarContentsStyles, prefersReducedMotionStyles]
+    css: [resizableChildrenWrapperStyles, isHidden && hideLeftSidebarContentsStyles, prefersReducedMotionStyles],
+    "aria-hidden": isHidden,
+    "data-testid": testId
   }, jsx("div", {
     css: fixedChildrenWrapperStyles
   }, children));

package/dist/esm/components/slots/left-sidebar.js

@@ -225,7 +225,7 @@ var LeftSidebar = function LeftSidebar(props) {
   };
   var mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
-  useMediaQuery('below.md') : null;
+  useMediaQuery('below.sm') : null;
   var openMobileFlyout = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
   useCallback(function () {
@@ -260,7 +260,7 @@ var LeftSidebar = function LeftSidebar(props) {
   }, [setLeftSidebarState, onCollapse, mobileMediaQuery]) : undefined;
   if (getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g')) {
     // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
-    useMediaQuery('below.md', function (event) {
+    useMediaQuery('below.sm', function (event) {
       setLeftSidebarState(function (current) {
         if (event.matches && !current.isLeftSidebarCollapsed) {
           // Sidebar was previously open when resizing downwards, convert the sidebar being open to a flyout being open
@@ -293,8 +293,16 @@ var LeftSidebar = function LeftSidebar(props) {
       isDisabled: !isFlyoutOpen
     });
   }
-  return jsx(Fragment, null, (mobileMediaQuery === null || mobileMediaQuery === void 0 ? void 0 : mobileMediaQuery.matches) && getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && jsx("div", {
-    "aria-hidden": "true",
+  return jsx(Fragment, null, (mobileMediaQuery === null || mobileMediaQuery === void 0 ? void 0 : mobileMediaQuery.matches) && getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') &&
+  /**
+   * On desktop, the `onClick` handlers controls the temporary flyout behavior.
+   * This is an intentionally mouse-only experience, it may even be disruptive with keyboard navigation.
+   *
+   * On mobile, the `onClick` handler controls the toggled flyout behaviour.
+   * This is not intended to be how you use this with a keyboard, there is a ResizeButton for this intentionally instead.
+   */
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+  jsx("div", {
     css: [hiddenBackdropStyles, isFlyoutOpen && openBackdropStyles],
     onClick: closeMobileFlyout
   }), jsx(LeftSidebarOuter, {
@@ -315,7 +323,8 @@ var LeftSidebar = function LeftSidebar(props) {
   }, jsx(ResizableChildrenWrapper, {
     isFlyoutOpen: isFlyoutOpen,
     isLeftSidebarCollapsed: isLeftSidebarCollapsed,
-    hasCollapsedState: !notFirstRun.current && collapsedState === 'collapsed'
+    hasCollapsedState: !notFirstRun.current && collapsedState === 'collapsed',
+    testId: testId && "".concat(testId, "-resize-children-wrapper")
   }, children), jsx(ResizeControl, {
     testId: testId,
     resizeGrabAreaLabel: resizeGrabAreaLabel,

package/dist/esm/components/slots/page-layout.js

@@ -21,7 +21,7 @@ var gridStyles = css({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var gridStylesMobile = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
+var gridStylesMobile = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.sm, {
   gridTemplateAreas: gridTemplateAreasMobile,
   gridTemplateColumns: "".concat(LEFT_PANEL_WIDTH, " minmax(0, 1fr)")
 })) : undefined;

package/dist/esm/components/slots/slot-dimensions.js

@@ -5,5 +5,5 @@ export default (function (_ref) {
   var variableName = _ref.variableName,
     value = _ref.value,
     mobileValue = _ref.mobileValue;
-  return /*#__PURE__*/React.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"), getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileValue && "".concat(UNSAFE_media.below.md, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"));
+  return /*#__PURE__*/React.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"), getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileValue && "".concat(UNSAFE_media.below.sm, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"));
 });

package/dist/esm/controllers/sidebar-resize-controller.js

@@ -55,7 +55,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
   var transition = useRef(null);
   var mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
-  useMediaQuery('below.md') : null;
+  useMediaQuery('below.sm') : null;
   var isOpen = mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? isFlyoutOpen : !isLeftSidebarCollapsed;
   var expandLeftSidebar = useCallback(function () {
     var _transition$current2, _transition$current3;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.7.9",
+	"version": "1.7.11",
 	"sideEffects": false
 }

package/dist/types/components/slots/internal/resizable-children-wrapper.d.ts

@@ -6,6 +6,7 @@ type ResizableChildrenWrapperProps = {
     isFlyoutOpen?: boolean;
     isLeftSidebarCollapsed?: boolean;
     hasCollapsedState?: boolean;
+    testId?: string;
 };
-declare const ResizableChildrenWrapper: ({ children, isLeftSidebarCollapsed, hasCollapsedState, isFlyoutOpen, }: ResizableChildrenWrapperProps) => jsx.JSX.Element;
+declare const ResizableChildrenWrapper: ({ children, isLeftSidebarCollapsed, hasCollapsedState, isFlyoutOpen, testId, }: ResizableChildrenWrapperProps) => jsx.JSX.Element;
 export default ResizableChildrenWrapper;

package/dist/types-ts4.5/components/slots/internal/resizable-children-wrapper.d.ts

@@ -6,6 +6,7 @@ type ResizableChildrenWrapperProps = {
     isFlyoutOpen?: boolean;
     isLeftSidebarCollapsed?: boolean;
     hasCollapsedState?: boolean;
+    testId?: string;
 };
-declare const ResizableChildrenWrapper: ({ children, isLeftSidebarCollapsed, hasCollapsedState, isFlyoutOpen, }: ResizableChildrenWrapperProps) => jsx.JSX.Element;
+declare const ResizableChildrenWrapper: ({ children, isLeftSidebarCollapsed, hasCollapsedState, isFlyoutOpen, testId, }: ResizableChildrenWrapperProps) => jsx.JSX.Element;
 export default ResizableChildrenWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.7.9",
+  "version": "1.7.11",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -58,7 +58,7 @@
     "@atlaskit/menu": "^1.9.0",
     "@atlaskit/notification-indicator": "^9.1.0",
     "@atlaskit/notification-log-client": "^6.1.0",
-    "@atlaskit/popup": "^1.8.0",
+    "@atlaskit/popup": "^1.9.0",
     "@atlaskit/side-navigation": "^1.10.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tooltip": "*",