From 9257f94a678b37f4d685561f32720966fda199bf Mon Sep 17 00:00:00 2001
From: Felix Zapata <fzberlinches@gmail.com>
Date: Sat, 20 Apr 2019 23:08:53 +0200
Subject: [PATCH] feat(a11y): improve the a11y of the example

---
 public/index.html           | 189 ++++++++++++++++++------------------
 public/scripts/app.js       |  50 ++++++++--
 public/scripts/inert.min.js |   2 +
 public/styles/inline.css    |  68 ++++++++++---
 4 files changed, 194 insertions(+), 115 deletions(-)
 create mode 100644 public/scripts/inert.min.js

diff --git a/public/index.html b/public/index.html
index 4dd1b34..5814230 100644
--- a/public/index.html
+++ b/public/index.html
@@ -63,10 +63,10 @@ <h1>
           <circle cx="16" cy="16" r="14" fill="none"></circle>
         </svg>
       </div>
-      <button class="remove-city">&times;</button>
+      <button class="remove-city" aria-label="remove the city">&times;</button>
       <div class="city-key" hidden></div>
       <div class="card-last-updated" hidden></div>
-      <div class="location">&nbsp;</div>
+      <h2 class="location">&nbsp;</h2>
       <div class="date">&nbsp;</div>
       <div class="description">&nbsp;</div>
       <div class="current">
@@ -76,103 +76,107 @@ <h1>
             <span class="value"></span><span class="scale">°F</span>
           </div>
         </div>
-        <div class="description">
-          <div class="humidity">
-            <span class="label">Humidity:</span>
-            <span class="value"></span><span class="scale">%</span>
-          </div>
-          <div class="wind">
-            <span class="label">Wind:</span>
-            <span class="value"></span>
+        <dl class="description">
+          <dt class="label">Humidity:</dt>
+          <dd class="humidity"><span class="value"></span><span class="scale">%</span></dd>
+          <dt><span class="label">Wind:</span></dt>
+          <dd class="wind"><span class="value"></span>
             <span class="scale">mph</span>
-            <span class="direction"></span>°
-          </div>
-          <div class="sunrise">
-            <span class="label">Sunrise:</span>
-            <span class="value"></span>
-          </div>
-          <div class="sunset">
-              <span class="label">Sunrise:</span>
-              <span class="value"></span>
-            </div>
-        </div>
+            <span class="direction"></span>°</dd>
+          <dt><span class="label">Sunrise:</span></dt>
+          <dd class="sunrise"><span class="value"></span></dd>
+          <dt><span class="label">Sunset:</span></dt>
+          <dd class="sunset"><span class="value"></span></dd>
+        </dl>
       </div>
       <div class="future">
