Esri#953 - fix modal toggles when toggle has child element

paulcpederson · Aug 4, 2018 · 2f184dd · 2f184dd
1 parent 2a47259
commit 2f184dd
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - fix diacritical marks in Hebrew (#966)
 - allow override of `$vw-ratio` variable (#960)
 - use `$dark-green` for green labels to pass WCAG 2.0 AA requirements (#969)
+- fix modal toggles when toggle has child element (#953)
 
 ## [1.0.2][1.0.2]
 

diff --git a/docs/source/documentation/patterns/sample-code/_modals.html b/docs/source/documentation/patterns/sample-code/_modals.html
@@ -42,5 +42,5 @@ <h3 class='trailer-half'>Another Modal!</h3>
   </div>
 </div>
 
-<a class="js-modal-toggle btn" href="#" data-modal="foo">Show Modal</a>
+<a class="js-modal-toggle btn" href="#" data-modal="foo"><span>Show Modal</span></a>
 <a class="js-modal-toggle btn" href="#" data-modal="baz">Show Another Modal</a>
diff --git a/lib/js/patterns/modal.js b/lib/js/patterns/modal.js
@@ -113,7 +113,8 @@ function modal () {
 
 function toggleClick (e) {
   event.preventDefault(e);
-  var modalId = e.target.getAttribute('data-modal');
+  var toggle = dom.closest('js-modal-toggle', e.target);
+  var modalId = toggle.getAttribute('data-modal');
   bus.emit('modal:open', {id: modalId});
 }