bootstrap-table-contextmenu
bootstrap-table-contextmenu copied to clipboard
Keyboard navigation to improve accessibility
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.
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.