@atlaskit/menu 2.3.1 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/menu
 
+## 2.4.0
+
+### Minor Changes
+
+- [#99829](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99829)
+  [`1e40876a2c40`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1e40876a2c40) -
+  Accessibility improvements. Adds a new `titleId` prop to Section.
+
 ## 2.3.1
 
 ### Patch Changes

package/dist/cjs/internal/components/menu-item-primitive.js

@@ -74,10 +74,10 @@ var primitiveStyles = (0, _react2.css)({
   outline: 0,
   textDecoration: 'none',
   userSelect: 'none',
-  '::-moz-focus-inner': {
+  '&::-moz-focus-inner': {
     border: 0
   },
-  ':hover': {
+  '&:hover': {
     textDecoration: 'none'
   }
 });
@@ -103,14 +103,14 @@ var interactiveStyles = (0, _react2.css)({
 var unselectedStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
   color: 'currentColor',
-  ':visited': {
+  '&:visited': {
     color: 'currentColor'
   },
-  ':hover': {
+  '&:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"),
     color: 'currentColor'
   },
-  ':active': {
+  '&:active': {
     backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.N30, ")"),
     boxShadow: 'none',
     color: 'currentColor'
@@ -150,14 +150,14 @@ var selectedStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-selected, ".concat(_colors.N20, ")"),
   // Fallback set as babel plugin inserts one otherwise
   color: "var(--ds-text-selected, currentColor)",
-  ':visited': {
+  '&:visited': {
     color: "var(--ds-text-selected, currentColor)"
   },
-  ':hover': {
+  '&:hover': {
     backgroundColor: "var(--ds-background-selected-hovered, ".concat(_colors.N20, ")"),
     color: "var(--ds-text-selected, currentColor)"
   },
-  ':active': {
+  '&:active': {
     backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.N30, ")"),
     color: "var(--ds-text-selected, currentColor)"
   }

package/dist/cjs/menu-section/section.js

@@ -15,7 +15,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _typography = require("@atlaskit/theme/typography");
 var _headingItem = _interopRequireDefault(require("../menu-item/heading-item"));
-var _excluded = ["children", "overrides", "title", "testId", "isScrollable", "hasSeparator", "id", "isList", "className"];
+var _excluded = ["children", "overrides", "title", "titleId", "testId", "isScrollable", "hasSeparator", "id", "isList", "className"];
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview */
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
@@ -96,6 +96,7 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     overrides = _ref.overrides,
     title = _ref.title,
+    titleId = _ref.titleId,
     testId = _ref.testId,
     isScrollable = _ref.isScrollable,
     hasSeparator = _ref.hasSeparator,
@@ -141,6 +142,7 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     ,
     css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.section-1px-seperator-borders') ? thinSeparatorStyles : thickSeparatorStyles : noSeparatorStyles],
     "aria-label": title,
+    "aria-labelledby": titleId,
     "data-testid": testId,
     role: "group",
     "data-section": true,

package/dist/es2019/internal/components/menu-item-primitive.js

@@ -63,10 +63,10 @@ const primitiveStyles = css({
   outline: 0,
   textDecoration: 'none',
   userSelect: 'none',
-  '::-moz-focus-inner': {
+  '&::-moz-focus-inner': {
     border: 0
   },
-  ':hover': {
+  '&:hover': {
     textDecoration: 'none'
   }
 });
@@ -92,14 +92,14 @@ const interactiveStyles = css({
 const unselectedStyles = css({
   backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
   color: 'currentColor',
-  ':visited': {
+  '&:visited': {
     color: 'currentColor'
   },
-  ':hover': {
+  '&:hover': {
     backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N20})`,
     color: 'currentColor'
   },
-  ':active': {
+  '&:active': {
     backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${N30})`,
     boxShadow: 'none',
     color: 'currentColor'
@@ -139,14 +139,14 @@ const selectedStyles = css({
   backgroundColor: `var(--ds-background-selected, ${N20})`,
   // Fallback set as babel plugin inserts one otherwise
   color: "var(--ds-text-selected, currentColor)",
-  ':visited': {
+  '&:visited': {
     color: "var(--ds-text-selected, currentColor)"
   },
-  ':hover': {
+  '&:hover': {
     backgroundColor: `var(--ds-background-selected-hovered, ${N20})`,
     color: "var(--ds-text-selected, currentColor)"
   },
-  ':active': {
+  '&:active': {
     backgroundColor: `var(--ds-background-selected-pressed, ${N30})`,
     color: "var(--ds-text-selected, currentColor)"
   }

package/dist/es2019/menu-section/section.js

@@ -87,6 +87,7 @@ const Section = /*#__PURE__*/forwardRef(({
   children,
   overrides,
   title,
+  titleId,
   testId,
   isScrollable,
   hasSeparator,
@@ -134,6 +135,7 @@ const Section = /*#__PURE__*/forwardRef(({
     ,
     css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? getBooleanFF('platform.design-system-team.section-1px-seperator-borders') ? thinSeparatorStyles : thickSeparatorStyles : noSeparatorStyles],
     "aria-label": title,
+    "aria-labelledby": titleId,
     "data-testid": testId,
     role: "group",
     "data-section": true,

package/dist/esm/internal/components/menu-item-primitive.js

@@ -66,10 +66,10 @@ var primitiveStyles = css({
   outline: 0,
   textDecoration: 'none',
   userSelect: 'none',
-  '::-moz-focus-inner': {
+  '&::-moz-focus-inner': {
     border: 0
   },
-  ':hover': {
+  '&:hover': {
     textDecoration: 'none'
   }
 });
@@ -95,14 +95,14 @@ var interactiveStyles = css({
 var unselectedStyles = css({
   backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
   color: 'currentColor',
-  ':visited': {
+  '&:visited': {
     color: 'currentColor'
   },
-  ':hover': {
+  '&:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"),
     color: 'currentColor'
   },
-  ':active': {
+  '&:active': {
     backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(N30, ")"),
     boxShadow: 'none',
     color: 'currentColor'
@@ -142,14 +142,14 @@ var selectedStyles = css({
   backgroundColor: "var(--ds-background-selected, ".concat(N20, ")"),
   // Fallback set as babel plugin inserts one otherwise
   color: "var(--ds-text-selected, currentColor)",
-  ':visited': {
+  '&:visited': {
     color: "var(--ds-text-selected, currentColor)"
   },
-  ':hover': {
+  '&:hover': {
     backgroundColor: "var(--ds-background-selected-hovered, ".concat(N20, ")"),
     color: "var(--ds-text-selected, currentColor)"
   },
-  ':active': {
+  '&:active': {
     backgroundColor: "var(--ds-background-selected-pressed, ".concat(N30, ")"),
     color: "var(--ds-text-selected, currentColor)"
   }

package/dist/esm/menu-section/section.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "overrides", "title", "testId", "isScrollable", "hasSeparator", "id", "isList", "className"];
+var _excluded = ["children", "overrides", "title", "titleId", "testId", "isScrollable", "hasSeparator", "id", "isList", "className"];
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview */
 /** @jsx jsx */
 import { Children, forwardRef, Fragment } from 'react';
@@ -89,6 +89,7 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     overrides = _ref.overrides,
     title = _ref.title,
+    titleId = _ref.titleId,
     testId = _ref.testId,
     isScrollable = _ref.isScrollable,
     hasSeparator = _ref.hasSeparator,
@@ -134,6 +135,7 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ,
     css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? getBooleanFF('platform.design-system-team.section-1px-seperator-borders') ? thinSeparatorStyles : thickSeparatorStyles : noSeparatorStyles],
     "aria-label": title,
+    "aria-labelledby": titleId,
     "data-testid": testId,
     role: "group",
     "data-section": true,

package/dist/types/types.d.ts

@@ -114,6 +114,11 @@ export interface SectionProps {
      * the `HeadingItem` won't be rendered, and this component will act as a regular `Section`.
      */
     title?: string;
+    /**
+     * ID referenced by the menu group wrapper's `aria-labelledby` attribute. This ID should be assigned to the group title element.
+     * Usage of either this, or the `label` attribute is strongly recommended.
+     */
+    titleId?: string;
     /**
      * If your menu contains a list, use this to add `<ul>` and `<li>` tags around the items. This is essential for offering better, accessible semantic markup in a list of items.
      */

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

@@ -114,6 +114,11 @@ export interface SectionProps {
      * the `HeadingItem` won't be rendered, and this component will act as a regular `Section`.
      */
     title?: string;
+    /**
+     * ID referenced by the menu group wrapper's `aria-labelledby` attribute. This ID should be assigned to the group title element.
+     * Usage of either this, or the `label` attribute is strongly recommended.
+     */
+    titleId?: string;
     /**
      * If your menu contains a list, use this to add `<ul>` and `<li>` tags around the items. This is essential for offering better, accessible semantic markup in a list of items.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "A list of options to help users navigate, or perform actions.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -46,7 +46,7 @@
     "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/focus-ring": "^1.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^6.4.0",
+    "@atlaskit/primitives": "^6.5.0",
     "@atlaskit/theme": "^12.8.0",
     "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",