fix(Indeterminate Checkbox): Improved accessibility for `Indeterminat…

…e status (#1231) (#1428)
cengage · Sep 19, 2024 · 096e923 · 096e923
1 parent 950c269
commit 096e923
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/.changeset/a11y-intermediateCheckbox.md b/.changeset/a11y-intermediateCheckbox.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(Indeterminate Checkbox): Improved accessibility for `Indeterminate` status
diff --git a/packages/react-magma-dom/src/components/IndeterminateCheckbox/index.tsx b/packages/react-magma-dom/src/components/IndeterminateCheckbox/index.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import { ThemeContext } from '../../theme/ThemeContext';
 import {
   CheckboxProps,
-  HiddenLabelText,
   HiddenInput,
+  HiddenLabelText,
   StyledFakeInput,
 } from '../Checkbox';
 import {
@@ -15,7 +15,7 @@ import { FormGroupContext } from '../FormGroup';
 import { InputMessage } from '../Input/InputMessage';
 import { StyledLabel } from '../SelectionControls/StyledLabel';
 import { StyledContainer } from '../SelectionControls/StyledContainer';
-import { useGenerateId, Omit } from '../../utils';
+import { Omit, useGenerateId } from '../../utils';
 import { VisuallyHidden } from '../VisuallyHidden';
 import { Announce } from '../Announce';
 import { I18nContext } from '../../i18n';
@@ -143,11 +143,14 @@ export const IndeterminateCheckbox = React.forwardRef<
 
   const isInverse = useIsInverse(props.isInverse);
 
+  const ariaCheckedValue = isIndeterminate ? 'mixed' : !isUnchecked;
+
   return (
     <>
       <StyledContainer style={containerStyle}>
         <HiddenInput
           {...other}
+          aria-checked={ariaCheckedValue}
           aria-describedby={describedBy}
           checked={isChecked}
           data-testid={testId}