React-bootstrap-table2: Accessibility issue: Users navigating with `tab` cannot trigger sort functionality

[reginafcompton]

Description
A user navigating the table with the keyboard (i.e., with the tab key + enter key) cannot trigger the sort functionality.

To Reproduce
You can see this behavior in the Storybook example.
https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Sort%20Table&selectedStory=Enable%20Sort&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

1. Click on "Change Data" (to position the focus)
2. Hit your tab key
3. Hit your enter key

I expect the column to sort, but it does not do anything.

Hack/Workaround
I found a workaround for this issue with the following:

1. Wrap the sortCaret icon in a button tag
2. Disable the tabindex on the headers.

This workaround is not ideal, however.

[AllenFang]

ok someone open the PR for this, I will review it ASAP, thanks!

[AllenFang]

fixed this in newest version: https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2020/02/09/version-bump.html

[jmmadsen]

Hello,

Do either of you know if the row select boxes are keyboard accessible? I can focus on them with the tab key, but i cannot select/unselect the row by pressing enter, it only registers a mouse click.

It seems like this would be a breaking bug for accessibility as well.

[jmmadsen]

@AllenFang
To reproduce, use this story example: https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Column%20Filter&selectedStory=Text%20Filter&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

[SarahBeee]

@jmmadsen Maybe a bit late but to answer your question: to select/unselect a box in the focussed row with keyboard use space