Fix vodkabears#147: Keyboard navigation accessibility issue

4ngeluxpunk · Aug 22, 2015 · 490961c · 490961c
1 parent 8e122a5
commit 490961c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/src/remodal-default-theme.css b/src/remodal-default-theme.css
@@ -93,7 +93,8 @@
   background: transparent;
 }
 
-.remodal-close:hover {
+.remodal-close:hover,
+.remodal-close:focus {
   color: #2b2e38;
 }
 
@@ -142,7 +143,8 @@
   background: #81c784;
 }
 
-.remodal-confirm:hover {
+.remodal-confirm:hover,
+.remodal-confirm:focus {
   background: #66bb6a;
 }
 
@@ -151,14 +153,16 @@
   background: #e57373;
 }
 
-.remodal-cancel:hover {
+.remodal-cancel:hover,
+.remodal-cancel:focus {
   background: #ef5350;
 }
 
 /* Remove inner padding and border in Firefox 4+ for the button tag. */
 
 .remodal-confirm::-moz-focus-inner,
-.remodal-cancel::-moz-focus-inner {
+.remodal-cancel::-moz-focus-inner,
+.remodal-close::-moz-focus-inner {
   padding: 0;
 
   border: 0;

diff --git a/src/remodal.css b/src/remodal.css
@@ -67,6 +67,8 @@ html.remodal-is-locked {
 .remodal {
   position: relative;
 
+  outline: none;
+
   text-size-adjust: 100%;
 }
 

diff --git a/src/remodal.js b/src/remodal.js
@@ -496,12 +496,14 @@
     }
 
     remodal.$bg = $('.' + namespacify('bg')).addClass(namespacify('is', STATES.CLOSED));
-    remodal.$modal = $modal;
-    remodal.$modal.addClass(
-      NAMESPACE + ' ' +
-      namespacify('is-initialized') + ' ' +
-      remodal.settings.modifier + ' ' +
-      namespacify('is', STATES.CLOSED));
+
+    remodal.$modal = $modal
+      .addClass(
+        NAMESPACE + ' ' +
+        namespacify('is-initialized') + ' ' +
+        remodal.settings.modifier + ' ' +
+        namespacify('is', STATES.CLOSED))
+      .attr('tabindex', '-1');
 
     remodal.$wrapper = $('<div>')
       .addClass(
@@ -584,6 +586,7 @@
     remodal.$bg.addClass(remodal.settings.modifier);
     remodal.$overlay.addClass(remodal.settings.modifier).show();
     remodal.$wrapper.show().scrollTop(0);
+    remodal.$modal.focus();
 
     syncWithAnimation(
       function() {