]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 187a497)
Use pull request #10711 from Owlbertz/reveal-anchor-focus-fix for v6.5.0
authorMarius Olbertz <marius.olbertz@gmail.com>
Sat, 16 Jun 2018 06:59:14 +0000 (08:59 +0200)
committerNicolas Coden <nicolas@ncoden.fr>
Sat, 16 Jun 2018 06:59:14 +0000 (08:59 +0200)
9fce99e34 Focus active anchor rather than last one in collection when closing a Reveal modal.
9e8535ab2 Added tests for #10604.
f954f7ebd Added visual test for #10604.
6cfebc3c0 Update Yarn file!
6bc8691ab Revert "Update Yarn file!"

Co-Authored-By: Harry Manchanda <harmanmanchanda182@gmail.com>
Co-Authored-By: Nicolas Coden <nicolas@ncoden.fr>
Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>
js/foundation.reveal.js patch | blob | blame | history
test/javascript/components/reveal.js patch | blob | blame | history
test/visual/reveal/multiple-anchors.html [new file with mode: 0644] patch | blob

diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js
index f430be0da6fe559a970bfb9077d5590ec83ea986..3c8418b4e13eeb5408724fa4b124afcbb7aed841 100644 (file)
--- 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
index 23908548bfd7dc69324fec58a1a234df674b23d0..5e38b431b9de8ed7aa6a54c3074fe78ba67a5137 100644 (file)
--- 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
new file mode 100644 (file)
index 0000000..c5ded4d
--- /dev/null
+++ 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>
Mirror of https://github.com/foundation/foundation-sites.git