From 1266e506a7fa0e413f529eaee2388f32d7ce5193 Mon Sep 17 00:00:00 2001
From: Marcy Sutton <marcy.sutton@deque.com>
Date: Wed, 12 Oct 2016 22:49:06 -0400
Subject: [PATCH] improve the example w/ :target, add Safari support

Closes https://github.com/una/YouMightNotNeedJS/issues/2
---
 comparisons/components/modal/html.html | 12 ++++++---
 comparisons/components/modal/scss.scss | 20 +++++++-------
 index.html                             | 37 +++++++++++++++-----------
 3 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/comparisons/components/modal/html.html b/comparisons/components/modal/html.html
index c1c9b0d..d8c5ca9 100644
--- a/comparisons/components/modal/html.html
+++ b/comparisons/components/modal/html.html
@@ -1,8 +1,14 @@
-<a class="modalTrigger" href="#modalDialog1">
-	Click Me
+<a class="modalTrigger" id="modalTrigger"
+   href="#modalDialog1">
+	Open dialog
 </a>
 
 <dialog class="modal" id="modalDialog1"
 		tabindex="-1" role="dialog">
-  <p>Hello Beautiful!</p>
+  <div>
+	  <a href="#modalTrigger" aria-label="Close">
+	  	&times;
+	  </a>
+	  <p>Hello Beautiful!</p>
+  </div>
 </dialog>
diff --git a/comparisons/components/modal/scss.scss b/comparisons/components/modal/scss.scss
index 6fa6ed9..7ee1816 100644
--- a/comparisons/components/modal/scss.scss
+++ b/comparisons/components/modal/scss.scss
@@ -1,16 +1,14 @@
-// Modal is visually hidden until focused.
-// This only sort-of works: you can't close
-// the dialog with the escape key, and it can't
-// contain anything interactive for 2 reasons: 
-// you wouldn't be able to tab without blurring 
-// the dialog, and they'd be focusable when 
-// the dialog is closed (a poor keyboard experience).
-.modal {  
+// Modal is hidden until it matches an anchor
+// target. This only sort-of works, as you can't close
+// it with the escape key or trap focus inside of it.
+.modal {
   opacity: 0;
+  visibility: hidden;
 }
 
-// modal fades in when button 
-// is in focus (i.e. clicked on)
-.modal:focus {
+// modal fades in when it matches
+// an anchor link (i.e. clicked on)
+#modalDialog:target {
   opacity: 1;
+  visibility: hidden;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 665310b..f41d2f0 100644
--- a/index.html
+++ b/index.html
@@ -149,34 +149,39 @@ <h4>CODEPEN</h4><p data-height="265" data-theme-id="light" data-slug-hash="pEVjw
               <div data-code="html" class="code html">
                 <h4>HTML</h4>
                 <div data-lang="markup" class="code-block language-markup">
-                  <pre><code>&lt;a class=&quot;modalTrigger&quot; href=&quot;#modalDialog1&quot;&gt;
-	Click Me
+                  <pre><code>&lt;a class=&quot;modalTrigger&quot; id=&quot;modalTrigger&quot;
+   href=&quot;#modalDialog1&quot;&gt;
+	Open dialog
 &lt;/a&gt;
 
-&lt;dialog class=&quot;modal&quot; id=&quot;modalDialog1&quot; 
+&lt;dialog class=&quot;modal&quot; id=&quot;modalDialog1&quot;
 		tabindex=&quot;-1&quot; role=&quot;dialog&quot;&gt;
-  &lt;p&gt;Hello World!&lt;/p&gt;
-&lt;/dialog&gt;</code></pre>
+  &lt;div&gt;
+	  &lt;a href=&quot;#modalTrigger&quot; aria-label=&quot;Close&quot;&gt;
+	  	&amp;times;
+	  &lt;/a&gt;
+	  &lt;p&gt;Hello Beautiful!&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/dialog&gt;
+</code></pre>
                 </div>
               </div>
               <div data-code="scss" class="code scss">
                 <h4>SCSS</h4>
                 <div data-lang="scss" class="code-block language-scss">
-                  <pre><code>// Modal is visually hidden until focused.
-// This only sort-of works: you can't close
-// the dialog with the escape key, and it can't
-// contain anything interactive for 2 reasons: 
-// you wouldn't be able to tab without blurring 
-// the dialog, and they'd be focusable when 
-// the dialog is closed (a poor keyboard experience).
-.modal {  
+                  <pre><code>// Modal is hidden until it matches an anchor
+// target. This only sort-of works, as you can't close
+// it with the escape key or trap focus inside of it.
+.modal {
   opacity: 0;
+  visibility: hidden;
 }
 
-// modal fades in when button 
-// is in focus (i.e. clicked on)
-.modal:focus {
+// modal fades in when it matches
+// an anchor link (i.e. clicked on)
+#modalDialog:target {
   opacity: 1;
+  visibility: hidden;
 }</code></pre>
                 </div>
               </div>