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('
').prependTo($container).children().click(function () {
- H5P.fullScreen($container, instance);
- });
+ H5P.jQuery(
+ '')
+ .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);
}