-        <div class="oneday">
-          <div class="date"></div>
-          <div class="icon"></div>
-          <div class="temp-high">
-            <span class="value"></span>°
-          </div>
-          <div class="temp-low">
-            <span class="value"></span>°
-          </div>
-        </div>
-        <div class="oneday">
-          <div class="date"></div>
-          <div class="icon"></div>
-          <div class="temp-high">
-            <span class="value"></span>°
-          </div>
-          <div class="temp-low">
-            <span class="value"></span>°
-          </div>
-        </div>
-        <div class="oneday">
-          <div class="date"></div>
-          <div class="icon"></div>
-          <div class="temp-high">
-            <span class="value"></span>°
-          </div>
-          <div class="temp-low">
-            <span class="value"></span>°
-          </div>
-        </div>
-        <div class="oneday">
-          <div class="date"></div>
-          <div class="icon"></div>
-          <div class="temp-high">
-            <span class="value"></span>°
-          </div>
-          <div class="temp-low">
-            <span class="value"></span>°
-          </div>
-        </div>
-        <div class="oneday">
-          <div class="date"></div>
-          <div class="icon"></div>
-          <div class="temp-high">
-            <span class="value"></span>°
-          </div>
-          <div class="temp-low">
-            <span class="value"></span>°
-          </div>
-        </div>
-        <div class="oneday">
-          <div class="date"></div>
-          <div class="icon"></div>
-          <div class="temp-high">
-            <span class="value"></span>°
-          </div>
-          <div class="temp-low">
-            <span class="value"></span>°
-          </div>
-        </div>
-        <div class="oneday">
-          <div class="date"></div>
-          <div class="icon"></div>
-          <div class="temp-high">
-            <span class="value"></span>°
-          </div>
-          <div class="temp-low">
-            <span class="value"></span>°
-          </div>
-        </div>
+        <table summary="the weather the next 7 days">
+          <thead>
+            <tr>
+              <th class="date"></th>
+              <th class="date"></th>
+              <th class="date"></th>
+              <th class="date"></th>
+              <th class="date"></th>
+              <th class="date"></th>
+              <th class="date"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="icon"></td>
+              <td class="icon"></td>
+              <td class="icon"></td>
+              <td class="icon"></td>
+              <td class="icon"></td>
+              <td class="icon"></td>
+              <td class="icon"></td>
+            </tr>
+            <tr>
+              <td>
+                <div class="temp-high">
+                  <span class="value"></span>°
+                </div>
+                <div class="temp-low">
+                  <span class="value"></span>°
+                </div>
+              </td>
+              <td>
+                  <div class="temp-high">
+                    <span class="value"></span>°
+                  </div>
+                  <div class="temp-low">
+                    <span class="value"></span>°
+                  </div>
+              </td>
+              <td>
+                <div class="temp-high">
+                  <span class="value"></span>°
+                </div>
+                <div class="temp-low">
+                  <span class="value"></span>°
+                </div>
+              </td>
+              <td>
+                <div class="temp-high">
+                  <span class="value"></span>°
+                </div>
+                <div class="temp-low">
+                  <span class="value"></span>°
+                </div>
+              </td>
+              <td>
+                <div class="temp-high">
+                  <span class="value"></span>°
+                </div>
+                <div class="temp-low">
+                  <span class="value"></span>°
+                </div>
+                </td>
+                <td>
+                  <div class="temp-high">
+                    <span class="value"></span>°
+                  </div>
+                  <div class="temp-low">
+                    <span class="value"></span>°
+                  </div>
+                </td>
+              <td>
+                <div class="temp-high">
+                  <span class="value"></span>°
+                </div>
+                <div class="temp-low">
+                  <span class="value"></span>°
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
   </main>
 
-  <div id="addDialogContainer">
+  <div id="addDialogContainer" aria-hidden="true">
     <div class="dialog">
       <div class="dialog-title">Add new city</div>
       <div class="dialog-body">
@@ -199,6 +203,7 @@ <h1>
     </div>
   </div>
 
+  <script src="/scripts/inert.min.js"></script>
   <script src="/scripts/luxon-1.11.4.js"></script>
   <script src="/scripts/app.js"></script>
   <!-- CODELAB: Add the install script here -->
diff --git a/public/scripts/app.js b/public/scripts/app.js
index 3c4c8a2..9a63c93 100644
--- a/public/scripts/app.js
+++ b/public/scripts/app.js
@@ -22,11 +22,33 @@ const weatherApp = {
   addDialogContainer: document.getElementById('addDialogContainer'),
 };
 
