Only bind keypress events when the board has focus

[pconerly]

Re: https://github.com/Kashomon/glift/blob/0625a4e33d6e5472691a980b05641151589adc48/src/widgets/options/base_options.js#L461-L466

This currently binds keypress events to document.body, so it's not unlikely this could conflict with other applications' keybindings.

We should fix this so that glift can be happily embedded with more involved applications. It does have a potential of causing problems for users if they don't give focus to glift.

On way to solve that design problem would be to have a keyboard icon that is solid when glift has focus, and greyed-out when it doesn't ?

Don't write any code yet, I may have a PR for you.

[artasparks]

I have been playing around with this for a while.

So to summarize from the PR, the method is to use tabindex=0 and focusfor an individual div. If I click away from the box, the div becomes unfocused and key events stop working. This is probably fine although slightly different than the current behavior, but I worry about integration in other pages. I noticed when I tried this out on www.gliftgo.com that the div gets an annoying border around it, although it looks like this can be solved with outline: none;

The other solution is to use contenteditable, but that's obviously not ideal.

References:

• https://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR29.html
• http://stackoverflow.com/questions/148361/how-can-i-give-keyboard-focus-to-a-div-and-attach-keyboard-event-handlers-to-it
• http://stackoverflow.com/questions/2260782/how-do-i-remove-the-border-around-a-focused-contenteditable-pre/2260788#2260788

[artasparks]

Even if I add this, I'll add the keyboard in a separate commit or as part of the settings icon