Trumbowyg
Trumbowyg copied to clipboard
Making toolbar buttons keyboard accessible
Hi, great plugin! I have a client who has very strict guidelines on 508/accessibility. I am building them a rich text editor and happen to come across this great plugin. I want the tool bar to be "at least" keyboard accessible. I mainly need it for the standard options but others like font size, color, formatting, etc will be helpful too.
I was able to make the buttons in the toolbar focusable by removing the [tabindex] attribute when the editor initializes (tbwinit event). Once focused, pressing spacebar/enter should theoretically bind a click and then do whatever button was pressed.
Codepen: https://codepen.io/leetoufong/pen/oNjYbQK?editors=1010
- Select/Highlight whatever word(s) you want to bold by hold Shift and using arrow keys or mouse
- Without using mouse,
Shift+Tabback into the toolbar and click Bold option in toolbar. At this point the word(s) highlighted should have been bolded.
There are already some keyboard shortcuts and you can add more of them. The issue here is: I'm using the mousedown event and not the click one, and the enter key does not trigger mousedown. Soooo... I do not know if I can't change that without breaking things for other users :/