Content of a `<Divider>` is not accessible

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Creating a <Divider> with content, like:

<Divider>
  <h2>Center</h2>
</Divider>

is useful, but has some accessibility issues. <Divider> has role separator which is good, but doesn’t work if you have content inside it. Because all elements inside role separator are presentational, so a heading inside it isn’t read by a screen reader. MDN has an explantation on it.

Expected behavior 🤔

In case the <Divider> has content, it should not set role separator. If it does not have content, it should keep setting role separator automatically.

Alternatives:

• There is no way to remove the default role. You can currently workaround it by setting role generic. Tools like axe will throw an error because it is discouraged to use generic. But I would hope to have a default that doesn’t break screen reader usage and makes it easy to use.

• Setting an aria-label is not an alternative, because it is not supported for separator and not read. It would also not allow to place a heading inside of it.

• An alternative is not to use the <Divider> component and do the styling on a heading manually.

Steps to reproduce 🕹

Steps:

1. Go to https://mui.com/material-ui/react-divider/#dividers-with-text and have a look at the example
2. Try to read the text inside the separators using a screen reader (e.g. voice over in chrome): the screen reader only reads the separator, but not the text content.

Context 🔦

Accessibility is already quite good for mui, just let’s get it even greater 😉

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 12.3.1
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Browsers:
    Chrome: 103.0.5060.53
    Edge: Not Found
    Firefox: 101.0
    Safari: 15.4
  npmPackages:
    @emotion/react:  11.9.3 
    @emotion/styled:  11.9.3 
    @mui/base:  5.0.0-alpha.86 
    @mui/icons-material: ^5.8.4 => 5.8.4 
    @mui/material: ^5.8.4 => 5.8.5 
    @mui/private-theming:  5.8.4 
    @mui/styled-engine:  5.8.0 
    @mui/system:  5.8.5 
    @mui/types:  7.1.4 
    @mui/utils: ^5.8.4 => 5.8.4 
    @types/react: ^17.0.0 => 17.0.45 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components: ^5.3.5 => 5.3.5 
    typescript: ^4.5.2 => 4.5.4 

[Fox32]

@Fox32 Can you confirm that this works?

<Divider component="div" role="presentation">
  <Typography variant="h2">
    Heading
  </Typography>
</Divider>

Looking at https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role, we might not need to remove the role.

“For elements with no required children, any elements nested inside the element with role=“presentation” or role=“none” preserve their semantics.”

Yes I can confirm that this works with a screen reader as expected. The solution doesn’t cause lint errors and axe likes it too. Perfect, thanks!

Btw, I think passing component="div" is not necessary as it is a div automatically if you pass children.

I like that you added the docs section to #33584 for future readers, would look forward to an updated version of it.

[Fox32]

That would be an option too 👍 I can take care of updating the PR during the week.