+/**
+ * It will keep the focus inside the dialog
+ * It uses the inert attribute
+ * https://github.com/WICG/inert
+ */
+function blockModal(dialog, value) {
+  Array.from(document.body.children).forEach(child => {
+    if(child !== dialog) {
+      child.inert = value;
+    }
+  });
+}
+
 /**
  * Toggles the visibility of the add location dialog box.
  */
 function toggleAddDialog() {
+  let ariaHidden = weatherApp.addDialogContainer.getAttribute('aria-hidden') === 'true' ? 'false' : 'true';
   weatherApp.addDialogContainer.classList.toggle('visible');
+  weatherApp.addDialogContainer.setAttribute('aria-hidden', ariaHidden);
+  // the dialog is going to be visible
+  // we trap the focus inside the dialog
+  if(weatherApp.addDialogContainer.classList.contains('visible')) {
+    blockModal(weatherApp.addDialogContainer, true);
+  } else {
+    blockModal(weatherApp.addDialogContainer, false);
+  }
 }
 
 /**
@@ -65,6 +87,16 @@ function removeLocation(evt) {
   }
 }
 
+/**
+ * Receives an icon name and returns the name
+ * For example, partly-cloudy-night returns partly cloudy night
+ *
+ * @param {String} icon
+ */
+function parseIcon(icon) {
+  return icon.replace(/-/g, ' ');
+}
+
 /**
  * Renders the forecast data into the card element.
  *
@@ -117,20 +149,20 @@ function renderForecast(card, data) {
   card.querySelector('.current .sunset .value').textContent = sunset;
 
   // Render the next 7 days.
-  const futureTiles = card.querySelectorAll('.future .oneday');
-  futureTiles.forEach((tile, index) => {
+  const futureTiles = card.querySelector('.future');
+  let index = 0;
+  for(; index < 7; index++) {
     const forecast = data.daily.data[index + 1];
     const forecastFor = luxon.DateTime
         .fromSeconds(forecast.time)
         .setZone(data.timezone)
         .toFormat('ccc');
-    tile.querySelector('.date').textContent = forecastFor;
-    tile.querySelector('.icon').className = `icon ${forecast.icon}`;
-    tile.querySelector('.temp-high .value')
-        .textContent = Math.round(forecast.temperatureHigh);
-    tile.querySelector('.temp-low .value')
-        .textContent = Math.round(forecast.temperatureLow);
-  });
+    futureTiles.querySelectorAll('.date')[index].textContent = forecastFor;
+    futureTiles.querySelectorAll('.icon')[index].className = `icon ${forecast.icon}`;
+    futureTiles.querySelectorAll('.icon')[index].innerHTML = `<span class="sr-only">${parseIcon(forecast.icon)}</span>`;
+    futureTiles.querySelectorAll('.temp-high')[index].querySelector('.value').textContent = Math.round(forecast.temperatureHigh);
+    futureTiles.querySelectorAll('.temp-low')[index].querySelector('.value').textContent = Math.round(forecast.temperatureLow);
+  }
 
   // If the loading spinner is still visible, remove it.
   const spinner = card.querySelector('.card-spinner');
diff --git a/public/scripts/inert.min.js b/public/scripts/inert.min.js
new file mode 100644
index 0000000..8bb19fa
--- /dev/null
+++ b/public/scripts/inert.min.js
@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t():"function"==typeof define&&define.amd?define("inert",t):t()}(0,function(){"use strict";var e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=Array.prototype.slice,t=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]"].join(","),r=function(){function n(e,t){i(this,n),this._inertManager=t,this._rootElement=e,this._managedNodes=new Set([]),this._rootElement.hasAttribute("aria-hidden")&&(this._savedAriaHidden=this._rootElement.getAttribute("aria-hidden")),this._rootElement.setAttribute("aria-hidden","true"),this._makeSubtreeUnfocusable(this._rootElement),this._observer=new MutationObserver(this._onMutation.bind(this)),this._observer.observe(this._rootElement,{attributes:!0,childList:!0,subtree:!0})}return e(n,[{key:"destructor",value:function(){this._observer.disconnect(),this._observer=null,this._rootElement&&(this.hasSavedAriaHidden?this._rootElement.setAttribute("aria-hidden",this.savedAriaHidden):this._rootElement.removeAttribute("aria-hidden")),this._rootElement=null,this._managedNodes.forEach(function(e){this._unmanageNode(e.node)},this),this._managedNodes=null,this._inertManager=null}},{key:"_makeSubtreeUnfocusable",value:function(e){var t=this;f(e,function(e){return t._visitNode(e)});var n=document.activeElement;if(!document.body.contains(e)){for(var i=e,o=void 0;i;){if(i.nodeType===Node.DOCUMENT_FRAGMENT_NODE){o=i;break}i=i.parentNode}o&&(n=o.activeElement)}e.contains(n)&&(n.blur(),n===document.activeElement&&document.body.focus())}},{key:"_visitNode",value:function(e){e.nodeType===Node.ELEMENT_NODE&&(e!==this._rootElement&&e.hasAttribute("inert")&&this._adoptInertRoot(e),(e.matches(t)||e.hasAttribute("tabindex"))&&this._manageNode(e))}},{key:"_manageNode",value:function(e){var t=this._inertManager.register(e,this);this._managedNodes.add(t)}},{key:"_unmanageNode",value:function(e){var t=this._inertManager.deregister(e,this);t&&this._managedNodes.delete(t)}},{key:"_unmanageSubtree",value:function(e){var t=this;f(e,function(e){return t._unmanageNode(e)})}},{key:"_adoptInertRoot",value:function(e){var t=this._inertManager.getInertRoot(e);t||(this._inertManager.setInert(e,!0),t=this._inertManager.getInertRoot(e)),t.managedNodes.forEach(function(e){this._manageNode(e.node)},this)}},{key:"_onMutation",value:function(e,t){e.forEach(function(e){var t=e.target;if("childList"===e.type)o.call(e.addedNodes).forEach(function(e){this._makeSubtreeUnfocusable(e)},this),o.call(e.removedNodes).forEach(function(e){this._unmanageSubtree(e)},this);else if("attributes"===e.type)if("tabindex"===e.attributeName)this._manageNode(t);else if(t!==this._rootElement&&"inert"===e.attributeName&&t.hasAttribute("inert")){this._adoptInertRoot(t);var n=this._inertManager.getInertRoot(t);this._managedNodes.forEach(function(e){t.contains(e.node)&&n._manageNode(e.node)})}},this)}},{key:"managedNodes",get:function(){return new Set(this._managedNodes)}},{key:"hasSavedAriaHidden",get:function(){return"_savedAriaHidden"in this}},{key:"savedAriaHidden",set:function(e){this._savedAriaHidden=e},get:function(){return this._savedAriaHidden}}]),n}(),s=function(){function n(e,t){i(this,n),this._node=e,this._overrodeFocusMethod=!1,this._inertRoots=new Set([t]),this._destroyed=!1,this.ensureUntabbable()}return e(n,[{key:"destructor",value:function(){this._throwIfDestroyed(),this._node&&(this.hasSavedTabIndex?this._node.setAttribute("tabindex",this.savedTabIndex):this._node.removeAttribute("tabindex"),this._overrodeFocusMethod&&delete this._node.focus),this._node=null,this._inertRoots=null,this._destroyed=!0}},{key:"_throwIfDestroyed",value:function(){if(this.destroyed)throw new Error("Trying to access destroyed InertNode")}},{key:"ensureUntabbable",value:function(){var e=this.node;if(e.matches(t)){if(-1===e.tabIndex&&this.hasSavedTabIndex)return;e.hasAttribute("tabindex")&&(this._savedTabIndex=e.tabIndex),e.setAttribute("tabindex","-1"),e.nodeType===Node.ELEMENT_NODE&&(e.focus=function(){},this._overrodeFocusMethod=!0)}else e.hasAttribute("tabindex")&&(this._savedTabIndex=e.tabIndex,e.removeAttribute("tabindex"))}},{key:"addInertRoot",value:function(e){this._throwIfDestroyed(),this._inertRoots.add(e)}},{key:"removeInertRoot",value:function(e){this._throwIfDestroyed(),this._inertRoots.delete(e),0===this._inertRoots.size&&this.destructor()}},{key:"destroyed",get:function(){return this._destroyed}},{key:"hasSavedTabIndex",get:function(){return"_savedTabIndex"in this}},{key:"node",get:function(){return this._throwIfDestroyed(),this._node}},{key:"savedTabIndex",set:function(e){this._throwIfDestroyed(),this._savedTabIndex=e},get:function(){return this._throwIfDestroyed(),this._savedTabIndex}}]),n}();function f(e,t,n){if(e.nodeType==Node.ELEMENT_NODE){var i=e;t&&t(i);var o=i.shadowRoot||i.webkitShadowRoot;if(o)return void f(o,t,o);if("content"==i.localName){for(var r=i,s=r.getDistributedNodes?r.getDistributedNodes():[],a=0;a<s.length;a++)f(s[a],t,n);return}if("slot"==i.localName){for(var d=i,u=d.assignedNodes?d.assignedNodes({flatten:!0}):[],h=0;h<u.length;h++)f(u[h],t,n);return}}for(var c=e.firstChild;null!=c;)f(c,t,n),c=c.nextSibling}function a(e){if(!e.querySelector("style#inert-style")){var t=document.createElement("style");t.setAttribute("id","inert-style"),t.textContent="\n[inert] {\n  pointer-events: none;\n  cursor: default;\n}\n\n[inert], [inert] * {\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n}\n",e.appendChild(t)}}var n=new(function(){function t(e){if(i(this,t),!e)throw new Error("Missing required argument; InertManager needs to wrap a document.");this._document=e,this._managedNodes=new Map,this._inertRoots=new Map,this._observer=new MutationObserver(this._watchForInert.bind(this)),a(e.head||e.body||e.documentElement),"loading"===e.readyState?e.addEventListener("DOMContentLoaded",this._onDocumentLoaded.bind(this)):this._onDocumentLoaded()}return e(t,[{key:"setInert",value:function(e,t){if(t){if(this._inertRoots.has(e))return;var n=new r(e,this);if(e.setAttribute("inert",""),this._inertRoots.set(e,n),!this._document.body.contains(e))for(var i=e.parentNode;i;)11===i.nodeType&&a(i),i=i.parentNode}else{if(!this._inertRoots.has(e))return;this._inertRoots.get(e).destructor(),this._inertRoots.delete(e),e.removeAttribute("inert")}}},{key:"getInertRoot",value:function(e){return this._inertRoots.get(e)}},{key:"register",value:function(e,t){var n=this._managedNodes.get(e);return void 0!==n?n.addInertRoot(t):n=new s(e,t),this._managedNodes.set(e,n),n}},{key:"deregister",value:function(e,t){var n=this._managedNodes.get(e);return n?(n.removeInertRoot(t),n.destroyed&&this._managedNodes.delete(e),n):null}},{key:"_onDocumentLoaded",value:function(){o.call(this._document.querySelectorAll("[inert]")).forEach(function(e){this.setInert(e,!0)},this),this._observer.observe(this._document.body,{attributes:!0,subtree:!0,childList:!0})}},{key:"_watchForInert",value:function(e,t){e.forEach(function(e){switch(e.type){case"childList":o.call(e.addedNodes).forEach(function(e){if(e.nodeType===Node.ELEMENT_NODE){var t=o.call(e.querySelectorAll("[inert]"));e.matches("[inert]")&&t.unshift(e),t.forEach(function(e){this.setInert(e,!0)},this)}},this);break;case"attributes":if("inert"!==e.attributeName)return;var t=e.target,n=t.hasAttribute("inert");this.setInert(t,n)}},this)}}]),t}())(document);Object.defineProperty(Element.prototype,"inert",{enumerable:!0,get:function(){return this.hasAttribute("inert")},set:function(e){n.setInert(this,e)}})});
+//# sourceMappingURL=inert.min.js.map
diff --git a/public/styles/inline.css b/public/styles/inline.css
index 6580dba..f879001 100644
--- a/public/styles/inline.css
+++ b/public/styles/inline.css
@@ -223,6 +223,26 @@ body {
   background-image: url("/images/tornado.svg");
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+.sr-only-focusable:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+}
+
 /**
  * Main body
  */
