feat (focus-visible): remove what-intent and use focus-visible

Author: firestar300

package.json

@@ -19,8 +19,7 @@
   "dependencies": {
     "@fontsource/poppins": "^5.0.5",
     "lazysizes": "^5.3.2",
-    "oneloop.js": "^5.0.0",
-    "what-input": "^5.2.10"
+    "oneloop.js": "^5.0.0"
   },
   "devDependencies": {
     "@wordpress/blocks": "^11.16.0",

src/js/index.js

@@ -2,7 +2,6 @@ import lazySizes from 'lazysizes'
 import 'lazysizes/plugins/native-loading/ls.native-loading'
 import 'lazysizes/plugins/object-fit/ls.object-fit'
 import 'lazysizes/plugins/print/ls.print'
-import 'what-input'
 import './classes/ScrollDirection'
 import './classes/ButtonSeoClick'
 import './classes/Header'

src/scss/04-utilities/_focus.scss

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

yarn.lock

@@ -3227,7 +3227,6 @@ __metadata:
     webpack-manifest-plugin: 5.0.0
     webpack-merge: ^5.7.3
     webpackbar: ^5.0.0-3
-    what-input: ^5.2.10
   languageName: unknown
   linkType: soft
 
@@ -12758,13 +12757,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"what-input@npm:^5.2.10":
-  version: 5.2.12
-  resolution: "what-input@npm:5.2.12"
-  checksum: 05edbb24c8a5a3711cec647cdc36686924e13829b63d8b5ca46a95be9eb0663b767b1b1e229b7b0707a63bffe5fb5225935aaf098db56ebe1f7728ed792988a1
-  languageName: node
-  linkType: hard
-
 "which-module@npm:^2.0.0":
   version: 2.0.0
   resolution: "which-module@npm:2.0.0"