From ed2f57a81396b935df48531a902732c0eec110ec Mon Sep 17 00:00:00 2001
From: Marius Olbertz <marius@owlbertz.de>
Date: Thu, 26 Feb 2015 20:44:57 +0100
Subject: [PATCH] Added accessibility to reveal markup in documentation

---
 .../reveal/examples_reveal_basic.html         |  6 ++---
 .../examples_reveal_basic_rendered.html       |  6 ++---
 .../examples_reveal_modal_examples.html       | 24 +++++++++----------
 ...amples_reveal_modal_examples_rendered.html | 18 +++++++-------
 doc/pages/components/reveal.html              |  2 +-
 5 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/doc/includes/reveal/examples_reveal_basic.html b/doc/includes/reveal/examples_reveal_basic.html
index d5ec92465c..1117624549 100644
--- a/doc/includes/reveal/examples_reveal_basic.html
+++ b/doc/includes/reveal/examples_reveal_basic.html
@@ -2,11 +2,11 @@
 ```html
 <a href="#" data-reveal-id="myModal">Click Me For A Modal</a>
 
-<div id="myModal" class="reveal-modal" data-reveal>
-  <h2>Awesome. I have it.</h2>
+<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
+  <h2 id="modalTitle">Awesome. I have it.</h2>
   <p class="lead">Your couch.  It is mine.</p>
   <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
-  <a class="close-reveal-modal">&#215;</a>
+  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
 </div>
 ```
 {{/markdown}}
diff --git a/doc/includes/reveal/examples_reveal_basic_rendered.html b/doc/includes/reveal/examples_reveal_basic_rendered.html
index 1c56cdc758..f309ad2927 100644
--- a/doc/includes/reveal/examples_reveal_basic_rendered.html
+++ b/doc/includes/reveal/examples_reveal_basic_rendered.html
@@ -1,8 +1,8 @@
 <a href="#" data-reveal-id="myModal">Click Me For A Modal</a>
 
-<div id="myModal" class="reveal-modal" data-reveal>
-  <h2>Awesome. I have it.</h2>
+<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
+  <h2 id="modalTitle">Awesome. I have it.</h2>
   <p class="lead">Your couch.  It is mine.</p>
   <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
-  <a class="close-reveal-modal">&#215;</a>
+  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
 </div>
\ No newline at end of file
diff --git a/doc/includes/reveal/examples_reveal_modal_examples.html b/doc/includes/reveal/examples_reveal_modal_examples.html
index 483eb155d5..47e6a7b826 100644
--- a/doc/includes/reveal/examples_reveal_modal_examples.html
+++ b/doc/includes/reveal/examples_reveal_modal_examples.html
@@ -2,30 +2,30 @@
 ```html
 <!-- Triggers the modals -->
 <a href="#" data-reveal-id="firstModal" class="radius button">Modal in a modal&hellip;</a>
-<a href="#" data-reveal-id="videoModal" class="radius button">Example Modal w/Video&hellip;</a>
+<a href="#" data-reveal-id="videoModal" class="radius button">Example Modal with Video&hellip;</a>
 
 <!-- Reveal Modals begin -->
-<div id="firstModal" class="reveal-modal" data-reveal>
-  <h2>This is a modal.</h2>
+<div id="firstModal" class="reveal-modal" data-reveal aria-labelledby="firstModalTitle" aria-hidden="true" role="dialog">
+  <h2 id="firstModalTitle">This is a modal.</h2>
   <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
   <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
   <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
-  <a class="close-reveal-modal">&#215;</a>
+  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
 </div>
 
-<div id="secondModal" class="reveal-modal" data-reveal>
-  <h2>This is a second modal.</h2>
+<div id="secondModal" class="reveal-modal" data-reveal aria-labelledby="secondModalTitle" aria-hidden="true" role="dialog">
+  <h2 id="secondModalTitle">This is a second modal.</h2>
   <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
-  <a class="close-reveal-modal">&#215;</a>
+  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
 </div>
 
-<div id="videoModal" class="reveal-modal large" data-reveal="">
-  <h2>This modal has video</h2>
-  <div class="flex-video widescreen vimeo" style="display: block;">
-    <iframe width="1280" height="720" src="http://www.youtube-nocookie.com/embed/wnXCopXXblE?rel=0" frameborder="0" allowfullscreen="" data-src="http://www.youtube-nocookie.com/embed/wnXCopXXblE?rel=0"></iframe>
+<div id="videoModal" class="reveal-modal large" data-reveal aria-labelledby="videoModalTitle" aria-hidden="true" role="dialog">
+  <h2 id="videoModalTitle">This modal has video</h2>
+  <div class="flex-video widescreen vimeo">
+    <iframe width="1280" height="720" src="//www.youtube-nocookie.com/embed/wnXCopXXblE?rel=0" frameborder="0" allowfullscreen></iframe>
   </div>
 
-  <a class="close-reveal-modal">&#215;</a>
+  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
 </div>
 <!-- Reveal Modals end -->
 ```
diff --git a/doc/includes/reveal/examples_reveal_modal_examples_rendered.html b/doc/includes/reveal/examples_reveal_modal_examples_rendered.html
index d044ca856d..9a23827ebc 100644
--- a/doc/includes/reveal/examples_reveal_modal_examples_rendered.html
+++ b/doc/includes/reveal/examples_reveal_modal_examples_rendered.html
@@ -2,26 +2,26 @@
 <a href="#" data-reveal-id="videoModal" class="radius button">Example Modal with Video&hellip;</a>
 
 <!-- Reveal Modals begin -->
-<div id="firstModal" class="reveal-modal" data-reveal>
-  <h2>This is a modal.</h2>
+<div id="firstModal" class="reveal-modal" data-reveal aria-labelledby="firstModalTitle" aria-hidden="true" role="dialog">
+  <h2 id="firstModalTitle">This is a modal.</h2>
   <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
   <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
   <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
-  <a class="close-reveal-modal">&#215;</a>
+  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
 </div>
 
-<div id="secondModal" class="reveal-modal" data-reveal>
-  <h2>This is a second modal.</h2>
+<div id="secondModal" class="reveal-modal" data-reveal aria-labelledby="secondModalTitle" aria-hidden="true" role="dialog">
+  <h2 id="secondModalTitle">This is a second modal.</h2>
   <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
-  <a class="close-reveal-modal">&#215;</a>
+  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
 </div>
 
-<div id="videoModal" class="reveal-modal large" data-reveal>
-  <h2>This modal has video</h2>
+<div id="videoModal" class="reveal-modal large" data-reveal aria-labelledby="videoModalTitle" aria-hidden="true" role="dialog">
+  <h2 id="videoModalTitle">This modal has video</h2>
   <div class="flex-video widescreen vimeo">
     <iframe width="1280" height="720" src="//www.youtube-nocookie.com/embed/wnXCopXXblE?rel=0" frameborder="0" allowfullscreen></iframe>
   </div>
 
-  <a class="close-reveal-modal">&#215;</a>
+  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
 </div>
 <!-- Reveal Modals end -->
\ No newline at end of file
diff --git a/doc/pages/components/reveal.html b/doc/pages/components/reveal.html
index 2612995098..e751763aa7 100644
--- a/doc/pages/components/reveal.html
+++ b/doc/pages/components/reveal.html
@@ -124,7 +124,7 @@ <h4>JS</h4>
 
 ## Accessibility
 
-<p class="panel">This component is not yet accessible. Stay tuned for updates in future releases.</p>
+<p class="panel">This component is not yet fully accessible. While it is usable via the keyboard, it has to be checked if additional ARIA attributes can enhance the components accessibility.</p>
 
 ***