@@ -257,6 +277,7 @@ body {
  */
 
 #addDialogContainer {
+  display: none;
   background: rgba(0, 0, 0, 0.57);
   height: 100%;
   left: 0;
@@ -270,6 +291,7 @@ body {
 }
 
 #addDialogContainer.visible {
+  display: block;
   opacity: 1;
   pointer-events: auto;
 }
@@ -324,6 +346,28 @@ body {
  * Weather forecast card
  */
 
+table {
+  width: 100%;
+  margin: 0 auto;
+  border: 0;
+}
+
+table th {
+  text-align: left;
+  font-weight: normal;
+}
+
+
+dt:before {
+  content: "";
+  display: block;
+}
+
+dt, dd {
+  display: inline;
+  margin: 0;
+}
+
 .weather-card {
   background: #fff;
   border-radius: 2px;
@@ -381,28 +425,19 @@ body {
   color: #666;
 }
 
-.weather-card .future {
-  display: flex;
-}
-
-.weather-card .future .oneday {
-  flex-grow: 1;
-  text-align: center;
-}
-
-.weather-card .future .oneday .icon {
+.weather-card .future .icon {
   height: 64px;
   margin-left: auto;
   margin-right: auto;
   width: 64px;
 }
 
-.weather-card .future .oneday .temp-high,
-.weather-card .future .oneday .temp-low {
+.weather-card .future .temp-high,
+.weather-card .future .temp-low {
   display: inline-block;
 }
 
-.weather-card .future .oneday .temp-low {
+.weather-card .future .temp-low {
   color: #666;
 }
 
@@ -411,6 +446,11 @@ body {
  */
 
 @media (max-width: 450px) {
+
+  .weather-card .current, .weather-card dl {
+    display: block;
+  }
+
   .weather-card .date,
   .weather-card .description {
     font-size: 0.9em;
@@ -425,7 +465,7 @@ body {
     font-size: 3em;
   }
 
-  .weather-card .future .oneday .icon {
+  .weather-card .future .icon {
     height: 32px;
     width: 32px;
   }