Skip to content

Commit fe012c3

Browse files
ianmcburnieianmcburnie
committed
docs(dialogs): moved toast & snackbar live regions
1 parent b157389 commit fe012c3

File tree

3 files changed

+103
-99
lines changed

3 files changed

+103
-99
lines changed

‎docs/ui/makeup-dialog-button/index.html‎

Lines changed: 53 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -234,64 +234,66 @@ <h2 id="sort-dialog-title" class="panel-dialog__title panel-dialog__title--cente
234234
Snackbar
235235
</button>
236236

237-
<aside
238-
class="snackbar-dialog snackbar-dialog--transition"
239-
id="dialog-snackbar"
240-
role="dialog"
241-
aria-label="Notification"
242-
aria-live="polite"
243-
aria-modal="false"
244-
hidden
245-
>
246-
<div class="snackbar-dialog__window">
247-
<div class="snackbar-dialog__main">
248-
<p>1 item deleted from watch list.</p>
249-
</div>
250-
<div class="snackbar-dialog__actions">
251-
<button accesskey="u" class="fake-link snackbar-dialog__cta">
252-
Undo<span class="clipped"> - Access Key: U</span>
253-
</button>
237+
<div role="status">
238+
<aside
239+
class="snackbar-dialog snackbar-dialog--transition"
240+
id="dialog-snackbar"
241+
role="dialog"
242+
aria-label="Notification"
243+
aria-modal="false"
244+
hidden
245+
>
246+
<div class="snackbar-dialog__window">
247+
<div class="snackbar-dialog__main">
248+
<p>1 item deleted from watch list.</p>
249+
</div>
250+
<div class="snackbar-dialog__actions">
251+
<button accesskey="u" class="fake-link snackbar-dialog__cta">
252+
Undo<span class="clipped"> - Access Key: U</span>
253+
</button>
254+
</div>
254255
</div>
255-
</div>
256-
</aside>
256+
</aside>
257+
</div>
257258

258259
<button class="btn dialog-button" type="button" data-makeup-for="dialog-toast" aria-haspopup="dialog">
259260
Toast
260261
</button>
261262

262-
<aside
263-
id="dialog-toast"
264-
class="toast-dialog toast-dialog--transition"
265-
role="dialog"
266-
aria-label="Notification"
267-
aria-live="polite"
268-
aria-modal="false"
269-
hidden
270-
>
271-
<div class="toast-dialog__window">
272-
<div class="toast-dialog__header">
273-
<h2 class="toast-dialog__title">User Privacy Preferences</h2>
274-
<button
275-
class="icon-btn icon-btn--transparent toast-dialog__close"
276-
type="button"
277-
aria-label="Close notification dialog"
278-
>
279-
<svg class="icon icon--close" focusable="false" height="24" width="24">
280-
<use href="../../icons.svg#icon-close-24"></use>
281-
</svg>
282-
</button>
283-
</div>
284-
<div class="toast-dialog__main">
285-
<p>
286-
We detected something unusual about a recent sign-in to your eBay account. To help keep you safe, we
287-
recommend you change the password.
288-
</p>
289-
</div>
290-
<div class="toast-dialog__footer">
291-
<button accesskey="v" class="btn btn--primary toast-dialog__cta">View Account</button>
263+
<div role="status">
264+
<aside
265+
id="dialog-toast"
266+
class="toast-dialog toast-dialog--transition"
267+
role="dialog"
268+
aria-label="Notification"
269+
aria-modal="false"
270+
hidden
271+
>
272+
<div class="toast-dialog__window">
273+
<div class="toast-dialog__header">
274+
<h2 class="toast-dialog__title">User Privacy Preferences</h2>
275+
<button
276+
class="icon-btn icon-btn--transparent toast-dialog__close"
277+
type="button"
278+
aria-label="Close notification dialog"
279+
>
280+
<svg class="icon icon--close" focusable="false" height="24" width="24">
281+
<use href="../../icons.svg#icon-close-24"></use>
282+
</svg>
283+
</button>
284+
</div>
285+
<div class="toast-dialog__main">
286+
<p>
287+
We detected something unusual about a recent sign-in to your eBay account. To help keep you safe, we
288+
recommend you change the password.
289+
</p>
290+
</div>
291+
<div class="toast-dialog__footer">
292+
<button accesskey="v" class="btn btn--primary toast-dialog__cta">View Account</button>
293+
</div>
292294
</div>
293-
</div>
294-
</aside>
295+
</aside>
296+
</div>
295297
</main>
296298
</div>
297299
<script src="index.min.js"></script>

