Remove generated faulty ARIA attributes by Material-UI

I have been using react and material-ui and recently I stumbled onto a problem with Material-UI somehow automatically generating unnecessary ARIA tags.

I am wondering if there is a way to remove the ARIA tags generated by Material-UI…

Here is an example…

<FormBox>
  <Box p={5}>
    <FormControl error={!!errors.agreeTermsConditions} required>
      <Controller
        control={control}
        id="agreeTermsConditions"
        name="agreeTermsConditions"
        render={(props) => (
          <label className="MuiFormControlLabel-root">
            <Checkbox
              checked={props.value}
              color="primary"
              onChange={(e) => {
                props.onChange(e.target.checked);
              }}
            />
            <span>{t("step1.agreeTnc")}</span>
            {!!errors.agreeTermsConditions ? (
              <img
                id="agreeTermsConditions_errorIcon"
                className="errorWarning"
                src={errorWarning}
                alt="error"
              />
            ) : (
              <div></div>
            )}
          </label>
        )}
      />
    </FormControl>
  </Box>
</FormBox>

Below is the generated HTML for the checkbox

<label class="MuiFormControlLabel-root">
    <span class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-44 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary" aria-disabled="false">
        <span class="MuiIconButton-label">
            <input class="PrivateSwitchBase-input-47" type="checkbox" data-indeterminate="false" value="">
            <svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
            </svg>
        </span>
        <span class="MuiTouchRipple-root"></span>
    </span>
    <span>I have read, understood and agreed with the above terms and conditions.</span>
    <div></div>
</label>

The checker tool complains that aria-disabled in a <span> tag is invalid.

Edit: Update to include the source code for the checkbox and the generated HTML

It be helpful to see the code that generates that rather than a screenshot of some HTML

Hi DanCouper,

I have update my first post with the code for the checkbox.

Well, the error is correct, because you can’t apply disabled to a <span>, it only works on form input elements (input, textareas, buttons etc) or fieldsets.

The error seems to be caused by the way one of the outer elements (the <FormControl> I think) is interacting with the <Controller> component (which is from React Hook Form???). The MUI stuff is injecting the aria tags automatically, and the way you’ve structured things seems to have confused that process.

I’d strongly suggest using the Material UI components provided to do what you’re trying to do rather than just writing bare <label> tags and your own error rendering logic (MUI already has components specifically for these things that I assume will not trigger the incorrect injection of attributes). And do you really need to include hook form here? That’s quite a complex dependency that also does its own thing that you’re squeezing into what is already a complex UI library

1 Like