From ce450c5a9f2c48219de4e0f27a0284c20aeedf46 Mon Sep 17 00:00:00 2001
From: Razvan Antalut <razvan@figshare.com>
Date: Tue, 24 Oct 2023 13:39:24 +0300
Subject: [PATCH] FIG-33207: updating focus outlines for components and
 elements

---
 packages/ui/button/iconButton/index.css   |   5 +
 packages/ui/input/checkbox/index.css      |   6 +
 packages/ui/input/date/index.css          |  13 +--
 packages/ui/input/search/index.css        | 135 ++++++++++++----------
 packages/ui/input/text/index.css          |  31 ++---
 packages/ui/styles/generic/normalize.css  |   9 +-
 packages/ui/textEditor/Lexical/editor.css |   4 +
 packages/ui/textEditor/index.css          |  18 +--
 packages/ui/textarea/index.css            |  25 ++--
 9 files changed, 140 insertions(+), 106 deletions(-)

diff --git a/packages/ui/button/iconButton/index.css b/packages/ui/button/iconButton/index.css
index dbcd75d9..7e4fc415 100644
--- a/packages/ui/button/iconButton/index.css
+++ b/packages/ui/button/iconButton/index.css
@@ -24,6 +24,7 @@
 
   &:focus,
   &:hover {
+    outline-offset: -2px;
     background: var(--color-iconButton-primary-background_hover);
     fill: var(--color-iconButton-primary-icon_hover);
   }
@@ -40,6 +41,7 @@
 }
 
 .primaryAlt {
+  outline-offset: -2px;
   background: var(--color-iconButton-primaryAlt-background);
   fill: var(--color-iconButton-primaryAlt-icon);
 
@@ -66,6 +68,7 @@
 
   &:focus,
   &:hover {
+    outline-offset: -2px;
     background: var(--color-iconButton-secondary-background_hover);
     fill: var(--color-iconButton-secondary-icon_hover);
   }
@@ -87,6 +90,7 @@
 
   &:focus,
   &:hover {
+    outline-offset: -2px;
     background: var(--color-iconButton-secondaryAlt-background_hover);
     fill: var(--color-iconButton-secondaryAlt-icon_hover);
   }
@@ -108,6 +112,7 @@
 
   &:focus,
   &:hover {
+    outline-offset: -2px;
     background: var(--color-iconButton-tertiary-background_hover);
     fill: var(--color-iconButton-tertiary-icon_hover);
   }
diff --git a/packages/ui/input/checkbox/index.css b/packages/ui/input/checkbox/index.css
index 7d58d119..c3b5e2cb 100644
--- a/packages/ui/input/checkbox/index.css
+++ b/packages/ui/input/checkbox/index.css
@@ -24,6 +24,11 @@
   flex-basis: calc(5 * var(--gridSize));
 }
 
+.checkbox svg {
+  width: 100%;
+  height: 100%;
+}
+
 .checkbox::before {
   position: absolute;
 
@@ -68,4 +73,5 @@
 
 .switch .input {
   border-radius: calc(2.5 * var(--gridSize));
+  outline-offset: 0;
 }
diff --git a/packages/ui/input/date/index.css b/packages/ui/input/date/index.css
index d1ed908b..28e4614d 100644
--- a/packages/ui/input/date/index.css
+++ b/packages/ui/input/date/index.css
@@ -259,24 +259,13 @@
   background-color: var(--color-layout-primary-background);
 }
 
-:global(.react-datepicker__input-container) input:focus,
-:global(.react-datepicker__input-container) input:focus-visible {
-  padding: calc(var(--gridSize) - 1px) calc(2 * var(--gridSize) - 1px);
-
-  border: 2px solid var(--color-border-active);
-  outline: none;
-  background-color: var(--color-layout-primary-background);
-
-  box-shadow: none;
-}
-
 .error input {
   border-color: var(--color-border-error);
 }
 
 .error input:focus,
 .error input:focus-visible {
-  border-color: var(--color-border-error);
+  outline-color: var(--color-border-error);
 }
 
 .disabled input,