‎docs/ui/makeup-snackbar-dialog/index.html‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -21,24 +21,25 @@ <h1>makeup-snackbar-dialog</h1>
2121
</p>
2222
</header>
2323
<main>
24-
<aside
25-
class="snackbar-dialog snackbar-dialog--transition"
26-
role="dialog"
27-
aria-label="Notification"
28-
aria-live="polite"
29-
aria-modal="false"
30-
>
31-
<div class="snackbar-dialog__window">
32-
<div class="snackbar-dialog__main">
33-
<p>1 item deleted from watch list.</p>
24+
<div role="status">
25+
<aside
26+
class="snackbar-dialog snackbar-dialog--transition"
27+
role="dialog"
28+
aria-label="Notification"
29+
aria-modal="false"
30+
>
31+
<div class="snackbar-dialog__window">
32+
<div class="snackbar-dialog__main">
33+
<p>1 item deleted from watch list.</p>
34+
</div>
35+
<div class="snackbar-dialog__actions">
36+
<button accesskey="u" class="fake-link snackbar-dialog__cta">
37+
Undo<span class="clipped"> - Access Key: U</span>
38+
</button>
39+
</div>
3440
</div>
35-
<div class="snackbar-dialog__actions">
36-
<button accesskey="u" class="fake-link snackbar-dialog__cta">
37-
Undo<span class="clipped"> - Access Key: U</span>
38-
</button>
39-
</div>
40-
</div>
41-
</aside>
41+
</aside>
42+
</div>
4243
</main>
4344
</div>
4445
<script src="index.min.js"></script>

‎docs/ui/makeup-toast-dialog/index.html‎

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -21,38 +21,39 @@ <h1>makeup-toast-dialog</h1>
2121
</p>
2222
</header>
2323
<main>
24-
<aside
25-
id="dialog-toast"
26-
class="toast-dialog toast-dialog--transition"
27-
role="dialog"
28-
aria-label="Notification"
29-
aria-live="polite"
30-
aria-modal="false"
31-
>
32-
<div class="toast-dialog__window">
33-
<div class="toast-dialog__header">
34-
<h2 class="toast-dialog__title">User Privacy Preferences</h2>
35-
<button
36-
class="icon-btn icon-btn--transparent toast-dialog__close"
37-
type="button"
38-
aria-label="Close notification dialog"
39-
>
40-
<svg class="icon icon--close-16" focusable="false" height="16" width="16">
41-
<use href="../../icons.svg#icon-close-16"></use>
42-
</svg>
43-
</button>
24+
<div role="status">
25+
<aside
26+
id="dialog-toast"
27+
class="toast-dialog toast-dialog--transition"
28+
role="dialog"
29+
aria-label="Notification"
30+
aria-modal="false"
31+
>
32+
<div class="toast-dialog__window">
33+
<div class="toast-dialog__header">
34+
<h2 class="toast-dialog__title">User Privacy Preferences</h2>
35+
<button
36+
class="icon-btn icon-btn--transparent toast-dialog__close"
37+
type="button"
38+
aria-label="Close notification dialog"
39+
>
40+
<svg class="icon icon--close-16" focusable="false" height="16" width="16">
41+
<use href="../../icons.svg#icon-close-16"></use>
42+
</svg>
43+
</button>
44+
</div>
45+
<div class="toast-dialog__main">
46+
<p>
47+
We detected something unusual about a recent sign-in to your eBay account. To help keep you safe, we
48+
recommend you change the password.
49+
</p>
50+
</div>
51+
<div class="toast-dialog__footer">
52+
<button accesskey="v" class="btn btn--primary toast-dialog__cta">View Account</button>
53+
</div>
4454
</div>
45-
<div class="toast-dialog__main">
46-
<p>
47-
We detected something unusual about a recent sign-in to your eBay account. To help keep you safe, we
48-
recommend you change the password.
49-
</p>
50-
</div>
51-
<div class="toast-dialog__footer">
52-
<button accesskey="v" class="btn btn--primary toast-dialog__cta">View Account</button>
53-
</div>
54-
</div>
55-
</aside>
55+
</aside>
56+
</div>
5657
</main>
5758
</div>
5859
<script src="index.min.js"></script>

0 commit comments

Comments
 (0)