bootstrap-table-contextmenu icon indicating copy to clipboard operation
bootstrap-table-contextmenu copied to clipboard

Keyboard navigation to improve accessibility

Open sparky742 opened this issue 4 years ago • 1 comments

How can I make this keyboard navigable (rather than just mouse) to improve accessibility and help screen readers?

What I'm going for is something like how the regular bootstrap dropdowns let you focus and move up/down with the cursor keys.

sparky742 avatar Jan 07 '21 20:01 sparky742

I have solved this. For future readers...

First, in my menu items, I've added an <a href="#"> which causes the menu item to be able to get focus.

Second, at the end of bootstrap-table-contextmenu.js I cause focus on the menu when it is activated:

$(this.options.contextMenu).focus();

Now when I called the menu from a button in the row (with contextMenuButton option), it can be activated with a space bar and the tab key goes down the menu. Press enter to select a menu option. Also, having a button in the row makes the bootstrap-table navigable with the tab key.

sparky742 avatar Mar 17 '21 18:03 sparky742