From f08655cfb0f8f21cf79e92d8c28127ec9fe83177 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Thu, 17 Oct 2019 15:01:22 +0200
Subject: [PATCH] Fix dialog accessibility

---
 js/h5p.js      | 15 ++++++++++++---
 styles/h5p.css |  9 ++++-----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/js/h5p.js b/js/h5p.js
index 87df138..ee1888a 100644
--- a/js/h5p.js
+++ b/js/h5p.js
@@ -1030,7 +1030,7 @@ H5P.t = function (key, vars, ns) {
 H5P.Dialog = function (name, title, content, $element) {
   /** @alias H5P.Dialog# */
   var self = this;
-  var $dialog = H5P.jQuery('<div class="h5p-popup-dialog h5p-' + name + '-dialog">\
+  var $dialog = H5P.jQuery('<div class="h5p-popup-dialog h5p-' + name + '-dialog" role="dialog" tabindex="-1">\
                               <div class="h5p-inner">\
                                 <h2>' + title + '</h2>\
                                 <div class="h5p-scroll-content">' + content + '</div>\
@@ -1053,6 +1053,12 @@ H5P.Dialog = function (name, title, content, $element) {
         .click(function () {
           self.close();
         })
+        .keypress(function (e) {
+          if (e.which === 13 || e.which === 32) {
+            self.close();
+            return false;
+          }
+        })
         .end()
       .find('a')
         .click(function (e) {
@@ -1072,6 +1078,7 @@ H5P.Dialog = function (name, title, content, $element) {
       $dialog.addClass('h5p-open'); // Fade in
       // Triggering an event, in case something has to be done after dialog has been opened.
       H5P.jQuery(self).trigger('dialog-opened', [$dialog]);
+      $dialog.focus();
     }, 1);
   };
 
@@ -1083,6 +1090,8 @@ H5P.Dialog = function (name, title, content, $element) {
     setTimeout(function () {
       $dialog.remove();
       H5P.jQuery(self).trigger('dialog-closed', [$dialog]);
+      $element.attr('tabindex', '-1');
+      $element.focus();
     }, 200);
   };
 };
@@ -1363,11 +1372,11 @@ H5P.openEmbedDialog = function ($element, embedCode, resizeCode, size, instance)
       var $expander = H5P.jQuery(this);
       var $content = $expander.next();
       if ($content.is(':visible')) {
-        $expander.removeClass('h5p-open').text(H5P.t('showAdvanced'));
+        $expander.removeClass('h5p-open').text(H5P.t('showAdvanced')).attr('aria-expanded', 'true');
         $content.hide();
       }
       else {
-        $expander.addClass('h5p-open').text(H5P.t('hideAdvanced'));
+        $expander.addClass('h5p-open').text(H5P.t('hideAdvanced')).attr('aria-expanded', 'false');
         $content.show();
       }
       $dialog.find('.h5p-embed-code-container').each(function () {
diff --git a/styles/h5p.css b/styles/h5p.css
index 1f89e4e..e6eb707 100644
--- a/styles/h5p.css
+++ b/styles/h5p.css
@@ -367,10 +367,6 @@ div.h5p-fullscreen {
 }
 .h5p-popup-dialog .h5p-close {
   cursor: pointer;
-}
-.h5p-popup-dialog .h5p-close:after {
-  font-family: 'H5P';
-  content: "\e894";
   font-size: 2em;
   position: absolute;
   right: 0;
@@ -383,6 +379,10 @@ div.h5p-fullscreen {
   text-indent: -0.065em;
   z-index: 3
 }
+.h5p-popup-dialog .h5p-close:after {
+  font-family: 'H5P';
+  content: "\e894";
+}
 .h5p-popup-dialog .h5p-close:hover:after,
 .h5p-popup-dialog .h5p-close:focus:after {
   color: #454545;
@@ -412,7 +412,6 @@ div.h5p-fullscreen {
 .h5p-expander {
   cursor: pointer;
   font-size: 1.125em;
-  outline: none;
   margin: 0.5em 0 0;
   display: inline-block;
 }