set a tabindex on the default html canvas (#7484)

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.

src/shell.html

@@ -1212,7 +1212,7 @@
 
     
     <div class="emscripten_border">
-      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
+      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
     </div>
     <textarea id="output" rows="8"></textarea>
 

src/shell_minimal.html

@@ -54,7 +54,7 @@
       <progress value="0" max="100" id="progress" hidden=1></progress>  
     </div>
     <div class="emscripten_border">
-      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
+      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
     </div>
     <hr/>
     <div class="emscripten">

tests/canvas_focus.c

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2017 The Emscripten Authors.  All rights reserved.
+ * Emscripten is available under two separate licenses, the MIT license and the
+ * University of Illinois/NCSA Open Source License.  Both these licenses can be
+ * found in the LICENSE file.
+ */
+
+#include <emscripten/html5.h>
+#include <emscripten/key_codes.h>
+#include <emscripten.h>
+#include <stdio.h>
+#include <string.h>
+
+EM_BOOL key_callback(int eventType, const EmscriptenKeyboardEvent *e, void *userData)
+{
+  static int i = 0;
+  printf("key_callback %d\n", i);
+  i++;
+#ifdef REPORT_RESULT
+  REPORT_RESULT(1);
+#endif
+  return 0;
+}
+
+int main()
+{
+  emscripten_set_keypress_callback("#canvas", 0, 1, key_callback);
+  EM_ASM({
+    var event = new KeyboardEvent("keypress", { 'keyCode': 38, 'charCode': 38, 'view': window, 'bubbles': true, 'cancelable': true });
+    // Focus, then send an event, same as if the user clicked on it for focus.
+    Module.canvas.focus();
+    document.activeElement.dispatchEvent(event);
+    Module['noExitRuntime'] = true;
+  });
+}

tests/test_browser.py

@@ -877,6 +877,9 @@ keydown(100);keyup(100); // trigger the end
 
     self.btest('sdl_key_proxy.c', '223092870', args=['--proxy-to-worker', '--pre-js', 'pre.js', '-s', '''EXPORTED_FUNCTIONS=['_main', '_one']''', '-lSDL', '-lGL'], manual_reference=True, post_build=post)
 
+  def test_canvas_focus(self):
+    self.btest('canvas_focus.c', '1')
+
   def test_keydown_preventdefault_proxy(self):
     def post():
       html = open('test.html').read()