Make fullscreen button keyboard accessible

HFP-1199

js/h5p.js

@@ -133,9 +133,26 @@ H5P.init = function (target) {
 
     // Check if we should add and display a fullscreen button for this H5P.
     if (contentData.fullScreen == 1 && H5P.fullscreenSupported) {
-      H5P.jQuery('<div class="h5p-content-controls"><div role="button" tabindex="0" class="h5p-enable-fullscreen" title="' + H5P.t('fullscreen') + '"></div></div>').prependTo($container).children().click(function () {
+      H5P.jQuery(
-        H5P.fullScreen($container, instance);
+        '<div class="h5p-content-controls">' +
-      });
+          '<div role="button" ' +
+                'tabindex="0" ' +
+                'class="h5p-enable-fullscreen" ' +
+                'title="' + H5P.t('fullscreen') + '">' +
+          '</div>' +
+        '</div>')
+        .prependTo($container)
+          .children()
+          .click(function () {
+            H5P.fullScreen($container, instance);
+          })
+        .keydown(function (e) {
+          if (e.which === 32 || e.which === 13) {
+            H5P.fullScreen($container, instance);
+            return false;
+          }
+        })
+      ;
     }
 
     /**

styles/h5p.css

@@ -108,13 +108,20 @@ body.h5p-semi-fullscreen {
   width: 1.125em;
   height: 0.925em;
   text-indent: -0.0875em;
-  outline: none;
 }
 .h5p-disable-fullscreen {
   line-height: 0.925em;
   width: 1.1em;
   height: 0.9em;
 }
+
+.h5p-enable-fullscreen:focus,
+.h5p-disable-fullscreen:focus {
+  outline-style: solid;
+  outline-width: 1px;
+  outline-offset: 0.25em;
+}
+
 .h5p-enable-fullscreen:hover, .h5p-disable-fullscreen:hover {
   background: rgba(0,0,0,0.5);
 }