Accessibility improvements for role on Table & Column components

laughnan commented 3 years ago

Changes

We're seeing an issue that impacts multiple tables in our application. This is mostly on Windows computers and causes the screenreader to go into a different mode when tabbing into the div (this has role "grid" and the columns have role "gridcell").

On Windows, role="grid" triggers Application Mode for the Windows screenreader.
- 90% of screenreader users are on Windows computers (importance of change)
- Application mode passes all keystrokes to the browser
- Visitors can no longer "read" the text as they're navigating the Table (which is effectively a grid).
This does not seem to be an issue on Apple with Voiceover.

Contribution Checklist

Thanks for contributing to react-virtualized!

Before submitting a pull request, please complete the following checklist:

[x] The existing test suites (npm test) all pass
[x] For any new features or bug fixes, both positive and negative test cases have been added
[x] For any new features, documentation has been added
[x] For any documentation changes, the text has been proofread and is clear to both experienced users and beginners.
[x] Format your code with prettier (yarn run prettier).
[x] Run the Flow typechecks (yarn run typecheck).

Here is a short checklist of additional things to keep in mind before submitting:

Please make sure your pull request description makes it very clear what you're trying to accomplish. If it's a bug fix, please also provide a failing test case (if possible). In either case, please add additional unit test coverage for your changes. :)
Be sure you have notifications setup so that you'll see my code review responses. (I may ask you to make some adjustments before merging.)

laughnan commented 3 years ago

Creating this PR to support accessibility improvements noted in https://github.com/bvaughn/react-virtualized/issues/1604

laughnan commented 3 years ago

All initial tests in https://github.com/bvaughn/react-virtualized/pull/1691/commits/429a472df69e6ab1c0a25ddca4ae112b88cbf104 pass (without new tests) showing that this change is backwards compatible.

laughnan commented 3 years ago

Component testing

Update role prop for Table and Column

Screen Shot 2021-09-09 at 19 25 39

Confirmation of the UI rendering the right values

react-virtualized

laughnan commented 3 years ago

@wuweiweiwu can you give this a review?

bvaughn / react-virtualized