Merge pull request #84 from BeAPI/feature/better-focus

feat (a11y) focus outline for keyboard event only

Author: Cocola

package-lock.json

@@ -67,6 +67,7 @@
     "webpack": "^4.32.2",
     "webpack-cli": "^3.3.2",
     "webpack-manifest-plugin": "^2.0.4",
-    "webpack-progress-ora-plugin": "^1.2.1"
+    "webpack-progress-ora-plugin": "^1.2.1",
+    "what-input": "^5.2.6"
   }
 }

package.json

@@ -1,6 +1,8 @@
 /**
  * Main scripts file
  */
+
+import 'what-input'
 import './polyfill/picturefill'
 import './polyfill/forEach'
 import './polyfill/objectfit-polyfill'

src/js/app.js

@@ -0,0 +1,38 @@
+html {
+	a,
+	button,
+	input,
+	select,
+	textarea {
+		&:focus {
+			outline: 2px solid currentColor;
+			outline-offset: .5rem;
+		}
+	}
+	[data-seo-container] {
+		&:focus-within {
+			outline-offset: .5rem;
+			outline: 1px solid currentColor;
+		}
+		*:focus {
+			outline: none;
+		}
+	}
+	&:not([data-whatintent="keyboard"]) {
+		a,
+		button,
+		input,
+		select,
+		textarea {
+			&:focus {
+				outline: none;
+			}
+		}
+		[data-seo-container] {
+			&:focus-within,
+			*:focus {
+				outline: none;
+			}
+		}
+	}
+}

src/scss/base/_focus.scss

@@ -1,15 +1,10 @@
 [data-seo-container] {
     position: relative;
 
-    &:hover,
-    &:focus-within {
+    &:hover {
         cursor: pointer;
     }
 
-    &:focus-within {
-        outline: 1px solid currentColor;
-    }
-
     [data-seo-target] {
         &:before {
             @include pseudo__content;

src/scss/base/_seo.scss

@@ -25,6 +25,7 @@
 @import "base/seo";
 @import "base/lazyload";
 @import "base/layout";
+@import "base/focus";
 
 //Wordpress
 @import "wp/wpforms";