From cc62000b21b209135394bf4e07203317cb4568a2 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 16 May 2020 13:36:08 -0700
Subject: [PATCH] feat: use :focus-visible, add setting to enable/disable it
 (#1775)

* feat: use :focus-visible, add setting to enable it

* add the ids back

* css cleanup
---
 package.json                                  |  1 +
 src/build/template.html                       | 19 +++++++++++++++++++
 src/routes/_pages/settings/general.html       | 12 ++++++++++++
 .../_store/observers/focusRingObservers.js    | 11 +++++++++++
 src/routes/_store/observers/observers.js      |  2 ++
 src/routes/_store/store.js                    |  1 +
 src/routes/_utils/asyncPolyfills.js           |  4 ++++
 src/routes/_utils/loadPolyfills.js            |  5 ++++-
 src/routes/_utils/supportsSelector.js         | 13 +++++++++++++
 src/scss/focus.scss                           |  4 +---
 yarn.lock                                     |  5 +++++
 11 files changed, 73 insertions(+), 4 deletions(-)
 create mode 100644 src/routes/_store/observers/focusRingObservers.js
 create mode 100644 src/routes/_utils/supportsSelector.js

diff --git a/package.json b/package.json
index 90ce76fe..4a5d0909 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "file-api": "^0.10.4",
     "file-drop-element": "0.2.0",
     "file-loader": "^6.0.0",
+    "focus-visible": "^5.1.0",
     "form-data": "^3.0.0",
     "glob": "^7.1.6",
     "indexeddb-getall-shim": "^1.3.6",
diff --git a/src/build/template.html b/src/build/template.html
index e8e444d5..4b9e0842 100644
--- a/src/build/template.html
+++ b/src/build/template.html
@@ -28,6 +28,25 @@
     }
   </style>
 
