Trumbowyg icon indicating copy to clipboard operation
Trumbowyg copied to clipboard

Making toolbar buttons keyboard accessible

Open leetoufong opened this issue 5 years ago • 1 comments

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

  1. Select/Highlight whatever word(s) you want to bold by hold Shift and using arrow keys or mouse
  2. Without using mouse, Shift+Tab back into the toolbar and click Bold option in toolbar. At this point the word(s) highlighted should have been bolded.

leetoufong avatar Apr 24 '20 19:04 leetoufong

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 :/

Alex-D avatar May 01 '20 00:05 Alex-D