Indeterminate Checkbox: screenreader reads "unticked" on indeterminate state

[silvalaura]

Component:
Indeterminate Checkbox

Description of bug:
screen readers read unticked on indeterminate state

Expected bahavior:
https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox-mixed/

Steps to reproduce:
Navigate to https://storybook-preview-dev--upbeat-sinoussi-f675aa.netlify.app/?path=/story/indeterminate-checkbox--default
test with screenreader

Relates to #1231

Expected Behavior
An indeterminate checkbox is read as mixed

Notes
This affects DataGrid, but not TreeView

[silvalaura]

This doesn't fix this bug, but we should update our storybook example when we fix this:

export const Behavior = () => {
  const [checkedItems, setCheckedItems] = React.useState<Array<boolean>>([
    true,
    false,
    false,
    false,
  ]);

  const [status, setStatus] = React.useState<IndeterminateCheckboxStatus>(
    IndeterminateCheckboxStatus.indeterminate
  );

  function getStatus(items: Array<boolean>) {
    return items.every(Boolean)
      ? IndeterminateCheckboxStatus.checked
      : items.some(Boolean)
      ? IndeterminateCheckboxStatus.indeterminate
      : IndeterminateCheckboxStatus.unchecked;
  }

  function handleUpdateIndeterminateChecked(
    event: React.ChangeEvent<HTMLInputElement>
  ) {
    const updatedCheckedItems = Array(4).fill(event.target.checked);
    setCheckedItems(updatedCheckedItems);
    setStatus(getStatus(updatedCheckedItems));
  }

  function handleColorChecked(
    index: number,
    event: React.ChangeEvent<HTMLInputElement>
  ) {
    const updatedCheckedItems = [...checkedItems];
    updatedCheckedItems[index] = event.target.checked;
    setCheckedItems(updatedCheckedItems);
    setStatus(getStatus(updatedCheckedItems));
  }

  return (
    <>
      <FormGroup labelText="Colors group" isTextVisuallyHidden>
        <IndeterminateCheckbox
          onChange={handleUpdateIndeterminateChecked}
          status={status}
          labelText="Colors"
          id="indeterminateCheckbox"
        />
        <div style={{ marginLeft: magma.spaceScale.spacing08 }}>
          <Checkbox
            checked={checkedItems[0]}
            onChange={e => handleColorChecked(0, e)}
            labelText="Red"
            id="Red"
          />
          <Checkbox
            checked={checkedItems[1]}
            onChange={e => handleColorChecked(1, e)}
            labelText="Blue"
            id="Blue"
          />
          <Checkbox
            checked={checkedItems[2]}
            onChange={e => handleColorChecked(2, e)}
            labelText="Green"
            id="Green"
          />
          <Checkbox
            checked={checkedItems[3]}
            onChange={e => handleColorChecked(3, e)}
            labelText="Yellow"
            id="Yellow"
          />
        </div>
      </FormGroup>
    </>
  );