[TreeItem] Checkbox selection - Form elements do not have associated labels - Accessibility(A11y)

[Matt-Butler]

Steps to reproduce

Steps:

1. Navigate to the checkbox example for either simple tree view or rich tree view.
2. Run an accessibility audit using google lighthouse.

Current behavior

Accessibility tests fail on checkboxes missing labels.

Expected behavior

Accessibility tests pass

Context

No response

Your environment

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: Tree, Accessibility

[Matt-Butler]

const CustomCheckbox = React.forwardRef(function CustomCheckbox({ 'aria-label': ariaLabel, checked, className, disabled, onChange, tabIndex }: CheckboxProps, ref: React.Ref<HTMLInputElement>) {
  return <Checkbox inputProps={{ 'aria-label': ariaLabel }} inputRef={ref} checked={checked} className={className} disabled={disabled} onChange={onChange} tabIndex={tabIndex} />
})

const CustomTreeItem = React.forwardRef(function CustomTreeItem(props: TreeItem2Props, ref: React.Ref<HTMLLIElement>) {
  return <TreeItem2 {...props} ref={ref} slots={{ checkbox: (props2) => <CustomCheckbox {...props2} aria-label={props.label} /> }} />
})

export function CustomCheckboxTree() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 290 }}>
      <RichTreeView multiSelect checkboxSelection items={MUI_X_PRODUCTS} slots={{ item: CustomTreeItem }} />
    </Box>
  )
}

Here is a work around I created.

[flaviendelangle]

Thanks for the report I can confirm that we miss an aria-label on the checkbox element.

The data grid sets "Select row" / "Unselect row", but we need to introduce a localization behavior to be able to do the same.