@atlaskit/page-layout 1.7.10 → 1.7.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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/slots/internal/left-sidebar-outer.js

@@ -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

@@ -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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.7.10",
+	"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/slots/internal/left-sidebar-outer.js

@@ -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

@@ -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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.7.10",
+	"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/slots/internal/left-sidebar-outer.js

@@ -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

@@ -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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.7.10",
+	"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.10",
+  "version": "1.7.11",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"