Baseweb: Grid-Table: ARIA violation

[maraisr]

When a [table-grid] is used, each of the body cells have the role="gridcell" applied, however the wai-aria 1.1 spec articulate that they MUST be placed inside a role="row", as quoted "Authors MUST ensure elements with role gridcell are contained in, or owned by, an element with the role row."

I've tested this with my iPhone's voice over feature using the examples; for which it doesn't read out the active row, or column that is currently being read:

• [table]: "Sarah Brown"
• [table-grid]: "Sarah Brown"
• [semantic-table]: "Name, Sarah Brown. Row 2, column 1"

Granted grid tables cannot facilitate a row, as there are no wrapping elements for the "rows". So is this merely a consideration when using this particular component?

Reference:

• https://www.w3.org/TR/wai-aria-1.1/#gridcell

[chasestarr]

Thank you for the report. Good point, gridcell should be removed. According to this mdn page on css-grid adding a wrapper element is possible once subgrid is more widely supported

[maraisr]

No thank you! Love you guys. I recently solved this using display: contents on the wrapping div, which seems to have solved it also. But looking forward to what you guys come up with! <3

[chasestarr]

Glad you could resolve. I don't think we will be taking the same contents approach since it is not supported in safari at the moment. I appreciate the heads-up.

This issue is a good first-time-contribution if anyone is interested. Try to add row wrappers to cell elements in documentation site examples. If that does not work, remove role="gridcell" from table-grid cell elements.

_edited to update contribution directions_

[maraisr]

Think the "not supported" there relates to unusual behavior when applied to specific elements. In our case though you'd be applying it to a div, which works 100% in Safari.

We could either introduce a role="row"—or remove role="gridcell". Which one would you think we do?

[chasestarr]

Oh I missed the row above 😆 I'm happy to review a PR that introduces a wrapping row. Not sure if it makes sense built-in to the component itself, but maybe update documentation site examples to include it