feat: disable outline for mouse users

Copied from <https://david-gilbertson.medium.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2>
edwardzjl · Dec 27, 2024 · 05b2bf6 · 05b2bf6
1 parent bd17fc6
commit 05b2bf6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/web/src/index.css b/web/src/index.css
@@ -30,6 +30,13 @@ body {
   min-height: 100vh;
 }
 
+body:not(.user-is-tabbing) button:focus,
+body:not(.user-is-tabbing) input:focus,
+body:not(.user-is-tabbing) select:focus,
+body:not(.user-is-tabbing) textarea:focus {
+  outline: none;
+}
+
 h1 {
   font-size: 3.2em;
   line-height: 1.1;

diff --git a/web/src/main.jsx b/web/src/main.jsx
@@ -4,6 +4,26 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'
 
+
+const handleFirstTab = (e) => {
+  if (e.keyCode === 9) {
+    document.body.classList.add('user-is-tabbing');
+
+    window.removeEventListener('keydown', handleFirstTab);
+    window.addEventListener('mousedown', handleMouseDownOnce);
+  }
+}
+
+const handleMouseDownOnce = () => {
+  document.body.classList.remove('user-is-tabbing');
+
+  window.removeEventListener('mousedown', handleMouseDownOnce);
+  window.addEventListener('keydown', handleFirstTab);
+}
+
+window.addEventListener('keydown', handleFirstTab);
+
+
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <App />