Accessibility for modals

Added accessibility guidelines for modal dialogs, using role="dialog".

docs/contextual.html

@@ -271,7 +271,18 @@
 							<li>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.</li>
 						</ul><hr>
 						<div class="row">
-							<div class="col-sm-12">
+							<div class="col-sm-12 col-md-6">
+								<pre>&lt;input id=&quot;modal-toggle&quot; type=&quot;checkbox&quot;/&gt;
+&lt;label for=&quot;modal-toggle&quot;&gt;Show modal&lt;/label&gt;
+&lt;div class=&quot;modal&quot; role=&quot;dialog&quot; aria-labelledby=&quot;dialogTitle&quot;&gt;
+  &lt;div class=&quot;card&quot;&gt;
+    &lt;label for=&quot;modal-toggle&quot; class=&quot;close&quot;&gt;&lt;/label&gt;
+    &lt;h3 class=&quot;section&quot; id=&quot;dialogTitle&quot;&gt;Bad Modal&lt;/h3&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+								<p class="do" style="text-align:justify"><mark class="tertiary">Do:</mark>&nbsp;You can use the <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role">dialog</a>&quot;</span></code> to add accessibility to your modal dialogs. Remember to properly label it and manage keyboard focus, as required.</p>
+							</div>
+							<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
 								<pre>&lt;input id=&quot;modal-toggle&quot; type=&quot;checkbox&quot;/&gt;
 &lt;label for=&quot;modal-toggle&quot;&gt;Show modal&lt;/label&gt;
 &lt;div class=&quot;modal&quot;&gt;

docs/quick_reference.html

@@ -1046,6 +1046,7 @@
 			                  <li>Use a <code>.card</code> inside the <code>.modal</code> to display contents</li>
 							  				<li>Remember to use a <code>&lt;label&gt;</code> or some Javascript to allow users to close the dialog</li>
 												<li>Modal dialogs can be placed and toggled from anywhere, although the structure must be kept intact</li>
+												<li>Use <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role">dialog</a>&quot;</span></code> to add accessibility to modal dialogs</li>
 			                </ul>
 			              </div>
 			            </div>

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.