Set a tabindex on the canvas

[kripken]

Without it, it cannot be focused, so the user cannot click on it and have the canvas receive events. For example,

  emscripten_set_keypress_callback("#canvas", 0, 1, key_callback);

(note #canvas) will just not receive any events.

Set a value of -1, which just means 'focusable' and does not include it in the tab ordering, which is the same as before.

I'm surprised we didn't notice this before, so perhaps I'm missing something here? The attached testcase is fixed by this PR though, and it seems like something that should work out of the box?

[juj]

A popular practice is to register key events on window or document, so that one is not required to click (or call canvas.focus();) to manage focus, e.g. https://codeincomplete.com/posts/javascript-game-foundations-player-input/ or https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard .

Tabindex affects how one tab cycles across fillable form/text input elements, so canvas will then become one of those elements when a tabindex is given to it.

Looks good to me to add tabindex to default shell, but perhaps the proper fix is to document in emscripten_set_key*_callback() functions that the target element needs to be focusable (if it is not window or document or an input element, for more see https://stackoverflow.com/a/1600194).

[kripken]

Thanks @juj, I'll update the docs too.