Fix accessibility issue: StepConnector is invalid in list

[ArmandRedgate]

(This is my first PR here so please bear with me)

Why?

Originally raised in this comment

The goal here is to fix accessibility errors around StepConnectors as a follow-up to #47687. Namely, StepConnectors are divs, which are not permitted as children to ol elements.

What?

• Added aria-hidden to StepConnectors
• Fixed another accessibility issue in Step docs where there was a missing aria-label.

Testing

I have tested this fix by checking the docs site both before and after the change and finding that the accessibility error is now fixed.

Before

After

• I have followed (at least) the PR section of the contributing guide.

[code-infra-dashboard]

Deploy preview

https://deploy-preview-48397--material-ui.netlify.app/

Bundle size

Bundle	Parsed size	Gzip size
@mui/material	🔺+17B(0.00%)	🔺+12B(+0.01%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/private-theming	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.

[silviuaavram]

Thanks for the PR! Not sure this fixes the problem of incorrect markup. I would suggest doing something different, like changing the markup from div to li for StepConnector as well, whenever the alternativeLabel is false. The StepConnector could also have the role="separator". We should also add unit tests for these changes.

@mj12albert @siriwatknp any thoughts?

[silviuaavram]

left a comment.

[ArmandRedgate]

changing the markup from div to li for StepConnector as well

Hmmm.. I'm not sure there's any benefit in screen reader users even needing to see these connectors, as they are purely visual indicators of a step-by-step association. It should be enough to exclude them from inspection by screen readers.

They especially shouldn't be read as list items, as otherwise screen readers may give incorrect list length when read out.

The separator role is more for horizontal rules between unrelated pieces of content or to group subgroups of menuitems, neither of which apply here

The separator role indicates the element is a divider that separates and distinguishes sections of content or groups of menuitems. The implicit ARIA role of the native thematic break hr element is separator.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/separator_role

We could change the element to hr and hide it with aria-hidden, but I don't see the point with that.

To me hiding these elements from the accessibility tree as purely visual elements seems like the best course of action.

[ArmandRedgate]

We should also add unit tests for these changes.

That makes sense. This is my first PR so I'm not sure how best to write those. Feel free to add some yourself or point me to some examples and I'll add them 🙂

[silviuaavram]

The error is about incorrect markup, so we need to address that. We either use <li> for connectors, and add a role to skip them from the order, maybe role=presentation, or we need another solution. div with an aria hidden role is still incorrect markup.

[ArmandRedgate]

Ok, I've tried role="presentation" and the error returns:

The reason this is is probably due to this line:

Writing <h2 role="presentation">Democracy Dies in Darkness</h2> removes the heading semantics of the h2 element, making it the equivalent of <div>Democracy Dies in Darkness</div>. The heading role semantics are removed, but the content itself is still available.

The content of the element will still be available to assistive technologies

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/presentation_role

So using role="presentation" effectively switches a tag to a div, but continues to expose the contents, not resolving the problem.

Like I said, switching it to a <li> would be incorrect and cause issues for screen readers. The correct solution is to either:

• Not have the elements there at all.
• Hide them from the accessibility tree.

Scanners seem to be happy with the latter, so I would posit that is the right solution.

[siriwatknp]

Thanks for the PR! Not sure this fixes the problem of incorrect markup. I would suggest doing something different, like changing the markup from div to li for StepConnector as well, whenever the alternativeLabel is false. The StepConnector could also have the role="separator". We should also add unit tests for these changes.

@mj12albert @siriwatknp any thoughts?

I am favor this solution, looks straight forward and sounds most correct with HTML defaults

[siriwatknp]

Ok, I've tried role="presentation" and the error returns:

Not presentation, can you try separator instead.

[silviuaavram]

@ArmandRedgate why is the role separator seems to be ok, not sure why you said it's between groups of unrelated elements.

A separator is a divider that separates and distinguishes sections of content or groups of menuitems.

To me it's saying it groups related content and items. As for the horizontal part, that's not true either, as we can use aria-orientation and explicitly mention the orientation. The MDN docs are also in favor of that, I believe ARIA also specifies it. The other aria attributes do not apply here, since the connector is not going to be focusable.

[ArmandRedgate]

groups of menuitems

This is the bit I'm talking about. Separators are meant to group related content and separate content that isn't related. It sounds to me like an organizational aid, so putting it between each item might be noisy to screen readers, though I haven't tested that yet.

Either way, it seems like the scanner doesn't like role="separator" here, even when I accompany the change with a change of the tag to li:

This might be because we are not building a menu with menuitems here, but a list with listitems.

[silviuaavram]

#48492 FYI @ArmandRedgate