+  <style id="theFocusVisibleStyle" media="all">
+    /*  :focus-visible styles */
+    /* polyfill */
+    .js-focus-visible :focus:not(.focus-visible) {
+      outline: none !important; /* important to win the specificity war */
+    }
+    .js-focus-visible :focus:not(.focus-visible).focus-after::after {
+      display: none;
+    }
+
+    /* standard version */
+    :focus:not(:focus-visible) {
+      outline: none !important; /* important to win the specificity war */
+    }
+    :focus:not(:focus-visible).focus-after::after {
+      display: none;
+    }
+  </style>
+
   <noscript>
     <style>
       .hidden-from-ssr {
diff --git a/src/routes/_pages/settings/general.html b/src/routes/_pages/settings/general.html
index 209cc3a7..78e62e5a 100644
--- a/src/routes/_pages/settings/general.html
+++ b/src/routes/_pages/settings/general.html
@@ -68,6 +68,18 @@
              bind:checked="$reduceMotion" on:change="onChange(event)">
       Reduce motion in UI animations
     </label>
+    <label class="setting-group">
+      <input type="checkbox" id="choice-always-show-focus-ring"
+             bind:checked="$alwaysShowFocusRing" on:change="onChange(event)">
+      Always show
+      <Tooltip
+        text="focus ring"
+        tooltipText={
+          "The focus ring is the outline showing the currently focused element. By default, it's only " +
+          "shown when using the keyboard (not mouse or touch), but you may choose to always show it."
+        }
+      />
+    </label>
     <label class="setting-group">
       <input type="checkbox" id="choice-disable-tap-on-status"
              bind:checked="$disableTapOnStatus" on:change="onChange(event)">
diff --git a/src/routes/_store/observers/focusRingObservers.js b/src/routes/_store/observers/focusRingObservers.js
new file mode 100644
index 00000000..2dfa3e9b
--- /dev/null
+++ b/src/routes/_store/observers/focusRingObservers.js
@@ -0,0 +1,11 @@
+const style = process.browser && document.getElementById('theFocusVisibleStyle')
+
+export function focusRingObservers (store) {
+  if (!process.browser) {
+    return
+  }
+
+  store.observe('alwaysShowFocusRing', alwaysShowFocusRing => {
+    style.setAttribute('media', alwaysShowFocusRing ? 'only x' : 'all') // disable or enable the style
+  })
+}
diff --git a/src/routes/_store/observers/observers.js b/src/routes/_store/observers/observers.js
index 2aa80089..d904d21e 100644
--- a/src/routes/_store/observers/observers.js
+++ b/src/routes/_store/observers/observers.js
@@ -7,6 +7,7 @@ import { setupLoggedInObservers } from './setupLoggedInObservers'
 import { logOutObservers } from './logOutObservers'
 import { touchObservers } from './touchObservers'
 import { grayscaleObservers } from './grayscaleObservers'
+import { focusRingObservers } from './focusRingObservers'
 import { leftRightFocusObservers } from './leftRightFocusObservers'
 
 export function observers (store) {
@@ -17,6 +18,7 @@ export function observers (store) {
   resizeObservers(store)
   touchObservers(store)
   logOutObservers(store)
+  focusRingObservers(store)
   grayscaleObservers(store)
   leftRightFocusObservers(store)
   setupLoggedInObservers(store)
diff --git a/src/routes/_store/store.js b/src/routes/_store/store.js
index 1131e77f..e79803cb 100644
--- a/src/routes/_store/store.js
+++ b/src/routes/_store/store.js
@@ -6,6 +6,7 @@ import { observe } from 'svelte-extras'
 import { isKaiOS } from '../_utils/userAgent/isKaiOS'
 
 const persistedState = {
+  alwaysShowFocusRing: false,
   autoplayGifs: false,
   composeData: {},
   currentInstance: null,
diff --git a/src/routes/_utils/asyncPolyfills.js b/src/routes/_utils/asyncPolyfills.js
index 7047db0c..844d0bc0 100644
--- a/src/routes/_utils/asyncPolyfills.js
+++ b/src/routes/_utils/asyncPolyfills.js
@@ -17,3 +17,7 @@ export const importCustomElementsPolyfill = () => import(
 export const importIntl = () => import(
   /* webpackChunkName: '$polyfill$-intl' */ 'intl'
 )
+
+export const importFocusVisible = () => import(
+  /* webpackChunkName: '$polyfill$-focus-visible' */ 'focus-visible'
+)
diff --git a/src/routes/_utils/loadPolyfills.js b/src/routes/_utils/loadPolyfills.js
index b9a9515d..0a9b0de3 100644
--- a/src/routes/_utils/loadPolyfills.js
+++ b/src/routes/_utils/loadPolyfills.js
@@ -1,10 +1,12 @@
 import {
   importCustomElementsPolyfill,
+  importFocusVisible,
   importIndexedDBGetAllShim,
   importIntersectionObserver,
   importIntl,
   importRequestIdleCallback
 } from './asyncPolyfills'
+import { supportsSelector } from './supportsSelector'
 
 export function loadPolyfills () {
   return Promise.all([
@@ -12,6 +14,7 @@ export function loadPolyfills () {
     typeof requestIdleCallback === 'undefined' && importRequestIdleCallback(),
     !IDBObjectStore.prototype.getAll && importIndexedDBGetAllShim(),
     typeof customElements === 'undefined' && importCustomElementsPolyfill(),
-    process.env.LEGACY && typeof Intl === 'undefined' && importIntl()
+    process.env.LEGACY && typeof Intl === 'undefined' && importIntl(),
+    !supportsSelector(':focus-visible') && importFocusVisible()
   ])
 }
diff --git a/src/routes/_utils/supportsSelector.js b/src/routes/_utils/supportsSelector.js
new file mode 100644
index 00000000..b36e6783
--- /dev/null
+++ b/src/routes/_utils/supportsSelector.js
@@ -0,0 +1,13 @@
+// See https://stackoverflow.com/a/8533927
+export function supportsSelector (selector) {
+  const style = document.createElement('style')
+  document.head.appendChild(style)
+  try {
+    style.sheet.insertRule(selector + '{}', 0)
+  } catch (e) {
+    return false
+  } finally {
+    document.head.removeChild(style)
+  }
+  return true
+}
diff --git a/src/scss/focus.scss b/src/scss/focus.scss
index 6df949f9..7c52b5e6 100644
--- a/src/scss/focus.scss
+++ b/src/scss/focus.scss
@@ -1,6 +1,4 @@
-
-
-*:focus {
+:focus {
   outline: var(--focus-width) solid var(--focus-outline);
 }
 
diff --git a/yarn.lock b/yarn.lock
index 06e2e6cf..f16965dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4254,6 +4254,11 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+focus-visible@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-5.1.0.tgz#4b9d40143b865f53eafbd93ca66672b3bf9e7b6a"
+  integrity sha512-nPer0rjtzdZ7csVIu233P2cUm/ks/4aVSI+5KUkYrYpgA7ujgC3p6J7FtFU+AIMWwnwYQOB/yeiOITxFeYIXiw==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"