Fixed space and enter not closing Reveal modals.

Refactored the component to not use special keyboard listening for opening and closing.
Normal event triggering with `click` event being emitted using space and enter is used now.
Added test for clicking close button.

diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js
index 134babd658e09014041154af2a3aea0b63985b8d..cb1098d899a582af9f8a739420ffcf41ac08a691 100644 (file)
--- a/js/foundation.reveal.js
+++ b/js/foundation.reveal.js
@@ -26,8 +26,6 @@ class Reveal {
 
     Foundation.registerPlugin(this, 'Reveal');
     Foundation.Keyboard.register('Reveal', {
-      'ENTER': 'open',
-      'SPACE': 'open',
       'ESCAPE': 'close',
     });
   }
@@ -288,17 +286,15 @@ class Reveal {
       .focus();
     Foundation.Keyboard.trapFocus(this.$element);
 
+    addRevealOpenClasses();
+
+    this._extraHandlers();
+
     /**
      * Fires when the modal has successfully opened.
      * @event Reveal#open
      */
     this.$element.trigger('open.zf.reveal');
-
-    addRevealOpenClasses();
-
-    setTimeout(() => {
-      this._extraHandlers();
-    }, 0);
   }
 
   /**
@@ -308,6 +304,7 @@ class Reveal {
   _extraHandlers() {
     var _this = this;
     if(!this.$element) { return; } // If we're in the middle of cleanup, don't freak out
+
     this.focusableElements = Foundation.Keyboard.findFocusable(this.$element);
 
     if (!this.options.overlay && this.options.closeOnClick && !this.options.fullScreen) {
@@ -331,34 +328,6 @@ class Reveal {
         });
       });
     }
-
-    // lock focus within modal while tabbing
-    this.$element.on('keydown.zf.reveal', function(e) {
-      var $target = $(this);
-      // handle keyboard event with keyboard util
-      Foundation.Keyboard.handleKey(e, 'Reveal', {
-        open: function() {
-          if (_this.$element.find(':focus').is(_this.$element.find('[data-close]'))) {
-            setTimeout(function() { // set focus back to anchor if close button has been activated
-              _this.$anchor.focus();
-            }, 1);
-          } else if ($target.is(_this.focusableElements)) { // dont't trigger if acual element has focus (i.e. inputs, links, ...)
-            _this.open();
-          }
-        },
-        close: function() {
-          if (_this.options.closeOnEsc) {
-            _this.close();
-            _this.$anchor.focus();
-          }
-        },
-        handled: function(preventDefault) {
-          if (preventDefault) {
-            e.preventDefault();
-          }
-        }
-      });
-    });
   }
 
   /**

diff --git a/test/javascript/components/reveal.js b/test/javascript/components/reveal.js
index dc902c927407fb429cff7e67f13f8bbcc94f870d..b0c6749858ed31dab6f5ffcd8f84dd82678a159a 100644 (file)
--- a/test/javascript/components/reveal.js
+++ b/test/javascript/components/reveal.js
@@ -355,5 +355,20 @@ describe('Reveal', function() {
         done();
       }, 10);
     });
+    it('closes Reveal with click on close button', function(done) {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Reveal($html, {});
+
+      // Open it first
+      plugin.open();
+
+      $html.on('closed.zf.reveal', function() {
+        $html.should.be.hidden;
+       done();
+      });
+
+      $html.find('[data-close]').focus()
+        .trigger('click');
+    });
   });
 });