From c029d31e2cd9a039032c048cf152873bda71423d Mon Sep 17 00:00:00 2001
From: Marcy Sutton <marcy.sutton@deque.com>
Date: Wed, 12 Oct 2016 19:54:06 -0400
Subject: [PATCH] improve modal dialog accessibility, with warning

Working Codepen (I wasn't sure if there was more to publish): http://codepen.io/marcysutton/pen/mAKrxb
---
 comparisons/components/modal/html.html |  8 +++++---
 comparisons/components/modal/scss.scss | 13 ++++++++-----
 index.html                             | 21 +++++++++++++--------
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/comparisons/components/modal/html.html b/comparisons/components/modal/html.html
index b9b2a8e..712fd8e 100644
--- a/comparisons/components/modal/html.html
+++ b/comparisons/components/modal/html.html
@@ -1,5 +1,7 @@
-<button>Click Me</button>
+<a class="modalTrigger" href="#modalDialog1">
+	Click Me
+</a>
 
-<div class="modal">
+<dialog class="modal" id="modalDialog1" tabindex="-1">
   <p>Hello Beautiful!</p>
-</div>
+</dialog>
diff --git a/comparisons/components/modal/scss.scss b/comparisons/components/modal/scss.scss
index cd52503..6fa6ed9 100644
--- a/comparisons/components/modal/scss.scss
+++ b/comparisons/components/modal/scss.scss
@@ -1,13 +1,16 @@
-// modal is invisible until
-// sibling is focused
+// 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 {  
   opacity: 0;
-  visibility: hidden;
 }
 
 // modal fades in when button 
 // is in focus (i.e. clicked on)
-button:focus + .modal {
+.modal:focus {
   opacity: 1;
-  visibility: visible;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 6756b65..b117f27 100644
--- a/index.html
+++ b/index.html
@@ -149,28 +149,33 @@ <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;button&gt;Click Me&lt;/button&gt;
+                  <pre><code>&lt;a class=&quot;modalTrigger&quot; href=&quot;#modalDialog1&quot;&gt;
+	Click Me
+&lt;/a&gt;
 
-&lt;div class=&quot;modal&quot;&gt;
+&lt;dialog class=&quot;modal&quot; id=&quot;modalDialog1&quot; tabindex=&quot;-1&quot;&gt;
   &lt;p&gt;Hello World!&lt;/p&gt;
-&lt;/div&gt;</code></pre>
+&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 invisible until
-// sibling is focused
+                  <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 {  
   opacity: 0;
-  visibility: hidden;
 }
 
 // modal fades in when button 
 // is in focus (i.e. clicked on)
-button:focus + .modal {
+.modal:focus {
   opacity: 1;
-  visibility: visible;
 }</code></pre>
                 </div>
               </div>