Hardcoded heading levels in components cause Accessibility problems

[bvo-sf]

There are components in the DSR project that uses hardcoded heading tags which causes issues with illogical heading orders. Axe-core rule

Ex:

<h1> First Heading </h1>
<SetupAssistant ...>
 <SetupAssistantStep
  header={(<h2>Should be a h2 tag</h2>)}
  ...
 /> 
</SetupAssistant>

SetupAssistantStep generates a parent <h3> and renders the heading prop as a child, breaking the logical ordering of headings. The tag is rendered on this line.

This scenario can also be found in the Tree Component

Beyond updating the components in DSR, I do not see a way to maintain a logical heading order.

[welcome[bot]]

Thanks for opening your first issue! :wave: If you have found this library helpful, please star it. A maintainer will try to respond within 7 days. If you haven’t heard anything by then, please bump this thread.

[bvo-sf]

Suggestion: The heading tags should be changed to a more general tag span, div, ect to allow developers the option to specify the heading as a prop.