Step two: Announcing changes

README.md

@@ -1,3 +1,15 @@
-This is a HTML file with react plonked in. Chrome is fussy about CORs so instead of just opening the HTML in your web brower, maybe create a server like so:
+# Step two: Announce changes
+
+A basic react.js app that has an 'address finder' feature that spits out dummy data. Now it annouces changes to screen readers when the content loads.
+
+# Files:
+
+* `clear.svg` a small svg x icon used on a button
+* `index.css` a bunch of CSS
+* `index.html` a HTML page with a div#root for react to hook onto, and our JS dependencies at the bottom
+* `index.js` the React app
+
+# Running this example
+
+You can either just open `index.html` in your browser, or spin up a simple local HTTP server. If you are on a mac, ruby is provided so you can run `ruby -run -e httpd . -p 8000` to get a simple local HTTP server.
 
-`ruby -run -e httpd . -p 8000`

index.js

@@ -67,22 +67,24 @@ class AddressFinder extends React.Component {
             </button>
           )}
         </div>
-        {error && <div className="error">Something is wrong!</div>}
-        {results.length > 0 && (
-          <ul className="results">
-            {results.map(result => (
-              <li key={result}>
-                <button
-                  onClick={() => this.pickAddress(result)}
-                  className="a_result"
-                >
-                  {result}
-                </button>
-              </li>
-            ))}
-          </ul>
-        )}
-        {chosenAddress && <p className="chosen_address">{chosenAddress}</p>}
+        {error && <div role="alert" className="error">Something is wrong!</div>}
+        <div aria-live="polite">
+          {results.length > 0 && (
+            <ul className="results">
+              {results.map(result => (
+                <li key={result}>
+                  <button
+                    onClick={() => this.pickAddress(result)}
+                    className="a_result"
+                  >
+                    {result}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+          {chosenAddress && <p className="chosen_address">{chosenAddress}</p>}
+        </div>
       </div>
     );
   }