From d2746b18b4db1c1fb6ca9f5e15297dd1cdb1c71a Mon Sep 17 00:00:00 2001
From: thomasmars <thomasmars87@gmail.com>
Date: Thu, 22 Jun 2017 10:56:15 +0200
Subject: [PATCH] Make fullscreen button keyboard accessible

HFP-1199
---
 js/h5p.js      | 23 ++++++++++++++++++++---
 styles/h5p.css |  9 ++++++++-
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/js/h5p.js b/js/h5p.js
index 9c0846b..1d9c17f 100644
--- a/js/h5p.js
+++ b/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.fullScreen($container, instance);
-      });
+      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.fullScreen($container, instance);
+          })
+        .keydown(function (e) {
+          if (e.which === 32 || e.which === 13) {
+            H5P.fullScreen($container, instance);
+            return false;
+          }
+        })
+      ;
     }
 
     /**
diff --git a/styles/h5p.css b/styles/h5p.css
index 760c916..7696348 100755
--- a/styles/h5p.css
+++ b/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);
 }