From cf3dfe10ec09af705518f4d553246527a68175c4 Mon Sep 17 00:00:00 2001
From: Paal Joergensen <pal.jorgensen@gmail.com>
Date: Thu, 2 Nov 2017 10:19:03 +0100
Subject: [PATCH] Remove focus outline on non-tabable elements

---
 memory-game.css | 7 +++++--
 memory-game.js  | 1 +
 popup.js        | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/memory-game.css b/memory-game.css
index cdb63cd..c188210 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -272,7 +272,7 @@
   color: #666;
 }
 .h5p-memory-game .h5p-memory-close:focus {
-  outline: 2px dashed pink;
+  outline: 2px solid #a5c7fe;
 }
 .h5p-memory-reset {
   position: absolute;
@@ -302,7 +302,7 @@
   margin-top: -0.2em;
 }
 .h5p-memory-reset:focus {
-  outline: 2px dashed pink;
+  outline: 2px solid #a5c7fe;
 }
 .h5p-memory-transin {
   transform: translate(-50%,-50%) scale(0) rotate(180deg);
@@ -315,3 +315,6 @@
 .h5p-memory-complete {
   display: none;
 }
+.h5p-memory-game .h5p-programatically-focusable {
+  outline: none;
+}
diff --git a/memory-game.js b/memory-game.js
index 1557e18..38829de 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -436,6 +436,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         $list.appendTo($container);
 
         $bottom = $('<div/>', {
+          'class': 'h5p-programatically-focusable',
           tabindex: '-1',
           appendTo: $container
         });
diff --git a/popup.js b/popup.js
index 07c3f64..9d8d63d 100644
--- a/popup.js
+++ b/popup.js
@@ -13,7 +13,7 @@
 
     var closed;
 
-    var $popup = $('<div class="h5p-memory-pop" role="dialog"><div class="h5p-memory-top"></div><div class="h5p-memory-desc" tabindex="-1"></div><div class="h5p-memory-close" role="button" tabindex="0" title="' + (l10n.closeLabel || 'Close') + '"></div></div>').appendTo($container);
+    var $popup = $('<div class="h5p-memory-pop" role="dialog"><div class="h5p-memory-top"></div><div class="h5p-memory-desc h5p-programatically-focusable" tabindex="-1"></div><div class="h5p-memory-close" role="button" tabindex="0" title="' + (l10n.closeLabel || 'Close') + '"></div></div>').appendTo($container);
     var $desc = $popup.find('.h5p-memory-desc');
     var $top = $popup.find('.h5p-memory-top');