Use semantic html elements for accessibility

[nikolas]

We received an accessibility audit for one of our projects using react-data-table-component. Although this library uses the role attribute appropriately, there's no reason for it to be using div instead of table. This would really help screen readers know what to do with these tables.

Does a change like this make sense?

[netlify[bot]]

❌ Deploy Preview for react-data-table-component failed.

Name	Link
🔨 Latest commit	610c0be9c816861480e49fe8e8bb00593eb8ad6c
🔍 Latest deploy log	https://app.netlify.com/sites/react-data-table-component/deploys/635c2efb73f3ec00084c6818

[jbetancur]

Thank you for the PR. This is a pretty big change. The original intent was for this to be a "div based table library" as I wanted to have different layout options depending on the screen size, so this PR fundamentally changes things. That being said, I've recently been considering moving back to tables since div based tables are from the experience of this library very troublesome. I'd like to hold off on this change for a next major version since I don't know what sort of downstream effect it will have.

[nikolas]

Thanks for your feedback. I agree - this is a bigger change than this PR. To start, I'd have to fix all the test failures.

To resolve our specific issue, because this library is already using the role="table" attributes properly, we are considering it accessible for our purposes. Screenreaders should be able to handle these divs with ARIA roles just fine. Though, as I've learned, even Mozilla recommends using <table> over ARIA roles whenever possible: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/table_role#required_javascript_features