React-virtualized: Table accessibility issues

[jchen527]

There are a few issues with the aria roles on the current table implementation:

• role="grid" should be an attribute on the table element instead of the inner grid
• all table rows (including the header row) should have role="row" even if they don't have event handlers like onRowClick

See aria documentation for more details. Elements with role="grid" require descendants with role="row", and elements with role="rowheader" require an ancestor with role="row" which requires an ancestor with role="grid".

[bvaughn]

Want to submit a PR?

On Mar 4, 2017 12:03 AM, "Jackie Chen" [e-mail] wrote:

There are a few issues with the aria roles on the current table
implementation:

• role="grid" should be an attribute on the table element instead of
  the inner grid
• all table rows (including the header row) should have role="row"
  even if they don't have event handlers like onRowClick

See aria documentation https://www.w3.org/TR/wai-aria/roles#grid for
more details. Elements with role="grid" require descendants with
role="row", and elements with role="rowheader" require an ancestor with
role="row" which requires an ancestor with role="grid".

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/bvaughn/react-virtualized/issues/606, or mute the
thread
https://github.com/notifications/unsubscribe-auth/AABzna-nD3yxjenVvdUzE8XkbCUytE9Kks5riRrlgaJpZM4MTBEn
.

[bvaughn]

Elements with role="grid" require descendants with role="row"

I think you mean to say that elements with role="row" require an ancestor with role="grid" ? Grid is, by default, a role="grid" but it does not contain role="row" children (because there is no wrapper "row" element in multi-column Grid).

I also wonder if it would be appropriate to set role for a Grid inside of a Table to "rowgroup" (instead of null).

[bvaughn]

Thanks for taking the time to educate me on the incorrect use of roles in this case. I really appreciate the PR! I just merged it, with the small addition of adding role="rowgroup" to the Grid inside of a Table. 😄

[jchen527]

Re: your comment about Grid having no role="row" children, I believe elements with role="grid" do require descendants with role="row" or role="rowgroup" because they are "Required Owned Elements". I've been using the Accessibility Developer Tools chrome extension and the audit complains when there is only an element with role="grid".

Thanks for the quick review and role="rowgroup" change!

[thiemeljiri]

Is there a way how to not add these attributes? You have it wrong and even if that was implemented correctly it's not always what you want, which is our case.

Role grid must be sued only when it's a data grid with implemented keyboard navigation. Using such roles without implementing the rest hurts the accessibility.

I strongly suggest removal of the role grid and I would like to know the motivation behind adding it. This is how to use it properly and believe me, that's not what you wan't in many cases.
https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html
https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html