Html validation issues with v9

[melkras]

Hello everyone,

After migrating to v9 I noticed that my tests are failing with jest html validation ( toHTMLValidate ).

Redundant role "gridcell" on <td> [no-redundant-role]
Redundant role "row" on <tr> [no-redundant-role]
Redundant role "navigation" on <nav> [no-redundant-role]

<button> is missing recommended "type" attribute [no-implicit-button-type]
<th> element must have a valid scope attribute: row, col, rowgroup or colgroup [wcag/h63]

Native html elements don't need their roles re-assigned, for example a td element already has a role of "gridcell" etc.

button had its type and th had its scope assigned in v8 but they are lost in v9.

[gpbl]

Hi @melkras thanks for the report!

If I remember correctly, those redundant role attributes improve the experience with screen readers, so I'm tempted to keep them regardless the linter,

The missing type and scope attributes are definitely missing there. Follow #2469 and #2468 for updates!

[melkras]

Thank you for the quick response!

I believe that Jest's HTML validation is highly effective and should not be overlooked.

Found this about redudant roles:
MDN Web Docs: The MDN article on HTML and Accessibility explicitly states the importance of using native HTML elements and avoiding unnecessary ARIA roles. Adding ARIA roles when native HTML elements already provide sufficient semantics can cause duplication or conflict with screen readers.

[gpbl]

@melkras I could merge #2475 with the following:

• add tests to validate HTML
• add missing type="button" to Day buttons
• add scope="col" to weekdays headers
• add scope="row" to week numbers cells
• removed unnecessary role attributes.
  • note: jest tests must be updated using cell instead gridcell role

Thanks for your suggestions!

[gpbl]

Update to v9.1.2 to render valid HTML.