MOBILE-3746 a11y: Improve focus styles

src/core/components/combobox/combobox.scss

@@ -45,7 +45,7 @@ ion-button {
 
     &:focus,
     &:focus-within {
-        border: 2px solid var(--a11y-focus-outline-color);
+        @include core-focus-style();
     }
 }
 

src/theme/globals.mixins.scss

@@ -4,6 +4,25 @@
  * Place here our custom mixins.
  */
 
+ @mixin core-focus() {
+    outline: none;
+    position: relative;
+    &::after {
+        @include position(0, 0, 0, 0);
+        position: absolute;
+        content: "";
+        opacity: 1;
+        z-index: 1;
+        @include core-focus-style();
+    }
+ }
+
+ @mixin core-focus-style() {
+    box-shadow: inset 0 0 var(--a11y-focus-width) 1px var(--a11y-focus-color);
+    // Thicker option:
+    // border: var(--a11y-focus-width) solid var(--a11y-focus-color);
+}
+
 @mixin core-transition($where: all, $time: 500ms) {
     -webkit-transition: $where $time ease-in-out;
     -moz-transition: $where $time ease-in-out;

src/theme/theme.base.scss

@@ -502,16 +502,47 @@ audio.core-media-adapt-width {
 }
 
 // Focus highlight for accessibility.
+ion-item.item-input.ion-focused:not(:focus),
 .ion-focused,
+ion-item.ion-activatable.ion-focused:not(:focus),
 ion-input.has-focus,
 .ion-focused ion-toggle:focus-within,
 .ion-focused ion-select:focus-within,
 .ion-focused ion-checkbox:focus-within,
 .ion-focused ion-radio:focus-within {
-    border: 2px solid var(--a11y-focus-outline-color);
+    @include core-focus();
 }
 
 // Treat cases where there's a focusable element inside an item, like a button.
-ion-item.ion-focused:not(:focus) {
+ion-item.ion-focused:not(:focus),
-    border: none;
+ion-item.item-input ion-input.has-focus {
+    position: relative;
+    &::after {
+        box-shadow: revert;
+        opacity: revert;
+        z-index: revert;
+    }
+    .item-highlight, .item-inner-highlight {
+        position: unset;
+    }
+}
+
+// Change default outline.
+:focus-visible {
+    @include core-focus-style();
+    outline: none;
+}
+
+textarea, button, select, input, a {
+    &:focus {
+        @include core-focus-style();
+        outline: none;
+    }
+}
+
+ion-input .native-input{
+    &:focus, &:focus-visible {
+        box-shadow: none;
+        outline: none;
+    }
 }

src/theme/theme.light.scss

@@ -64,7 +64,8 @@
 
     // Accessibility vars.
     --a11y-min-target-size: 44px;
-    --a11y-focus-outline-color: #005ECC;
+    --a11y-focus-color: var(--primary);
+    --a11y-focus-width: 2px;
 
     --module-icon-size: 24px;