Merge pull request #4170 from parasharrajat/outline

Adjust outline for focused elments
Expensify · Jul 29, 2021 · f99dea6 · f99dea6
2 parents f6b41a3 + a409bdb
commit f99dea6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/src/styles/addOutlineWidth/index.js b/src/styles/addOutlineWidth/index.js
@@ -3,6 +3,8 @@
  * can be added to the object
  */
 
+import themeDefault from '../themes/default';
+
 /**
  * Adds the addOutlineWidth property to an object to be used when styling
  *
@@ -14,6 +16,7 @@ function withOutlineWidth(obj, val) {
     return {
         ...obj,
         outlineWidth: val,
+        boxShadow: `0px 0px 0px ${val}px ${themeDefault.borderFocus}`,
     };
 }
 

diff --git a/web/index.html b/web/index.html
@@ -32,6 +32,14 @@
             -webkit-user-select: none !important;
             -webkit-touch-callout: none !important;
         }
+        :focus-visible {
+            outline: 0;
+            box-shadow: 0px 0px 0px 1px #0185ff;
+        }
+        :focus[data-focusvisible-polyfill] {
+            outline: 0;
+            box-shadow: 0px 0px 0px 1px #0185ff;
+        }
     </style>
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
     <link rel="shortcut icon" id="favicon" href="/favicon.png">