Merge pull request #10711 from Owlbertz/reveal-anchor-focus-fix

Reveal anchor focus fix
foundation · Dec 25, 2017 · e4e96b0 · e4e96b0
2 parents 0286659 + 6bc8691
commit e4e96b0
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 1 deletion.
diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js
@@ -228,6 +228,9 @@ class Reveal extends Plugin {
       }
     }
 
+    // Remember anchor that opened it to set focus back later, have general anchors as fallback
+    this.$activeAnchor = $(document.activeElement).is(this.$anchor) ? $(document.activeElement) : this.$anchor;
+
     this.isActive = true;
 
     // Make elements invisible, but remove display: none so we can get size and positioning
@@ -432,7 +435,7 @@ class Reveal extends Plugin {
        }
      }
 
-    this.$anchor.focus();
+    this.$activeAnchor.focus();
   }
 
   /**

diff --git a/test/javascript/components/reveal.js b/test/javascript/components/reveal.js
@@ -296,6 +296,27 @@ describe('Reveal', function() {
         }, 0);
       });
 
+      plugin.close();
+    });
+    it('sets focus to anchor that opened it', function(done) {
+      $html = $(template).appendTo('body');
+      var $anchor = $('<button data-open="exampleModal1">Open</button>').appendTo('body');
+      var $anchor2 = $('<button data-open="exampleModal1">Open2</button>').appendTo('body');
+      plugin = new Foundation.Reveal($html, {});
+      $anchor.focus();
+
+      // Open it first
+      plugin.open();
+
+      $html.on('closed.zf.reveal', function() {
+        setTimeout(function() {
+          $anchor[0].should.be.equal(document.activeElement);
+          $anchor.remove();
+          $anchor2.remove();
+          done();
+        }, 0);
+      });
+
       plugin.close();
     });
   });

diff --git a/test/visual/reveal/multiple-anchors.html b/test/visual/reveal/multiple-anchors.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>Foundation for Sites Testing</title>
+    <link href="../assets/css/foundation.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Reveal: Multiple Anchors</h1>
+
+          <p>When closing a modal with multiple anchors, focus should not be set to the last anchor, but to the one that triggered it. Open the modal using anchor #1, then close it.</p>
+
+          <p><button class="button" data-toggle="exampleModal1">Aanchor #1</button></p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
+
+          <p><button class="button" data-toggle="exampleModal1">Aanchor #2</button></p>
+
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
+
+          <div class="reveal" id="exampleModal1" data-reveal>
+            <button class="close-button" aria-label="Close" type="button" data-close>
+              <span aria-hidden="true">&times;</span>
+            </button>
+
+            <p>When closing me, the page should not scroll to the bottom (anchor #2) if you opened me with anchor #1.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="../assets/js/vendor.js"></script>
+    <script src="../assets/js/foundation.js"></script>
+    <script>
+      $(document).foundation();
+    </script>
+  </body>
+</html>