@atlaskit/page-layout 1.3.5 → 1.3.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/page-layout
 
+## 1.3.7
+
+### Patch Changes
+
+- [`7f3ff7f0081`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7f3ff7f0081) - [ux] Enhance accessibility of header for skip links component
+
+## 1.3.6
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.3.5
 
 ### Patch Changes

package/dist/cjs/components/skip-links/skip-link-components.js

@@ -53,6 +53,9 @@ var skipLinkStyles = (0, _react.css)({
     transform: 'translateY(0%)'
   }
 });
+var skipLinkHeadingStyles = (0, _react.css)({
+  fontWeight: 600
+});
 var skipLinkListStyles = (0, _react.css)({
   marginTop: 4,
   paddingLeft: 0,
@@ -69,7 +72,14 @@ var assignIndex = function assignIndex(num, arr) {
   }
 
   return assignIndex(num + 1, arr);
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+};
+/**
+ * The default label will be used when the `skipLinksLabel` attribute is not
+ * provided or the attribute is an empty string. If a string comprised only of
+ * spaces is provided, the skip link heading element will be removed, but the
+ * default label will still be used in `title` attribute of the skip links
+ * themselves.
+ */
 
 
 var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
@@ -126,12 +136,16 @@ var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
     return window.removeEventListener('keydown', escapeHandler, false);
   };
 
+  var emptyLabelOverride = !!(skipLinksLabel !== null && skipLinksLabel !== void 0 && skipLinksLabel.match(/^\s+$/));
+  var label = skipLinksLabel || _constants.DEFAULT_I18N_PROPS_SKIP_LINKS;
   return (0, _react.jsx)("div", {
     onFocus: attachEscHandler,
     onBlur: removeEscHandler,
     css: [skipLinkStyles, prefersReducedMotionStyles],
     "data-skip-link-wrapper": true
-  }, (0, _react.jsx)("h5", null, skipLinksLabel), (0, _react.jsx)("ol", {
+  }, emptyLabelOverride ? null : (0, _react.jsx)("p", {
+    css: skipLinkHeadingStyles
+  }, label), (0, _react.jsx)("ol", {
     css: skipLinkListStyles
   }, sortSkipLinks(skipLinksData).map(function (_ref2) {
     var id = _ref2.id,
@@ -140,7 +154,7 @@ var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
       key: id,
       href: "#".concat(id),
       isFocusable: true,
-      title: "".concat(skipLinksLabel, " ").concat(skipLinkTitle)
+      title: emptyLabelOverride ? "".concat(_constants.DEFAULT_I18N_PROPS_SKIP_LINKS, " ").concat(skipLinkTitle) : "".concat(label, " ").concat(skipLinkTitle)
     }, skipLinkTitle);
   })));
 };

package/dist/cjs/version.json

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

package/dist/es2019/components/skip-links/skip-link-components.js

@@ -4,7 +4,7 @@
 import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { N30A, N60A } from '@atlaskit/theme/colors';
