From 17312eedbf86502e4cde74170bdd421f3d1b97bd Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 21 Jan 2018 10:53:15 -0800
Subject: [PATCH] add custom focus outline, improve a11y

---
 routes/_components/Media.html |  2 +-
 scss/global.scss              | 11 ++++++++++-
 scss/themes/_base.scss        |  1 +
 scss/themes/_default.scss     |  1 +
 scss/themes/_offline.scss     |  1 +
 scss/themes/gecko.scss        |  1 +
 scss/themes/hotpants.scss     |  1 +
 scss/themes/majesty.scss      |  1 +
 scss/themes/oaken.scss        |  1 +
 scss/themes/scarlet.scss      |  1 +
 scss/themes/seafoam.scss      |  1 +
 templates/2xx.html            |  6 +++---
 12 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/routes/_components/Media.html b/routes/_components/Media.html
index 195a23a3..3a44e1a3 100644
--- a/routes/_components/Media.html
+++ b/routes/_components/Media.html
@@ -4,7 +4,7 @@
     {{#if media.type === 'video'}}
     <button type="button"
             class="play-video-button"
-            aria-label="Play video"
+            aria-label="Play video: {{media.description || ''}}"
             on:click="onClickPlayVideoButton(media, getSmallWidth(media), getSmallHeight(media), media.description)">
       <div class="svg-wrapper">
         <svg>
diff --git a/scss/global.scss b/scss/global.scss
index 41209b1a..f831fed1 100644
--- a/scss/global.scss
+++ b/scss/global.scss
@@ -116,4 +116,13 @@ ul, li, p {
 
 .hidden {
   opacity: 0;
-}
\ No newline at end of file
+}
+
+*:focus {
+  outline: 2px solid var(--focus-outline);
+}
+
+button::-moz-focus-inner {
+  border: 0;
+}
+
diff --git a/scss/themes/_base.scss b/scss/themes/_base.scss
index ecb92ef5..48578f05 100644
--- a/scss/themes/_base.scss
+++ b/scss/themes/_base.scss
@@ -60,4 +60,5 @@
   --mask-opaque-bg: rgba($toast-bg, 0.8);
 
   --deemphasized-text-color: #666;
+  --focus-outline: $focus-outline;
 }
diff --git a/scss/themes/_default.scss b/scss/themes/_default.scss
index fedc1162..46ab57a0 100644
--- a/scss/themes/_default.scss
+++ b/scss/themes/_default.scss
@@ -7,6 +7,7 @@ $main-bg-color: white;
 $secondary-text-color: white;
 $toast-border: #fafafa;
 $toast-bg: #333;
+$focus-outline: lighten($main-theme-color, 30%);
 
 @import "_base.scss";
 
diff --git a/scss/themes/_offline.scss b/scss/themes/_offline.scss
index 292d2ecd..d41f7a54 100644
--- a/scss/themes/_offline.scss
+++ b/scss/themes/_offline.scss
@@ -7,6 +7,7 @@ $main-bg-color: white;
 $secondary-text-color: white;
 $toast-border: #fafafa;
 $toast-bg: #333;
+$focus-outline: lighten($main-theme-color, 15%);
 
 @import "_base.scss";
 
diff --git a/scss/themes/gecko.scss b/scss/themes/gecko.scss
index 7f9fd6c1..b9985037 100644
--- a/scss/themes/gecko.scss
+++ b/scss/themes/gecko.scss
@@ -7,6 +7,7 @@ $main-bg-color: white;
 $secondary-text-color: white;
 $toast-border: #fafafa;
 $toast-bg: #333;
+$focus-outline: lighten($main-theme-color, 30%);
 
 @import "_base.scss";
 
diff --git a/scss/themes/hotpants.scss b/scss/themes/hotpants.scss
index c44345a7..d1d1a184 100644
--- a/scss/themes/hotpants.scss
+++ b/scss/themes/hotpants.scss
@@ -7,6 +7,7 @@ $main-bg-color: white;
 $secondary-text-color: white;
 $toast-border: #fafafa;
 $toast-bg: #333;
+$focus-outline: lighten($main-theme-color, 15%);
 
 @import "_base.scss";
 
diff --git a/scss/themes/majesty.scss b/scss/themes/majesty.scss
index d3fbb2f3..4d3d4824 100644
--- a/scss/themes/majesty.scss
+++ b/scss/themes/majesty.scss
@@ -7,6 +7,7 @@ $main-bg-color: white;
 $secondary-text-color: white;
 $toast-border: #fafafa;
 $toast-bg: #333;
+$focus-outline: lighten($main-theme-color, 30%);
 
 @import "_base.scss";
 
diff --git a/scss/themes/oaken.scss b/scss/themes/oaken.scss
index 3204af40..fbb8bc18 100644
--- a/scss/themes/oaken.scss
+++ b/scss/themes/oaken.scss
@@ -7,6 +7,7 @@ $main-bg-color: white;
 $secondary-text-color: white;
 $toast-border: #fafafa;
 $toast-bg: #333;
+$focus-outline: lighten($main-theme-color, 30%);
 
 @import "_base.scss";
 
diff --git a/scss/themes/scarlet.scss b/scss/themes/scarlet.scss
index ce56d3e3..c303582f 100644
--- a/scss/themes/scarlet.scss
+++ b/scss/themes/scarlet.scss
@@ -7,6 +7,7 @@ $main-bg-color: white;
 $secondary-text-color: white;
 $toast-border: #fafafa;
 $toast-bg: #333;
+$focus-outline: lighten($main-theme-color, 30%);
 
 @import "_base.scss";
 
diff --git a/scss/themes/seafoam.scss b/scss/themes/seafoam.scss
index 86b32ce5..71796d14 100644
--- a/scss/themes/seafoam.scss
+++ b/scss/themes/seafoam.scss
@@ -7,6 +7,7 @@ $main-bg-color: white;
 $secondary-text-color: white;
 $toast-border: #fafafa;
 $toast-bg: #333;
+$focus-outline: lighten($main-theme-color, 30%);
 
 @import "_base.scss";
 
diff --git a/templates/2xx.html b/templates/2xx.html
index 48e09755..0ecb6289 100644
--- a/templates/2xx.html
+++ b/templates/2xx.html
@@ -10,9 +10,9 @@
 
 	<style>
 /* auto-generated w/ build-sass.js */
-body{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#90a8ee;--action-button-fill-color-hover:#a2b6f0;--action-button-fill-color-active:#577ae4;--action-button-fill-color-pressed:#2351dc;--action-button-fill-color-pressed-hover:#3862e0;--action-button-fill-color-pressed-active:#1d44b8;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--deemphasized-text-color:#666}
-body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.3;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:absolute;top:72px;left:0;right:0;bottom:0;will-change:transform}main{position:relative;width:602px;max-width:100vw;padding:15px 0;box-sizing:border-box;margin:15px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{margin:5px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}
-body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-oaken.offline,body.theme-scarlet.offline,body.theme-seafoam.offline,body.theme-gecko.offline{--button-primary-bg:#ababab;--button-primary-text:#fff;--button-primary-border:#4d4d4d;--button-primary-bg-active:#9c9c9c;--button-primary-bg-hover:#b0b0b0;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#999;--main-bg:#fff;--body-bg:#fafafa;--body-text-color:#333;--main-border:#dadada;--svg-fill:#999;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#999;--nav-border:gray;--nav-a-border:#999;--nav-a-selected-border:#fff;--nav-a-selected-bg:#b3b3b3;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#bfbfbf;--nav-a-bg-hover:#a6a6a6;--nav-a-border-hover:#999;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#c7c7c7;--action-button-fill-color-hover:#d1d1d1;--action-button-fill-color-active:#a6a6a6;--action-button-fill-color-pressed:#878787;--action-button-fill-color-pressed-hover:#949494;--action-button-fill-color-pressed-active:#737373;--settings-list-item-bg:#fff;--settings-list-item-text:#999;--settings-list-item-text-hover:#999;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--deemphasized-text-color:#666}
+body{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#90a8ee;--action-button-fill-color-hover:#a2b6f0;--action-button-fill-color-active:#577ae4;--action-button-fill-color-pressed:#2351dc;--action-button-fill-color-pressed-hover:#3862e0;--action-button-fill-color-pressed-active:#1d44b8;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--deemphasized-text-color:#666;--focus-outline:#c5d1f6}
+body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.3;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:absolute;top:72px;left:0;right:0;bottom:0;will-change:transform}main{position:relative;width:602px;max-width:100vw;padding:15px 0;box-sizing:border-box;margin:15px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{margin:5px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}*:focus{outline:2px solid var(--focus-outline)}button::-moz-focus-inner{border:0}
+body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-oaken.offline,body.theme-scarlet.offline,body.theme-seafoam.offline,body.theme-gecko.offline{--button-primary-bg:#ababab;--button-primary-text:#fff;--button-primary-border:#4d4d4d;--button-primary-bg-active:#9c9c9c;--button-primary-bg-hover:#b0b0b0;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#999;--main-bg:#fff;--body-bg:#fafafa;--body-text-color:#333;--main-border:#dadada;--svg-fill:#999;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#999;--nav-border:gray;--nav-a-border:#999;--nav-a-selected-border:#fff;--nav-a-selected-bg:#b3b3b3;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#bfbfbf;--nav-a-bg-hover:#a6a6a6;--nav-a-border-hover:#999;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#c7c7c7;--action-button-fill-color-hover:#d1d1d1;--action-button-fill-color-active:#a6a6a6;--action-button-fill-color-pressed:#878787;--action-button-fill-color-pressed-hover:#949494;--action-button-fill-color-pressed-active:#737373;--settings-list-item-bg:#fff;--settings-list-item-text:#999;--settings-list-item-text-hover:#999;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--deemphasized-text-color:#666;--focus-outline:#bfbfbf}
 
 </style>