From 77b62714236d16ed33c222b39e4efb5ee9973323 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 15 Oct 2025 13:35:44 +0100
Subject: [PATCH] Checkbox: Improve accessibility of the `indeterminate` state
 (#112388)

use indeterminate instead of aria-checked
---
 eslint-suppressions.json                      |  5 -----
 .../src/components/Forms/Checkbox.story.tsx   |  4 +---
 .../src/components/Forms/Checkbox.tsx         | 22 ++++++++++++++-----
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 237e55d979c..2ceaa530a83 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -696,11 +696,6 @@
       "count": 3
     }
   },
-  "packages/grafana-ui/src/components/Forms/Checkbox.story.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "packages/grafana-ui/src/components/Forms/Form.story.tsx": {
     "react-hooks/rules-of-hooks": {
       "count": 9
diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
index f79388911bd..f08f7a996af 100644
--- a/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
@@ -18,8 +18,6 @@ const meta: Meta<typeof Checkbox> = {
     controls: {
       exclude: ['value', 'htmlValue'],
     },
-    // TODO fix a11y issue in story and remove this
-    a11y: { test: 'off' },
   },
 };
 
@@ -94,7 +92,7 @@ export const AllStates: StoryFn<typeof Checkbox> = (args) => {
         <Checkbox value={checked} onChange={onChange} {...args} />
         <Checkbox value={true} label="Checked" />
         <Checkbox value={false} label="Unchecked" />
-        <Checkbox value={false} indeterminate={true} label="Interdeterminate" />
+        <Checkbox value={false} indeterminate={true} label="Indeterminate" />
         <Checkbox value={false} invalid={true} label="Invalid and unchecked" />
         <Checkbox value={true} invalid={true} label="Invalid and checked" />
       </Stack>
diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
index 29b8dc5e699..173f821e287 100644
--- a/packages/grafana-ui/src/components/Forms/Checkbox.tsx
+++ b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
@@ -18,7 +18,7 @@ export interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, 'value'
   value?: boolean;
   /** htmlValue allows to specify the input "value" attribute */
   htmlValue?: string | number;
-  /** Sets the checkbox into a "mixed" state. This is only a visual change and does not affect the value. */
+  /** Sets the checkbox into a "mixed" state */
   indeterminate?: boolean;
   /** Show an invalid state around the input */
   invalid?: boolean;
@@ -39,8 +39,6 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     );
     const styles = useStyles2(getCheckboxStyles, invalid);
 
-    const ariaChecked = indeterminate ? 'mixed' : undefined;
-
     return (
       <label className={cx(styles.wrapper, className)}>
         <div className={styles.checkboxWrapper}>
@@ -51,9 +49,21 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
             disabled={disabled}
             onChange={handleOnChange}
             value={htmlValue}
-            aria-checked={ariaChecked}
             {...inputProps}
-            ref={ref}
+            ref={(element) => {
+              if (element && indeterminate) {
+                element.indeterminate = true;
+              }
+
+              // we have to manually assign the ref since we need to modify the indeterminate property
+              if (ref) {
+                if (typeof ref === 'function') {
+                  ref(element);
+                } else {
+                  ref.current = element;
+                }
+              }
+            }}
           />
           <span className={styles.checkmark} />
         </div>
@@ -139,7 +149,7 @@ export const getCheckboxStyles = (theme: GrafanaTheme2, invalid = false) => {
     }),
 
     inputIndeterminate: css({
-      "&[aria-checked='mixed'] + span": {
+      '&:indeterminate + span': {
         border: `1px solid ${getBorderColor(theme.colors.primary.main)}`,
         background: theme.colors.primary.main,