@atlaskit/checkbox 13.5.2 → 13.6.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/checkbox
 
+## 13.6.0
+
+### Minor Changes
+
+- [#126756](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/126756)
+  [`be7f8b7ab5827`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/be7f8b7ab5827) -
+  Accessibility changes. Removed `aria-checked` attribute, and set `indeterminate` to `true` if
+  nested checkbox is checked.
+
 ## 13.5.2
 
 ### Patch Changes

package/dist/cjs/checkbox.js

@@ -15,7 +15,10 @@ var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _colors = require("@atlaskit/theme/colors");
 var _internal = require("./internal");
 var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss"];
-/**  @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 var checkboxStyles = (0, _react2.css)({
@@ -102,6 +105,18 @@ var checkboxStyles = (0, _react2.css)({
   '&:disabled:checked + svg': {
     '--checkbox-tick-color': 'var(--local-tick-disabled)'
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-19551
+  '&:indeterminate + svg': {
+    '--checkbox-background-color': 'var(--local-background-checked)',
+    '--checkbox-border-color': 'var(--local-border-checked)',
+    '--checkbox-tick-color': 'var(--local-tick-checked)'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-19551
+  '&:disabled:indeterminate + svg': {
+    '--checkbox-background-color': 'var(--local-background-disabled)',
+    '--checkbox-border-color': 'var(--local-border-disabled)',
+    '--checkbox-tick-color': 'var(--local-tick-disabled)'
+  },
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '& + svg': {
@@ -183,13 +198,18 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "13.5.2"
+    packageVersion: "13.6.0"
   });
   var internalRef = (0, _react.useRef)(null);
   var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);
 
   // Use isChecked from the state if it is controlled
   var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
+  (0, _react.useEffect)(function () {
+    if (internalRef.current) {
+      internalRef.current.indeterminate = isIndeterminate;
+    }
+  }, [isIndeterminate]);
   return (0, _react2.jsx)(_internal.Label, {
     isDisabled: isDisabled,
     label: label,
@@ -213,7 +233,6 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     required: isRequired,
     css: checkboxStyles,
     onChange: onChangeAnalytics,
-    "aria-checked": isIndeterminate ? 'mixed' : isChecked,
     "aria-invalid": isInvalid ? 'true' : undefined,
     "data-testid": testId && "".concat(testId, "--hidden-checkbox"),
     "data-invalid": isInvalid ? 'true' : undefined

package/dist/cjs/internal/checkbox-icon.js

@@ -8,7 +8,10 @@ exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
-/**  @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/internal/label-text.js

@@ -7,8 +7,8 @@ exports.default = LabelText;
 var _react = require("@emotion/react");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var labelTextStyles = (0, _react.css)({

package/dist/cjs/internal/label.js

@@ -8,8 +8,8 @@ var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var baseStyles = (0, _react.css)({

package/dist/cjs/internal/required-indicator.js

@@ -8,8 +8,8 @@ var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var requiredIndicatorStyles = (0, _react.css)({

package/dist/es2019/checkbox.js

@@ -1,6 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-/**  @jsx jsx */
-import { forwardRef, memo, useCallback, useRef, useState } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -93,6 +96,18 @@ const checkboxStyles = css({
   '&:disabled:checked + svg': {
     '--checkbox-tick-color': 'var(--local-tick-disabled)'
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-19551
+  '&:indeterminate + svg': {
+    '--checkbox-background-color': 'var(--local-background-checked)',
+    '--checkbox-border-color': 'var(--local-border-checked)',
+    '--checkbox-tick-color': 'var(--local-tick-checked)'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-19551
+  '&:disabled:indeterminate + svg': {
+    '--checkbox-background-color': 'var(--local-background-disabled)',
+    '--checkbox-border-color': 'var(--local-border-disabled)',
+    '--checkbox-tick-color': 'var(--local-tick-disabled)'
+  },
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '& + svg': {
@@ -168,13 +183,18 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "13.5.2"
+    packageVersion: "13.6.0"
   });
   const internalRef = useRef(null);
   const mergedRefs = mergeRefs([internalRef, ref]);
 
   // Use isChecked from the state if it is controlled
   const isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
+  useEffect(() => {
+    if (internalRef.current) {
+      internalRef.current.indeterminate = isIndeterminate;
+    }
+  }, [isIndeterminate]);
   return jsx(Label, {
     isDisabled: isDisabled,
     label: label,
@@ -198,7 +218,6 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     required: isRequired,
     css: checkboxStyles,
     onChange: onChangeAnalytics,
-    "aria-checked": isIndeterminate ? 'mixed' : isChecked,
     "aria-invalid": isInvalid ? 'true' : undefined,
     "data-testid": testId && `${testId}--hidden-checkbox`,
     "data-invalid": isInvalid ? 'true' : undefined

package/dist/es2019/internal/checkbox-icon.js

@@ -1,4 +1,7 @@
-/**  @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { memo, useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/internal/label-text.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 const labelTextStyles = css({

package/dist/es2019/internal/label.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';

package/dist/es2019/internal/required-indicator.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { R500 } from '@atlaskit/theme/colors';

package/dist/esm/checkbox.js

@@ -2,8 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss"];
-/**  @jsx jsx */
-import { forwardRef, memo, useCallback, useRef, useState } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -96,6 +99,18 @@ var checkboxStyles = css({
   '&:disabled:checked + svg': {
     '--checkbox-tick-color': 'var(--local-tick-disabled)'
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-19551
+  '&:indeterminate + svg': {
+    '--checkbox-background-color': 'var(--local-background-checked)',
+    '--checkbox-border-color': 'var(--local-border-checked)',
+    '--checkbox-tick-color': 'var(--local-tick-checked)'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-19551
+  '&:disabled:indeterminate + svg': {
+    '--checkbox-background-color': 'var(--local-background-disabled)',
+    '--checkbox-border-color': 'var(--local-border-disabled)',
+    '--checkbox-tick-color': 'var(--local-tick-disabled)'
+  },
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '& + svg': {
@@ -177,13 +192,18 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "13.5.2"
+    packageVersion: "13.6.0"
   });
   var internalRef = useRef(null);
   var mergedRefs = mergeRefs([internalRef, ref]);
 
   // Use isChecked from the state if it is controlled
   var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
+  useEffect(function () {
+    if (internalRef.current) {
+      internalRef.current.indeterminate = isIndeterminate;
+    }
+  }, [isIndeterminate]);
   return jsx(Label, {
     isDisabled: isDisabled,
     label: label,
@@ -207,7 +227,6 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     required: isRequired,
     css: checkboxStyles,
     onChange: onChangeAnalytics,
-    "aria-checked": isIndeterminate ? 'mixed' : isChecked,
     "aria-invalid": isInvalid ? 'true' : undefined,
     "data-testid": testId && "".concat(testId, "--hidden-checkbox"),
     "data-invalid": isInvalid ? 'true' : undefined

package/dist/esm/internal/checkbox-icon.js

@@ -1,4 +1,7 @@
-/**  @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { memo, useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/esm/internal/label-text.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 var labelTextStyles = css({

package/dist/esm/internal/label.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';

package/dist/esm/internal/required-indicator.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { R500 } from '@atlaskit/theme/colors';

package/dist/types/internal/label-text.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type LabelTextProps } from '../types';
 export default function LabelText({ children }: LabelTextProps): jsx.JSX.Element;

package/dist/types/internal/label.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type LabelProps } from '../types';
 export default function Label({ children, isDisabled, testId, label, id, xcss }: LabelProps): jsx.JSX.Element;

package/dist/types/internal/required-indicator.d.ts

@@ -1,6 +1,6 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 export default function RequiredIndicator(): jsx.JSX.Element;

package/dist/types-ts4.5/internal/label-text.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type LabelTextProps } from '../types';
 export default function LabelText({ children }: LabelTextProps): jsx.JSX.Element;

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

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type LabelProps } from '../types';
 export default function Label({ children, isDisabled, testId, label, id, xcss }: LabelProps): jsx.JSX.Element;

package/dist/types-ts4.5/internal/required-indicator.d.ts

@@ -1,6 +1,6 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 export default function RequiredIndicator(): jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/checkbox",
-	"version": "13.5.2",
+	"version": "13.6.0",
 	"description": "A checkbox is an input control that allows a user to select one or more options from a number of choices.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,9 +41,9 @@
 		"@atlaskit/analytics-next": "^9.3.0",
 		"@atlaskit/css": "^0.3.0",
 		"@atlaskit/ds-lib": "^2.3.0",
-		"@atlaskit/icon": "^22.6.0",
+		"@atlaskit/icon": "^22.10.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.53.0",
+		"@atlaskit/tokens": "^1.57.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -54,7 +54,7 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/primitives": "^10.1.0",
+		"@atlaskit/primitives": "^11.1.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",