start of live region demo

package.json

@@ -26,6 +26,7 @@
     "node-sass": "^4.12.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
+    "react-debounce-input": "^3.2.0",
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.0",
     "sass-loader": "^7.1.0",

src/components/good/live-region.js

@@ -0,0 +1,10 @@
+import React from "react"
+
+const LiveRegion = ({ message, level = 'polite'}) => {
+    return (
+        <div aria-live={level} role="log" className="visually-hidden">
+            {message ? message : ''}
+        </div>
+    )
+}
+export default LiveRegion

src/components/site-chrome/layout.scss

@@ -90,6 +90,35 @@ section.two-col {
   display: grid;
   grid-template-columns: 1fr 2fr;
 }
+textarea {
+  height: 200px;
+  width: 320px;
+}
+.updateUI {
+  max-width: 320px;
+
+  .toast {
+    background-color: lightyellow;
+    display: flex;
+    opacity: 0;
+    padding: 0.5em;
+    pointer-events: none;
+
+    &.updating {
+      opacity: 1;
+      pointer-events: all;
+    }
+
+    .dismiss {
+      background-color: transparent;
+      border: none;
+      display: inline-block;
+      font-size: 1rem;
+      font-weight: bold;
+      margin-left: auto;
+    }
+  }
+}
 .skip-link {
   left: 0;
   position: absolute;

src/components/site-chrome/navigation.js

@@ -26,7 +26,7 @@ const Navigation = () => (
                 </Heading>
                 <ul>
                     <li><Link to="/dropdown">Dropdown</Link></li>
-                    <li>Modal</li>
+                    <li><Link to="/live-region">Live Region</Link></li>
                     <li><Link to="/semantics">Semantic Layout</Link></li>
                     <li>Carousel</li>
                 </ul>

src/pages/index.jsx

@@ -4,7 +4,7 @@ import Layout from '../components/site-chrome/layout'
 import SEO from '../components/site-chrome/seo'
 
 import Dropdown from '../components/good/dropdown'
-import Modal from '../components/modal'
+import LiveRegion from '../components/good/live-region'
 import Carousel from '../components/carousel'
 
 const IndexPage = () => (
@@ -23,7 +23,7 @@ const IndexPage = () => (
         url: '#'
       }]} />
       <button>Launch modal</button>
-      <Modal />
+      <LiveRegion />
       <Carousel />
     </div>
   </Layout>

src/pages/live-region.jsx

@@ -0,0 +1,66 @@
+import React, {useState} from "react"
+
+import Layout from '../components/site-chrome/layout'
+import SEO from '../components/site-chrome/seo'
+
+import LiveRegion from "../components/good/live-region"
+import {DebounceInput} from 'react-debounce-input'
+
+const Textarea = ({handleUpdateFunc}) => (
+  <DebounceInput
+    minLength={2}
+    debounceTimeout={300}
+    forceNotifyByEnter={false}
+    element="textarea"
+    onChange={event => handleUpdateFunc(event.target.value)} />
+)
+
+const LiveRegionDemoPage = () => {
+  const [message, setMessage] = useState(null)
+  const [updating, setUpdating] = useState(false)
+
+  const handleSubmit = (event) => {
+    event.preventDefault()
+  }
+  const handleTextChange = (value) => {
+    console.log(value)
+    // setMessage(value)
+    setUpdating(true)
+    // setMessage('saved!')
+
+  }
+  const dismissToast = () => {
+    setUpdating(false)
+  }
+  return (
+    <Layout>
+      <SEO title="Live Regions" keywords={['javascript', 'accessibility', 'react']} />
+      <div>
+        <h2>Live Region Demo</h2>
+        <form onSubmit={handleSubmit}>   
+          <label>
+            Enter text here<br />
+            <Textarea handleUpdateFunc={handleTextChange} />
+          </label>
+          <div className="updateUI">
+            <div className={`toast ${updating ? 'updating' : null}`}>
+              <span>Form saved</span>
+              <button
+                onClick={dismissToast}
+                className="dismiss"
+                type="button"
+              >
+                X
+              </button>
+            </div>
+            <LiveRegion level="polite" message={message} />
+          </div>
+        </form>
+      </div>
+    </Layout>
+  )
+}
+
+export default LiveRegionDemoPage
+
+

src/slides/index.mdx

@@ -751,11 +751,13 @@ Downshift?
 
 <Slide>
 
-# Live Region Tips
+# Live Region Gotchas & Tips
 
-- Multiple regions
-- Multiple politeness levels
-- Site-level messaging APIs
+- Include [multiple regions](https://github.com/dequelabs/ngA11y) for stubborn situations
+- Politeness levels depend on the use case
+- Site-level announcement manager APIs <span role="img" aria-label="thumbs up">👍</span>
+
+https://github.com/AlmeroSteyn/react-aria-live
 
 </Slide>
 
@@ -764,7 +766,9 @@ Downshift?
 <Slide>
 
 # Exercise
-## Async action demo (saved!)
+## Async action demo
+
+http://localhost:8000/live-region
 
 </Slide>