Eslint-plugin-jsx-a11y: Add 'table-has-role' rule to avoid interpreting tabular data as a layout by accident

[kripod]

As Sara Soueidan has recently pointed out on Twitter, <table> elements may be interpreted as layout containers by mistake unless role="table" is specified. More details are available in the presentation of Paul Duncan.

The implementation could be similar to the html-has-lang rule.

[kripod]

In addition, an exception may be added for cases when table headers or captions are available, according to the tweet of Adrian Roselli.

[scottaohara]

the crux of the issue is that if someone is building a table without proper column or row headings, or if the table has no accessible name, browsers will drop the semantics because there's no sensible structure to the content.

rather than a rule to auto-add a role=table (which would cause more issues than help) a rule should be written to warn authors that if there is no name to the table (caption, aria-label, or aria-labelledby) or table col/row headers (th elements) that they have created a layout table and should either add the appropriate elements necessary to make it a useful data table, or they should consider using different markup to layout their information.

Along with Adrian's post, also see this one by Steve Faulkner.

Edit:
The point of where injecting ARIA roles would be necessary would be if people were overwriting the CSS display values of the table and its cells, as these can be used by browsers as further pointers of whether the table is layout/actually tabular data. But in such an instance, just a single role=table to the container would not be enough. Again, more information by Adrian Roselli.