TextField variant="outlined" has embedded accessibility issue

I have been scanning our app for accessibility issues with the IBM Accessibility Chrome plugin in WCAG 2.1 (A,AA) compliance mode. The tool found an issue in the following component <TextField label="Outlined" variant="outlined" />. It can even be reproduced/detected on the official Material-UI demo page.

The detected problem is that <fieldset> element does not have a <legend>. Looking at the generated HTML, I can see that the there’s a legend within the fieldset, however its style has visibility: hidden, which would hide it from screen readers.

I’m attaching screenshots of the issue.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The legend has style visibility: hidden which prevents it from screen readers.

Expected Behavior 🤔

The legend is styled differently so that visibility is not hidden. I have tried to override the style in a theme (code below), but that introduced other CSS incompatibilities:

export const defaultTheme = createMuiTheme({
  overrides: {
    PrivateNotchedOutline: {
      legendLabelled: {
        // // Make it visible the hard way for accessibility - https://webaim.org/techniques/css/invisiblecontent/
        visibility: "inherit !important",
        position: "absolute", // This adds more padding to the outlined text field :(
        left: "-10000px",
        top: "auto",
        width: "1px",
        height: "1px",
        overflow: "hidden",
        color: "black",
      },
    },
  }
});

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0
React	v16.13.1
Browser	Chrome
TypeScript	4.0.2

[eps1lon]

There’s some discussion in ARIA related repos that assistive technology should be allowed to ignore aria-hidden where it’s used wrongly and this might be such an instance. Since the fieldset is visible aria-hidden might be considered a mistake. Since we do use it presentational and not to group form elements role="presentation" might be “more correct”.

Though in the end it’s more important to fix issues with assistive technology not with 3rd party tools. We can certainly report their defects but we can’t be burdened with fixing it for them as well. We simply don’t have the bandwidth for that.

[eps1lon]

Thanks for the report!

This fieldset is for styling purposes only i.e. decorative. Did you find an issue that impacts actual assistive technology like screen readers?

Maybe we should just mark the fieldset as role="presentation" since that’s what it is.