UNPKG

@ithaka/bonsai

Version:

ITHAKA core styling

github.com/ithaka/bonsai

ithaka/bonsai

25 lines (17 loc) • 1.09 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
--- title: Accessible Notifications description: Way to send non-visual notifications to a screen reader user js: ./js/bonsai.accessible.notifications.js --- ## How to Use When working with a single page app or dynamic user interactions via Ajax, screen reader users need to be updated on whats happening and when they may need to do something, this component makes that notification easier. In order for a screen reader to correctly read messages, a `<div>` will need to be in DOM at render time, it can not be added after page load. After page load, `BonsaiNotification` just needs the selector string for where the messages should be applied. ```javascript <!-- Will wait for the screen reader to complete its current task before reading message --> <div id="screen-reader-notifications" class="show-for-sr" aria-live="polite" aria-atomic="false" aria-relevant="additions"></div> <!-- Will interrupt its current task and immediately read the message --> <div id="screen-reader-alerts" class="show-for-sr" aria-live="assertive" aria-atomic="false" aria-relevant="additions"></div> ```