[a11y]: StructuredList: use native HTML table elements

[wkeese]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

1.70.0

React version

18

Automated testing tool and ruleset

https://www.w3.org/TR/aria-in-html/#rule1

Assistive technology

none

Description

The first rule of ARIA use is:

If you can use a native HTML element [HTML51] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

Additionally, SonarQube has started to flag code that doesn't do that, claiming that using elements makes code more accessible. One error message I got from SonarQube (for some different code) was:

Use instead of the "meter" role to ensure accessibility across all devices.

Even if that's not true, elements still make the DOM easier to understand.

Strangely, the StructuredList components go out of their way not to use native HTML elements. I.E instead of

<table>

it does

<div role="table" class="cds--structured-list">

where cds--structured-list is defined as

.cds--structured-list {
   display: table;
}

Likewise for all the other StructuredList components, they could (and should) just use <tr>, <td> etc. and then you don't need a role or setting CSS's display property.

For some reason this wasn't fixed in #5065, #11986, #8172, etc.

WCAG 2.1 Violation

No response

Reproduction/example

https://react.carbondesignsystem.com/?path=/docs/components-structuredlist--overview

Steps to reproduce

N/A

Suggested Severity

None

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems