From 6437ee56daf26791f68da0a9db0fcf2c528c2234 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Tue, 6 Jun 2017 10:11:30 +0300 Subject: [PATCH] Accessibility for modals Added accessibility guidelines for modal dialogs, using role="dialog". --- docs/contextual.html | 13 ++++++++++++- docs/quick_reference.html | 1 + docs/v2/DEVLOG.md | 1 + 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/docs/contextual.html b/docs/contextual.html index f39441e..6da3027 100644 --- a/docs/contextual.html +++ b/docs/contextual.html @@ -271,7 +271,18 @@
  • You can place your modal dialog anywhere on your page, as long as the structure is not altered. You can also toggle it from anywhere on a page.
    • -
    +
    + 
    <input id="modal-toggle" type="checkbox"/>
+<label for="modal-toggle">Show modal</label>
+<div class="modal" role="dialog" aria-labelledby="dialogTitle">
+  <div class="card">
+    <label for="modal-toggle" class="close"></label>
+    <h3 class="section" id="dialogTitle">Bad Modal</h3>
+  </div>
+</div>
    +

    Do: You can use the role="dialog" to add accessibility to your modal dialogs. Remember to properly label it and manage keyboard focus, as required.

    +
    + 
    <input id="modal-toggle" type="checkbox"/>
 <label for="modal-toggle">Show modal</label>
 <div class="modal">
diff --git a/docs/quick_reference.html b/docs/quick_reference.html
index 2eb9296..530ff5b 100644
--- a/docs/quick_reference.html
+++ b/docs/quick_reference.html
@@ -1046,6 +1046,7 @@
 			                  
  • Use a .card inside the .modal to display contents
    • 
 							  				
  • Remember to use a <label> or some Javascript to allow users to close the dialog
    • 
 												
  • Modal dialogs can be placed and toggled from anywhere, although the structure must be kept intact
    • 
+												
  • Use role="dialog" to add accessibility to modal dialogs
    •
    diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index fa5c86b..de1967d 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -1226,3 +1226,4 @@ - Fully documented `modal` component. - Added navigation for `modal` component. - Documented customization of `modal` component. +- Added accessibility guidelines for `modal` component.