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

@@ -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>

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;
 }

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>