Set a custom :focus outline style

- Remove existing customized styling on text and input fields
- Override default outline style and instead, replace with a box-shadow that is styled similar to the default outline but with a fixed color
- This allows the outline to still retain a small border radius, and a custom color at the same time

frontend-shared/styles/mixins/focus.scss

+@use '../variables' as var;
+
+/**
+ * Add stylized focus to interactive elements such <input> or <textarea>
+ *
+ * @param {boolean} $inset -
+ *   The focus style is implemented with a box-shadow and this parameter determines whether
+ *   the box-shadow should be inset on the element. Set this to true when the element
+ *   may be adjacent to another in order to prevent part of the outline from being obscured.
+ */
+@mixin outline($inset: false) {
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var.$color-focus-outline if($inset, inset, null);
+  }
+}
+
+@mixin outline--hide {
+  outline: none;
+  box-shadow: none;
+}
+
 /**
  * Display an outline on an element only when it has keyboard focus.
  *
@@ -6,18 +28,21 @@
  *
  * [1] https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
  * [2] https://github.com/WICG/focus-visible
+ *
+ * @param {boolean} $inset - Does the outline render inset or not
  */
-@mixin outline-on-keyboard-focus {
+@mixin outline-on-keyboard-focus($inset: false) {
+  @include outline($inset);
   // Selector for browsers using JS polyfill, which adds the "focus-visible"
   // class to a keyboard-focused element.
   &:focus:not(.focus-visible) {
-    outline: none;
+    @include outline--hide;
   }
 
   // Selector for browsers with native :focus-visible support.
   // (Do not combine with above, as an unsupported pseudo-class disables the
   // entire selector)
   &:focus:not(:focus-visible) {
-    outline: none;
+    @include outline--hide;
   }
 }

frontend-shared/styles/variables.scss

+// Other colors
+$color-focus-outline: #51a7e8;

src/styles/mixins/forms.scss

@@ -16,17 +16,9 @@
   }
 }
 
-@mixin focus-outline {
-  border-color: var.$color-focus-outline;
-  box-shadow: 0px 1px 2px var.$color-shadow--base inset,
-    0px 0px 5px var.$color-focus-shadow;
-}
-
 @mixin form-input-focus {
-  outline: none;
   background-color: var.$white;
 
-  @include focus-outline;
   @include placeholder {
     color: var.$color-text--light;
   }
@@ -47,6 +39,7 @@
   }
 
   @include utils.border;
+  @include focus.outline;
   border-radius: var.$border-radius;
   color: var.$color-text--light;
   background-color: var.$grey-0;

src/styles/sidebar/components/MenuItem.scss

@@ -18,7 +18,7 @@ a.MenuItem:hover {
 }
 
 .MenuItem {
-  @include focus.outline-on-keyboard-focus;
+  @include focus.outline-on-keyboard-focus($inset: true);
   @include layout.row($align: center);
   align-self: stretch;
   flex-grow: 1;

src/styles/sidebar/components/SelectionTabs.scss

@@ -33,6 +33,8 @@
   cursor: pointer;
   min-width: 85px;
   min-height: 18px;
+  // Give the tab a radius to allow :focus styling to appear similar to that of buttons
+  border-radius: var.$border-radius;
 
   user-select: none;
 

src/styles/sidebar/elements.scss

+@use "@hypothesis/frontend-shared/styles/mixins/focus";
+
 @use "../variables" as var;
 
 // basic standard styling for elements
 a {
+  @include focus.outline-on-keyboard-focus;
+  // Ensure the tag has width in order for :focus styling to render correctly.
+  display: inline-block;
   color: var.$color-link;
   text-decoration: none;
+  // Give links a radius to allow :focus styling to appear similar to that of buttons
+  border-radius: var.$border-radius;
 }
 
 a:active,