diff --git a/packages/ui/input/search/index.css b/packages/ui/input/search/index.css
index ce585062..71b40ce5 100644
--- a/packages/ui/input/search/index.css
+++ b/packages/ui/input/search/index.css
@@ -1,12 +1,68 @@
+/* stylelint-disable a11y/no-outline-none */
 .container {
   position: relative;
 
   display: flex;
   flex-direction: row;
+
+  width: calc(60 * var(--gridSize));
+  height: calc(6 * var(--gridSize));
   justify-content: space-between;
   align-items: center;
+}
 
-  width: calc(60 * var(--gridSize));
+.input {
+  overflow: hidden;
+
+  width: calc(100% - 12 * var(--gridSize));
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  border: transparent;
+  border-radius: calc(0.5 * var(--gridSize));
+
+  &:active,
+  &:focus {
+    border-color: none;
+    outline: none;
+    box-shadow: none;
+  }
+
+  &::placeholder {
+    color: var(--color-typography-tertiary);
+  }
+
+  &[aria-disabled] {
+    color: var(--color-typography-disabled);
+    background-color: var(--color-layout-tertiary-background);
+
+    &:focus,
+    &:active {
+      border: none;
+      box-shadow: none;
+    }
+
+    &::placeholder {
+      color: var(--color-typography-disabled);
+    }
+  }
+
+  &[data-size="S"] {
+    font-size: var(--typography-M-fontSize);
+
+    height: calc(4 * var(--gridSize));
+
+    margin: var(--gridSize) calc(2 * var(--gridSize));
+  }
+
+  &[data-size="L"] {
+    font-size: var(--typography-XL-fontSize);
+
+    height: calc(6 * var(--gridSize));
+
+    margin: calc(1.5 * var(--gridSize)) calc(2 * var(--gridSize));
+  }
 }
 
 .defaultContainer {
@@ -16,8 +72,11 @@
   border-radius: calc(0.5 * var(--gridSize));
 
   &:active,
-  &:focus {
-    border: 2px solid var(--color-border-active);
+  &:focus,
+  &:focus-within {
+    outline: 2px solid var(--color-border-active);
+    outline-width: 2px;
+    outline-offset: -2px;
   }
 }
 
@@ -36,6 +95,7 @@
   &:active,
   &:focus {
     border-bottom: 2px solid var(--color-border-active);
+    outline: none;
   }
 }
 
@@ -43,84 +103,35 @@
   background-color: var(--color-layout-tertiary-background);
 }
 
-.defaultContainer:focus-within,
-.defaultContainer.isFocused {
-  border: 2px solid var(--color-border-active);
-}
-
 .defaultContainer.error:focus-within,
 .defaultContainer.isFocused.error {
-  border: 2px solid var(--color-border-error);
+  outline-color: var(--color-border-error);
 }
 
 .underlineContainer:focus-within,
 .underlineContainer.isFocused {
   border-bottom: 2px solid var(--color-border-active);
+  outline: none;
 }
 
 .underlineContainer.error:focus-within,
 .underlineContainer.isFocused.error {
   border-bottom: 2px solid var(--color-border-error);
+  outline: none;
 }
 
