Skip to content

Commit a6260f2

Browse files
fstrrfstrr
committed
Rewrite SCR37 as an HTML technique
- ARIA APG covers non-HTML modal dialogs, so we don’t need to repeat all of that content here. - SCR37 was very out of date - HTML `dialog` element has cross-browser support now - SCR37 and working example deleted. - note: I couldn’t find any HTML working examples, do didn’t create one for this.
1 parent 97754b6 commit a6260f2

File tree

5 files changed

+218
-360
lines changed

5 files changed

+218
-360
lines changed

‎techniques/client-side-script/SCR37.html‎

Lines changed: 0 additions & 152 deletions
This file was deleted.

‎techniques/html/H-creating-dialogs-with-the-html-dialog-element.html‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
<!DOCTYPE html>
2+
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<title>Creating Dialogs With The HTML Dialog Element</title>
5+
<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
6+
</head>
7+
<body>
8+
<h1>Creating Dialogs With The <abbr title="HyperText Markup Language">HTML</abbr> <code class="language-html">dialog</code> Element</h1>
9+
<section class="meta">
10+
<p class="id">ID: </p>
11+
<p class="technology">Technology: html</p>
12+
<p class="type">Type: Technique</p>
13+
</section>
14+
<section id="applicability">
15+
<h2>When to Use</h2>
16+
<p>HTML</p>
17+
</section>
18+
<section id="description">
19+
<h2>Description</h2>
20+
<p>Site designers often want to create modal dialogs to get users to focus on a task-related activity outside of the rest of the page's content. Although this can be accomplished using <a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/">ARIA to create a modal dialog</a>, the HTML <code class="language-html">dialog</code> element can also be used. As well as meeting <a href="https://www.w3.org/TR/using-aria/#rule1">the first rule of ARIA</a>, the HTML <code class="language-html">dialog</code> element offers several advantages to its ARIA equivalent, with the browser handling these features:</p>
21+
<ul>
22+
<li>focus management into the newly-opened modal <code class="language-html">dialog</code>;</li>
23+
<li>focus management back onto the triggering element (assuming the trigger is still on the page) when the modal <code class="language-html">dialog</code> is closed;</li>
24+
<li>trapping keyboard focus inside the modal <code class="language-html">dialog</code>;</li>
25+
<li>with no extra code, the underlying page is hidden from assistive technology when the modal <code class="language-html">dialog</code> is open;</li>
26+
<li>the use of the <kbd>Escape</kbd> key to close the modal <code class="language-html">dialog</code>.</li>
27+
</ul>
28+
<p>This technique uses the HTML <code class="language-html">dialog</code> element rather than the ARIA equivalent.</p>
29+
</section><section id="examples"><h2>Examples</h2>
30+
<section class="example">
31+
<h3>A dialog to sign up to a mailing list</h3>
32+
<p>This is an example of using a modal <code class="language-html">dialog</code> element to show a mailing-list sign-up form to a user. The main part of the page contains a <code class="language-html">button</code> element that, when activated, triggers the appearance of the modal <code class="language-html">dialog</code>. The <code class="language-html">button</code> uses the <code class="language-html">aria-controls</code> property to create a programmatic connection between the <code class="language-html">button</code> and the <code class="language-html">dialog</code>; the <code class="language-html">aria-haspopup</code> property, set to <code class="language-html">dialog</code>, to tell assistive technology that the <code class="language-html">button</code> controls a <code class="language-html">dialog</code>, and the <code class="language-html">type</code> attribute to tell the browser that this isn't a <code class="language-html">submit</code> <code class="language-html">button</code>.</p>
33+
34+
<p>When the modal <code class="language-html">dialog</code> is opened, the browser will hide all of the content on the underlying page from assistive technology. For example: a screen reader will not announce any of the content. Additionally, focusing with the keyboard is constrained to the the <code class="language-html">dialog</code> element's focusable content and the browser's controls. The browser takes care of focus management for us by putting the focus onto the first focusable element in the dialog's <abbr title="Document Object Model">DOM</abbr>, which in this demo is the <code class="language-html">h1</code> element because it has a <code class="language-html">tabindex="-1"</code> attribute, making it focusable by scripts. Note that, although the <code class="language-html">dialog</code>'s close <code class="language-html">button</code> is visibly before the <code class="language-html">h1</code>, it is the last item in the <code class="language-html">dialog</code>'s DOM. If the <code class="language-html">button</code> was first, it would receive focus when dialog was opened, which could result in the <code class="language-html">dialog</code> being closed by mistake if the <code class="language-html">button</code> was accidentally activated.</p>
35+
<h4>The HTML</h4>
36+
<pre xml:space="preserve"><code class="language-html">&lt;!doctype html&gt;
37+
&lt;html lang="en"&gt;
38+
&lt;head&gt;
39+
&lt;meta charset="utf-8"&gt;
40+
&lt;meta name="viewport" content="width=device-width,
41+
initial-scale=1, shrink-to-fit=no"&gt;
42+
&lt;title&gt;Turbo Encabulator News&lt;/title&gt;
43+
&lt;/head&gt;
44+
&lt;body&gt;
45+
&lt;main&gt;
46+
&lt;h1&gt;All The News About Turbo Encabulators&lt;/h1&gt;
47+
&lt;button aria-controls=&quot;mailing-list-dialog&quot; aria-haspopup=&quot;dialog&quot;
48+
class=&quot;open-modal&quot; type=&quot;button&quot;&gt;
49+
Sign up to our mailing list!
50+
&lt;/button&gt;
51+
&lt;/main&gt;
52+
&lt;dialog aria-labelledby=&quot;dialog-heading&quot; id=&quot;mailing-list-dialog&quot;&gt;
53+
&lt;h1 id=&quot;dialog-heading&quot; tabindex=&quot;-1&quot;&gt;Sign up to our mailing list&lt;/h1&gt;
54+
&lt;form&gt;
55+
&lt;p class=&quot;req-note&quot;&gt;All form fields are required.&lt;/p&gt;
56+
&lt;div&gt;
57+
&lt;label for=&quot;fname&quot;&gt;First Name&lt;/label&gt;
58+
&lt;input aria-required=&quot;true&quot; autocomplete=&quot;given-name&quot; id=&quot;fname&quot; type=&quot;text&quot;&gt;
59+
&lt;/div&gt;
60+
&lt;div&gt;
61+
&lt;label for=&quot;lname&quot;&gt;Last Name&lt;/label&gt;
62+
&lt;input aria-required=&quot;true&quot; autocomplete=&quot;family-name&quot; id=&quot;lname&quot; type=&quot;text&quot;&gt;
63+
&lt;/div&gt;
64+
&lt;div&gt;
65+
&lt;label for=&quot;email&quot;&gt;Email address&lt;/label&gt;
66+
&lt;input aria-required=&quot;true&quot; autocomplete=&quot;email&quot; id=&quot;email&quot; type=&quot;text&quot;&gt;
67+
&lt;/div&gt;
68+
&lt;button class=&quot;sign-up&quot; type=&quot;submit&quot;&gt;Sign up&lt;/button&gt;
69+
&lt;/form&gt;
70+
&lt;button aria-label=&quot;close&quot; class=&quot;close-modal&quot; type=&quot;button&quot;&gt;&amp;times;&lt;/button&gt;
71+
&lt;/dialog&gt;
72+
&lt;/body&gt;
73+
&lt;/html&gt;</code></pre>
74+
75+
<h4>The CSS</h4>
76+
77+
<pre xml:space="preserve"><code class="language-css">*, *::after, *::before {
78+
box-sizing: inherit;
79+
}
80+
81+
body {
82+
background:#fff;
83+
color:#000;
84+
font:1rem/1.5 system-ui, Helvetica, Roboto, sans-serif;
85+
}
86+
87+
*:focus-visible{
88+
outline:1px solid #0054AE;
89+
outline-offset:1px;
90+
}
91+
92+
dialog {
93+
border:1px solid #000;
94+
padding:2rem;
95+
position:relative;
96+
}
97+
98+
dialog::backdrop {
99+
background-color:hsla(0, 0%, 0%, .5);
100+
}
101+
102+
.close-modal {
103+
inset-block-start:1.5rem;
104+
inset-inline-end:1.5rem;
105+
line-height:1.3;
106+
padding:0.25em 0.5em;
107+
position:absolute;
108+
}
109+
110+
.sign-up{
111+
background:#000;
112+
color:#fff;
113+
padding:0.25em;
114+
}
115+
116+
dialog h1 {
117+
display:inline-block;
118+
line-height:1.3333;
119+
margin:0;
120+
max-inline-size:95%;
121+
}
122+
123+
form{
124+
display:grid;
125+
grid-gap:20px;
126+
grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
127+
}
128+
129+
.req-note, .sign-up{
130+
grid-column:1 / -1;
131+
}
132+
133+
label {
134+
display:block;
135+
}
136+
137+
input {
138+
border:1px solid hsl(0, 0%, 50%);
139+
font:inherit;
140+
inline-size:calc(100% - 4px);
141+
}
142+
143+
button{
144+
background:#fff;
145+
border:1px solid hsl(0, 0%, 50%);
146+
border-radius:3px;
147+
color:inherit;
148+
font:inherit;
149+
margin:0;
150+
}</code></pre>
151+
152+
<h4>The JavaScript</h4>
153+
<p>The script toggles the display of the <code class="language-html">dialog</code>. The HTML <code class="language-html">dialog</code> element can be opened using two different commands: <code class="language-javascript">show()</code> (for non-modal <code class="language-html">dialog</code>s), and <code class="language-javascript">showModal()</code> (for modal <code class="language-html">dialog</code>s).</p>
154+
155+
<pre xml:space="preserve"><code class="language-javascript">document.addEventListener("DOMContentLoaded", function(e){
156+
const d = document.querySelector("dialog");
157+
const btnOpen = document.querySelector(".open-modal");
158+
const btnClose = document.querySelector(".close-modal");
159+
160+
btnOpen.addEventListener("click", function(){
161+
d.showModal();
162+
}, false);
163+
164+
btnClose.addEventListener("click", function(){
165+
d.close();
166+
}, false);
167+
});</code></pre>
168+
169+
</section>
170+
</section><section id="tests"><h2>Tests</h2>
171+
<section class="procedure"><h3>Procedure</h3>
172+
<ol>
173+
<li>Find the components on the page that trigger modal <code class="language-html">dialog</code> elements.</li>
174+
<li>Check that each <code class="language-html">dialog</code> can be opened using the keyboard to activate the triggering element (for example: activate a <code class="language-html">button</code> by pressing the <kbd>Enter</kbd> key or <kbd>Space Bar</kbd>.</li>
175+
<li>When the <code class="language-html">dialog</code> is opened, check that focus is placed inside it.</li>
176+
<li>While the <code class="language-html">dialog</code> is open, check that focus is trapped inside the <code class="language-html">dialog</code>.</li>
177+
<li>When the <code class="language-html">dialog</code> is closed, check that focus is placed back onto the triggering element, if that is still on the page.</li>
178+
</ol>
179+
</section>
180+
<section class="results"><h3>Expected Results</h3>
181+
<ul>
182+
<li>Checks #2, #3, #4 and #5 are true. </li>
183+
</ul>
184+
</section>
185+
</section>
186+
<section id="related">
187+
<h2>Related Techniques</h2>
188+
<ul>
189+
<li>
190+
<a href="../client-side-script/SCR26">SCR26</a>
191+
</li>
192+
<li>
193+
<a href="../general/G59">G59</a>
194+
</li>
195+
</ul>
196+
</section>
197+
<section id="resources">
198+
<h2>Resources</h2>
199+
<ul>
200+
<li>
201+
<a href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">HTML - the <code class="language-html">dialog</code> element</a>.
202+
</li>
203+
<li>
204+
<a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element">HTML - the <code class="language-html">button</code> element</a>.
205+
</li>
206+
<li>
207+
<a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/">ARIA Authoring Practices Guide - dialog (modal) pattern</a>.
208+
</li>
209+
<li>
210+
<a href="https://www.w3.org/TR/using-aria/">Using ARIA</a>.
211+
</li>
212+
</ul>
213+
</section>
214+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
215+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
216+
<script>hljs.highlightAll();</script>
217+
</body>
218+
</html>

0 commit comments

Comments
 (0)