-import { PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';
+import { DEFAULT_I18N_PROPS_SKIP_LINKS, PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';
 import { useSkipLinks } from '../../controllers';
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const prefersReducedMotionStyles = css(prefersReducedMotion());
@@ -34,6 +34,9 @@ const skipLinkStyles = css({
     transform: 'translateY(0%)'
   }
 });
+const skipLinkHeadingStyles = css({
+  fontWeight: 600
+});
 const skipLinkListStyles = css({
   marginTop: 4,
   paddingLeft: 0,
@@ -50,7 +53,14 @@ const assignIndex = (num, arr) => {
   }
 
   return assignIndex(num + 1, arr);
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+};
+/**
+ * The default label will be used when the `skipLinksLabel` attribute is not
+ * provided or the attribute is an empty string. If a string comprised only of
+ * spaces is provided, the skip link heading element will be removed, but the
+ * default label will still be used in `title` attribute of the skip links
+ * themselves.
+ */
 
 
 export const SkipLinkWrapper = ({
@@ -96,12 +106,16 @@ export const SkipLinkWrapper = ({
 
   const removeEscHandler = () => window.removeEventListener('keydown', escapeHandler, false);
 
+  const emptyLabelOverride = !!(skipLinksLabel !== null && skipLinksLabel !== void 0 && skipLinksLabel.match(/^\s+$/));
+  const label = skipLinksLabel || DEFAULT_I18N_PROPS_SKIP_LINKS;
   return jsx("div", {
     onFocus: attachEscHandler,
     onBlur: removeEscHandler,
     css: [skipLinkStyles, prefersReducedMotionStyles],
     "data-skip-link-wrapper": true
-  }, jsx("h5", null, skipLinksLabel), jsx("ol", {
+  }, emptyLabelOverride ? null : jsx("p", {
+    css: skipLinkHeadingStyles
+  }, label), jsx("ol", {
     css: skipLinkListStyles
   }, sortSkipLinks(skipLinksData).map(({
     id,
@@ -110,7 +124,7 @@ export const SkipLinkWrapper = ({
     key: id,
     href: `#${id}`,
     isFocusable: true,
-    title: `${skipLinksLabel} ${skipLinkTitle}`
+    title: emptyLabelOverride ? `${DEFAULT_I18N_PROPS_SKIP_LINKS} ${skipLinkTitle}` : `${label} ${skipLinkTitle}`
   }, skipLinkTitle))));
 };
 

package/dist/es2019/version.json

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

package/dist/esm/components/skip-links/skip-link-components.js

@@ -11,7 +11,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { N30A, N60A } from '@atlaskit/theme/colors';
-import { PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';
+import { DEFAULT_I18N_PROPS_SKIP_LINKS, PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';
 import { useSkipLinks } from '../../controllers';
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var prefersReducedMotionStyles = css(prefersReducedMotion());
@@ -41,6 +41,9 @@ var skipLinkStyles = css({
     transform: 'translateY(0%)'
   }
 });
+var skipLinkHeadingStyles = css({
+  fontWeight: 600
+});
 var skipLinkListStyles = css({
   marginTop: 4,
   paddingLeft: 0,
@@ -57,7 +60,14 @@ var assignIndex = function assignIndex(num, arr) {
   }
 
   return assignIndex(num + 1, arr);
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+};
+/**
+ * The default label will be used when the `skipLinksLabel` attribute is not
+ * provided or the attribute is an empty string. If a string comprised only of
+ * spaces is provided, the skip link heading element will be removed, but the
+ * default label will still be used in `title` attribute of the skip links
+ * themselves.
+ */
 
 
 export var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
@@ -114,12 +124,16 @@ export var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
     return window.removeEventListener('keydown', escapeHandler, false);
   };
 
+  var emptyLabelOverride = !!(skipLinksLabel !== null && skipLinksLabel !== void 0 && skipLinksLabel.match(/^\s+$/));
+  var label = skipLinksLabel || DEFAULT_I18N_PROPS_SKIP_LINKS;
   return jsx("div", {
     onFocus: attachEscHandler,
     onBlur: removeEscHandler,
     css: [skipLinkStyles, prefersReducedMotionStyles],
     "data-skip-link-wrapper": true
-  }, jsx("h5", null, skipLinksLabel), jsx("ol", {
+  }, emptyLabelOverride ? null : jsx("p", {
+    css: skipLinkHeadingStyles
+  }, label), jsx("ol", {
     css: skipLinkListStyles
   }, sortSkipLinks(skipLinksData).map(function (_ref2) {
     var id = _ref2.id,
@@ -128,7 +142,7 @@ export var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
       key: id,
       href: "#".concat(id),
       isFocusable: true,
-      title: "".concat(skipLinksLabel, " ").concat(skipLinkTitle)
+      title: emptyLabelOverride ? "".concat(DEFAULT_I18N_PROPS_SKIP_LINKS, " ").concat(skipLinkTitle) : "".concat(label, " ").concat(skipLinkTitle)
     }, skipLinkTitle);
   })));
 };

package/dist/esm/version.json

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

package/dist/types/components/skip-links/skip-link-components.d.ts

@@ -2,6 +2,13 @@
 import { ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 import { SkipLinkWrapperProps } from './types';
+/**
+ * The default label will be used when the `skipLinksLabel` attribute is not
+ * provided or the attribute is an empty string. If a string comprised only of
+ * spaces is provided, the skip link heading element will be removed, but the
+ * default label will still be used in `title` attribute of the skip links
+ * themselves.
+ */
 export declare const SkipLinkWrapper: ({ skipLinksLabel }: SkipLinkWrapperProps) => jsx.JSX.Element | null;
 export declare const SkipLink: ({ href, children, isFocusable, title, }: {
     href: string;

package/dist/types/components/skip-links/types.d.ts

@@ -4,5 +4,5 @@ export declare type SkipLinkData = {
     ref?: undefined;
 };
 export declare type SkipLinkWrapperProps = {
-    skipLinksLabel: string;
+    skipLinksLabel?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.3.5",
+  "version": "1.3.7",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/motion": "^1.3.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.12.0",
+    "@atlaskit/tokens": "^0.13.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -54,7 +54,7 @@
     "@atlaskit/onboarding": "^10.6.0",
     "@atlaskit/popup": "^1.5.0",
     "@atlaskit/section-message": "^6.3.0",
-    "@atlaskit/side-navigation": "^1.4.0",
+    "@atlaskit/side-navigation": "^1.5.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tooltip": "*",
     "@atlaskit/visual-regression": "*",

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/page-layout"
 
@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -210,3 +211,16 @@ export const usePageLayoutResize: () => {
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0",
+  "react-dom": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->