-.error {
-  border-color: var(--color-border-error);
+.underlineContainer:focus-within .input,
+.underlineContainer.isFocused .input {
+  padding-bottom: 0;
 
-  &:active,
-  &:focus {
-    border-color: var(--color-border-error);
-  }
+  outline: none;
 }
 
-.input {
-  overflow: hidden;
-
-  width: calc(100% - 12 * var(--gridSize));
-
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  border: transparent;
-  border-radius: calc(0.5 * var(--gridSize));
+.error {
+  border-color: var(--color-border-error);
 
   &:active,
   &:focus {
-    border-color: none;
-    box-shadow: none;
-  }
-
-  &::placeholder {
-    color: var(--color-typography-tertiary);
-  }
-
-  &[aria-disabled] {
-    color: var(--color-typography-disabled);
-    background-color: var(--color-layout-tertiary-background);
-
-    &:focus,
-    &:active {
-      border: none;
-      box-shadow: none;
-    }
-
-    &::placeholder {
-      color: var(--color-typography-disabled);
-    }
-  }
-
-  &[data-size="S"] {
-    font-size: var(--typography-M-fontSize);
-
-    height: calc(4 * var(--gridSize));
-
-    margin: var(--gridSize) calc(2 * var(--gridSize));
-  }
-
-  &[data-size="L"] {
-    font-size: var(--typography-XL-fontSize);
-
-    height: calc(6 * var(--gridSize));
-
-    margin: calc(1.5 * var(--gridSize)) calc(2 * var(--gridSize));
+    border-color: var(--color-border-error);
   }
 }
diff --git a/packages/ui/input/text/index.css b/packages/ui/input/text/index.css
index 260a66a2..fc49fb70 100644
--- a/packages/ui/input/text/index.css
+++ b/packages/ui/input/text/index.css
@@ -1,3 +1,4 @@
+/* stylelint-disable a11y/no-outline-none */
 .container {
   position: relative;
 
@@ -26,10 +27,6 @@
   padding: 0 calc(2 * var(--gridSize));
 }
 
-.container.isFocused > button:last-child {
-  padding-right: calc(2 * var(--gridSize) - 1px);
-}
-
 .underlineTheme {
   composes: container;
 
@@ -61,9 +58,8 @@
 
   &:active,
   &:focus {
-    padding: calc(var(--gridSize) - 1px) calc(2 * var(--gridSize) - 1px);
-
     border-color: none;
+    outline: none;
     box-shadow: none;
   }
 
@@ -78,6 +74,7 @@
     &:focus,
     &:active {
       border: none;
+      outline: none;
       box-shadow: none;
     }
 
@@ -101,30 +98,36 @@
 
 .defaultTheme:focus-within,
 .defaultTheme.isFocused {
-  border: 2px solid var(--color-border-active);
-}
-
-.defaultTheme:focus-within > .input,
-.defaultTheme.isFocused > .input {
-  padding: calc(var(--gridSize) - 1px) calc(2 * var(--gridSize) - 1px);
+  outline: 2px solid var(--color-border-active);
+  outline-width: 2px;
+  outline-offset: -2px;
 }
 
 .defaultTheme.error:focus-within,
 .defaultTheme.isFocused.error {
-  border: 2px solid var(--color-border-error);
+  outline-color: var(--color-border-error);
 }
 
-.defaultTheme:focus-within,
+.defaultTheme:focus-within > .input,
+.defaultTheme.isFocused > .input {
+  outline: none;
+}
+
+.underlineTheme:focus-within,
 .underlineTheme.isFocused {
   border-bottom: 2px solid var(--color-border-active);
+  outline: none;
 }
 
 .underlineTheme:focus-within > .input,
 .underlineTheme.isFocused > .input {
   padding-bottom: calc(var(--gridSize) - 2px);
+
+  outline: none;
 }
 
 .underlineTheme.error:focus-within,
 .underlineTheme.isFocused.error {
   border-bottom: 2px solid var(--color-border-error);
+  outline: none;
 }
diff --git a/packages/ui/styles/generic/normalize.css b/packages/ui/styles/generic/normalize.css
index 60ee9f75..4b51c1d5 100644
--- a/packages/ui/styles/generic/normalize.css
+++ b/packages/ui/styles/generic/normalize.css
@@ -8,8 +8,9 @@ svg {
 
   &:focus {
     border-radius: calc(0.5 * var(--gridSize));
-    outline: none;
-    box-shadow: 0 0 0 2px var(--color-border-focus), 0 0 4px 2px var(--color-border-focusShadow);
+    outline: 2px solid var(--color-border-active);
+    outline-width: 2px;
+    outline-offset: -2px;
   }
 }
 
@@ -33,6 +34,8 @@ button {
     text-decoration: none;
 
     color: var(--color-button-tertiary-label_hover);
+
+    outline-offset: 0;
     background: var(--color-button-tertiary-background_hover);
   }
 
@@ -47,6 +50,8 @@ button {
     text-decoration: none;
 
     color: var(--color-button-tertiary-label_click);
+
+    outline-offset: 0;
     background: var(--color-button-tertiary-background_click);
   }
 
diff --git a/packages/ui/textEditor/Lexical/editor.css b/packages/ui/textEditor/Lexical/editor.css
index c88230d0..02dfd976 100644
--- a/packages/ui/textEditor/Lexical/editor.css
+++ b/packages/ui/textEditor/Lexical/editor.css
@@ -26,6 +26,9 @@
 
 .container:focus-within {
   --border-color: var(--color-border-active);
+
+  outline: 2px solid var(--border-color);
+  outline-offset: -2px;
 }
 
 .container:focus-within::before {
@@ -91,6 +94,7 @@
 }
 
 .input:focus {
+  outline: none;
   box-shadow: none;
 }
 
diff --git a/packages/ui/textEditor/index.css b/packages/ui/textEditor/index.css
index 45c433d6..60cba5ad 100644
--- a/packages/ui/textEditor/index.css
+++ b/packages/ui/textEditor/index.css
@@ -12,14 +12,6 @@
   align-items: center;
 }
 
-.editorContainer.disabled {
-  background-color: var(--color-input-background_disabled);
-}
-
-.componentContainer:focus-within {
-  border: 2px solid var(--color-border-active);
-}
-
 .editorContainer {
   position: relative;
 
@@ -36,10 +28,20 @@
   box-shadow: inset 0 1px 4px rgba(135, 134, 134, 0.2);
 }
 
+.editorContainer.disabled {
+  background-color: var(--color-input-background_disabled);
+}
+
+.editorContainer:focus-within {
+  border-radius: calc(var(--gridSize) / 2);
+  outline: 2px solid var(--color-border-active);
+}
+
 .titleEditorContainer {
   min-height: calc(14 * var(--gridSize));
 }
 
+/* stylelint-disable-next-line a11y/no-display-none */
 .editorContainer::-webkit-resizer {
   display: none;
 }
diff --git a/packages/ui/textarea/index.css b/packages/ui/textarea/index.css
index 69143429..6160b87f 100644
--- a/packages/ui/textarea/index.css
+++ b/packages/ui/textarea/index.css
@@ -1,3 +1,4 @@
+/* stylelint-disable a11y/no-outline-none */
 .textarea {
   position: relative;
 
@@ -42,12 +43,12 @@
 
   &:active,
   &:focus {
-    padding: calc(var(--gridSize) - 1px) calc(2 * var(--gridSize) - 1px);
-
-    border: 2px solid var(--color-border-active);
+    outline: 2px solid var(--color-border-active);
+    outline-width: 2px;
+    outline-offset: -2px;
 
     &[aria-invalid] {
-      border: 2px solid var(--color-border-error);
+      outline-color: var(--color-border-error);
     }
   }
 }
@@ -65,17 +66,25 @@
   }
 
   &[aria-invalid] {
-    border-bottom: 1px solid var(--color-border-error);
+    border-color: var(--color-border-error);
   }
 
   &:active,
   &:focus {
-    border-bottom: 2px solid var(--color-border-active);
+    padding-bottom: calc(var(--gridSize) - 1px);
 
-    /* padding-bottom: calc(var(--gridSize) - 1px); */
+    border-bottom: 2px solid var(--color-border-active);
+    outline: none;
 
     &[aria-invalid] {
-      border-bottom: 2px solid var(--color-border-error);
+      border-color: var(--color-border-error);
     }
   }
 }
+
+.defaultTheme:active input,
+.defaultTheme:focus-within input,
+.underlineTheme:active input,
+.underlineTheme:focus-within input {
+  outline: none;
+}