Switch between polite and assertive

Author: simonw

aria-live-regions.html

@@ -30,6 +30,16 @@
     font-size: 16px;
   }
 
+  .controls {
+    margin-bottom: 20px;
+  }
+
+  select {
+    font-size: 16px;
+    padding: 4px;
+    margin-left: 8px;
+  }
+
   button {
     background: #0066cc;
     border: none;
@@ -126,8 +136,16 @@ <h3>Testing with VoiceOver on iOS</h3>
   </section>
 
   <h2>Demo</h2>
+
+  <div class="controls">
+    <label for="liveType">Live region type: </label>
+    <select id="liveType">
+      <option value="assertive">Assertive</option>
+      <option value="polite">Polite</option>
+    </select>
+  </div>
 
-  <div>
+  <div class="demo-buttons">
     <button id="notifyNow">Insert notification now</button>
     <button id="notifyLater">Insert notification in ten seconds</button>
   </div>
@@ -138,6 +156,11 @@ <h2>Demo</h2>
 const notificationElement = document.getElementById('notification')
 const notifyNowButton = document.getElementById('notifyNow')
 const notifyLaterButton = document.getElementById('notifyLater')
+const liveTypeSelect = document.getElementById('liveType')
+
+liveTypeSelect.addEventListener('change', (event) => {
+  notificationElement.setAttribute('aria-live', event.target.value)
+})
 
 function insertNotification() {
   const time = new Date().toLocaleTimeString()
@@ -156,4 +179,4 @@ <h2>Demo</h2>
 })
   </script>
 </body>
-</html>
+</html>