@atlaskit/menu 2.1.3 → 2.1.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/menu
 
+## 2.1.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.1.4
+
+### Patch Changes
+
+- [#58913](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58913) [`36796c121e2a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/36796c121e2a) - [ux] This change includes heading role for HeadingItem and new prop `headingLevel` to specify the level of heading to be defined by assistive technologies.
+
 ## 2.1.3
 
 ### Patch Changes

package/dist/cjs/menu-item/heading-item.js

@@ -14,7 +14,7 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _typography = require("@atlaskit/theme/typography");
-var _excluded = ["children", "testId", "id", "cssFn", "className"];
+var _excluded = ["children", "testId", "headingLevel", "id", "cssFn", "className"];
 /** @jsx jsx */
 var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
 var itemHeadingFontSize = _typography.headingSizes.h100.size;
@@ -39,6 +39,8 @@ var headingStyles = (0, _react2.css)({
 var HeadingItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var children = _ref.children,
     testId = _ref.testId,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? 2 : _ref$headingLevel,
     id = _ref.id,
     _ref$cssFn = _ref.cssFn,
     cssFn = _ref$cssFn === void 0 ? _noop.default : _ref$cssFn,
@@ -52,6 +54,8 @@ var HeadingItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     css: [headingStyles,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     UNSAFE_overrides],
+    role: "heading",
+    "aria-level": headingLevel,
     "data-testid": testId,
     "data-ds--menu--heading-item": true,
     id: id,

package/dist/es2019/menu-item/heading-item.js

@@ -30,6 +30,7 @@ const headingStyles = css({
 const HeadingItem = /*#__PURE__*/memo(({
   children,
   testId,
+  headingLevel = 2,
   id,
   cssFn = noop,
   // Although this isn't defined on props it is available because we've used
@@ -47,6 +48,8 @@ const HeadingItem = /*#__PURE__*/memo(({
     css: [headingStyles,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     UNSAFE_overrides],
+    role: "heading",
+    "aria-level": headingLevel,
     "data-testid": testId,
     "data-ds--menu--heading-item": true,
     id: id,

package/dist/esm/menu-item/heading-item.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "testId", "id", "cssFn", "className"];
+var _excluded = ["children", "testId", "headingLevel", "id", "cssFn", "className"];
 /** @jsx jsx */
 import { memo } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -32,6 +32,8 @@ var headingStyles = css({
 var HeadingItem = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     testId = _ref.testId,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? 2 : _ref$headingLevel,
     id = _ref.id,
     _ref$cssFn = _ref.cssFn,
     cssFn = _ref$cssFn === void 0 ? noop : _ref$cssFn,
@@ -45,6 +47,8 @@ var HeadingItem = /*#__PURE__*/memo(function (_ref) {
     css: [headingStyles,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     UNSAFE_overrides],
+    role: "heading",
+    "aria-level": headingLevel,
     "data-testid": testId,
     "data-ds--menu--heading-item": true,
     id: id,

package/dist/types/menu-item/heading-item.d.ts

@@ -9,5 +9,5 @@ import type { HeadingItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, id, cssFn, className: UNSAFE_className, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
+declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, headingLevel, id, cssFn, className: UNSAFE_className, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
 export default HeadingItem;

package/dist/types/types.d.ts

@@ -111,7 +111,7 @@ export interface SectionProps {
     };
     /**
      * The text passed into the internal HeadingItem. If a title is not provided,
-     * the HeadingItem will not be rendered, and this component acts as a regular Section
+     * the HeadingItem will not be rendered, and this component acts as a regular Section.
      */
     title?: string;
     /**
@@ -282,12 +282,12 @@ export interface CustomItemProps<TCustomComponentProps = CustomItemComponentProp
     /**
       Custom component to render as an item. This can be both a functional component or a class component.
   
-      __Will return `null` if no component is defined.__
+      __Will return `null` if no component is defined__.
   
       Props passed to `CustomItem` will be passed down to this component. If the props for `component` have TypeScript types,
       CustomItem will extend them, providing type safety for your custom item.
   
-      e.g. `<CustomItem to="/link" component={RouterLink} />`
+      E.g. `<CustomItem to="/link" component={RouterLink} />`.
   
       __NOTE:__ Make sure the reference for this component does not change between renders else undefined behavior may happen.
      */
@@ -349,6 +349,11 @@ export interface HeadingItemProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * Specifies the heading level in the document structure.
+     * If not specified, level 2 will be applied by default.
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 export interface SkeletonHeadingItemProps {
     /**

package/dist/types-ts4.5/menu-item/heading-item.d.ts

@@ -9,5 +9,5 @@ import type { HeadingItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, id, cssFn, className: UNSAFE_className, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
+declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, headingLevel, id, cssFn, className: UNSAFE_className, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
 export default HeadingItem;

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

@@ -111,7 +111,7 @@ export interface SectionProps {
     };
     /**
      * The text passed into the internal HeadingItem. If a title is not provided,
-     * the HeadingItem will not be rendered, and this component acts as a regular Section
+     * the HeadingItem will not be rendered, and this component acts as a regular Section.
      */
     title?: string;
     /**
@@ -282,12 +282,12 @@ export interface CustomItemProps<TCustomComponentProps = CustomItemComponentProp
     /**
       Custom component to render as an item. This can be both a functional component or a class component.
   
-      __Will return `null` if no component is defined.__
+      __Will return `null` if no component is defined__.
   
       Props passed to `CustomItem` will be passed down to this component. If the props for `component` have TypeScript types,
       CustomItem will extend them, providing type safety for your custom item.
   
-      e.g. `<CustomItem to="/link" component={RouterLink} />`
+      E.g. `<CustomItem to="/link" component={RouterLink} />`.
   
       __NOTE:__ Make sure the reference for this component does not change between renders else undefined behavior may happen.
      */
@@ -349,6 +349,11 @@ export interface HeadingItemProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * Specifies the heading level in the document structure.
+     * If not specified, level 2 will be applied by default.
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 export interface SkeletonHeadingItemProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -45,9 +45,9 @@
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^1.13.0",
+    "@atlaskit/primitives": "^2.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.29.0",
+    "@atlaskit/tokens": "^1.35.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -60,7 +60,6 @@
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "*",
     "@emotion/jest": "^11.8.0",