@atlaskit/checkbox - npm Package Compare versions

Comparing version 13.5.2 to 13.6.0

CHANGELOG.md

 # @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
@@ -4,0 +13,0 @@

dist/cjs/checkbox.js

@@ -18,3 +18,6 @@ "use strict";
 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
@@ -106,2 +109,14 @@ /* eslint-disable @atlaskit/design-system/no-nested-styles */
   },
+  // 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)': {
@@ -188,3 +203,3 @@ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     packageName: "@atlaskit/checkbox",
-    packageVersion: "13.5.2"
+    packageVersion: "13.6.0"
   });
@@ -196,2 +211,7 @@ var internalRef = (0, _react.useRef)(null);
   var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
+  (0, _react.useEffect)(function () {
+    if (internalRef.current) {
+      internalRef.current.indeterminate = isIndeterminate;
+    }
+  }, [isIndeterminate]);
   return (0, _react2.jsx)(_internal.Label, {
@@ -220,3 +240,2 @@ isDisabled: isDisabled,
     onChange: onChangeAnalytics,
-    "aria-checked": isIndeterminate ? 'mixed' : isChecked,
     "aria-invalid": isInvalid ? 'true' : undefined,
@@ -223,0 +242,0 @@ "data-testid": testId && "".concat(testId, "--hidden-checkbox"),

dist/cjs/internal/checkbox-icon.js

@@ -11,3 +11,6 @@ "use strict";
 var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
-/**  @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
@@ -14,0 +17,0 @@ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

dist/cjs/internal/label-text.js

@@ -10,4 +10,4 @@ "use strict";
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -14,0 +14,0 @@

dist/cjs/internal/label.js

@@ -11,4 +11,4 @@ "use strict";
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -15,0 +15,0 @@

dist/cjs/internal/required-indicator.js

@@ -11,4 +11,4 @@ "use strict";
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -15,0 +15,0 @@

dist/es2019/checkbox.js

 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';
 
@@ -96,2 +99,14 @@ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
   },
+  // 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)': {
@@ -172,3 +187,3 @@ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     packageName: "@atlaskit/checkbox",
-    packageVersion: "13.5.2"
+    packageVersion: "13.6.0"
   });
@@ -180,2 +195,7 @@ const internalRef = useRef(null);
   const isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
+  useEffect(() => {
+    if (internalRef.current) {
+      internalRef.current.indeterminate = isIndeterminate;
+    }
+  }, [isIndeterminate]);
   return jsx(Label, {
@@ -204,3 +224,2 @@ isDisabled: isDisabled,
     onChange: onChangeAnalytics,
-    "aria-checked": isIndeterminate ? 'mixed' : isChecked,
     "aria-invalid": isInvalid ? 'true' : undefined,
@@ -207,0 +226,0 @@ "data-testid": testId && `${testId}--hidden-checkbox`,

dist/es2019/internal/checkbox-icon.js

@@ -1,2 +0,5 @@
-/**  @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { memo, useMemo } from 'react';
@@ -3,0 +6,0 @@

dist/es2019/internal/label-text.js

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

dist/es2019/internal/label.js

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

dist/es2019/internal/required-indicator.js

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

dist/esm/checkbox.js

@@ -5,4 +5,7 @@ import _extends from "@babel/runtime/helpers/extends";
 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';
 
@@ -100,2 +103,14 @@ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
   },
+  // 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)': {
@@ -182,3 +197,3 @@ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     packageName: "@atlaskit/checkbox",
-    packageVersion: "13.5.2"
+    packageVersion: "13.6.0"
   });
@@ -190,2 +205,7 @@ var internalRef = useRef(null);
   var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
+  useEffect(function () {
+    if (internalRef.current) {
+      internalRef.current.indeterminate = isIndeterminate;
+    }
+  }, [isIndeterminate]);
   return jsx(Label, {
@@ -214,3 +234,2 @@ isDisabled: isDisabled,
     onChange: onChangeAnalytics,
-    "aria-checked": isIndeterminate ? 'mixed' : isChecked,
     "aria-invalid": isInvalid ? 'true' : undefined,
@@ -217,0 +236,0 @@ "data-testid": testId && "".concat(testId, "--hidden-checkbox"),

dist/esm/internal/checkbox-icon.js

@@ -1,2 +0,5 @@
-/**  @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { memo, useMemo } from 'react';
@@ -3,0 +6,0 @@

dist/esm/internal/label-text.js

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

dist/esm/internal/label.js

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

dist/esm/internal/required-indicator.js

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

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

 /**
  * @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;

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

 /**
  * @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;

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

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

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

 /**
  * @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;

dist/types/internal/label.d.ts

 /**
  * @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;

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

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

package.json

 {
 	"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.",
@@ -44,5 +44,5 @@ "publishConfig": {
 		"@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",
@@ -58,3 +58,3 @@ "@emotion/react": "^11.7.1"
 		"@af/visual-regression": "*",
-		"@atlaskit/primitives": "^10.1.0",
+		"@atlaskit/primitives": "^11.1.0",
 		"@atlaskit/ssr": "*",
@@ -61,0 +61,0 @@ "@atlaskit/visual-regression": "*",

No alert changes

Improved metrics

Total package byte prevSize

164488

increased by1.73%

Lines of code

2646

increased by2.56%

Dependency changes

• Updated@atlaskit/icon@^22.10.0

• Updated@atlaskit/tokens@^1.57.0