feat(focus-visible): raw implementation

Orange-OpenSource · May 27, 2020 · 64ad4b6 · 64ad4b6
1 parent 78f77af
commit 64ad4b6
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 0 deletions.
diff --git a/js/index.esm.js b/js/index.esm.js
@@ -16,6 +16,7 @@ import ScrollSpy from './src/scrollspy'
 import Tab from './src/tab'
 import Toast from './src/toast'
 import Tooltip from './src/tooltip'
+import '../node_modules/focus-visible/dist/focus-visible.js' // Boosted mod
 
 export {
   Alert,

diff --git a/js/index.umd.js b/js/index.umd.js
@@ -16,6 +16,7 @@ import ScrollSpy from './src/scrollspy'
 import Tab from './src/tab'
 import Toast from './src/toast'
 import Tooltip from './src/tooltip'
+import '../node_modules/focus-visible/dist/focus-visible.js' // Boosted mod
 
 export default {
   Alert,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -111,6 +111,7 @@
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-unicorn": "^20.0.0",
     "find-unused-sass-variables": "^2.0.0",
+    "focus-visible": "^5.1.0",
     "glob": "^7.1.6",
     "hammer-simulator": "0.0.1",
     "hugo-bin": "^0.59.0",

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -70,6 +70,15 @@ body {
   outline: 0 !important;
 }
 
+// Boosted mod
+// Using the :focus-visible polyfill to hide outline defensively
+// See https://github.com/WICG/focus-visible
+.js-focus-visible :focus:not([data-focus-visible-added]),
+.js-focus-visible .focus:not([data-focus-visible-added]) {
+  outline: 0 !important;
+}
+// End mod
+
 
 // Content grouping
 //