diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js index f430be0da6..3c8418b4e1 100644 --- 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 23908548bf..5e38b431b9 100644 --- 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 = $('').appendTo('body'); + var $anchor2 = $('').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 index 0000000000..c5ded4d43b --- /dev/null +++ b/test/visual/reveal/multiple-anchors.html @@ -0,0 +1,47 @@ + + + + + + + + Foundation for Sites Testing + + + +
+
+
+

Reveal: Multiple Anchors

+ +

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.

+ +

+

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!

+

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!

+

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!

+

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!

+

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!

+ +

+ +

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!

+ +
+ + +

When closing me, the page should not scroll to the bottom (anchor #2) if you opened me with anchor #1.

+
+
+
+
+ + + + + +