From bc74a696f4a8a5c1f4b586e2c79e3171aa1d33e2 Mon Sep 17 00:00:00 2001
From: Jamie Kyle <113370520+jamiebuilds-signal@users.noreply.github.com>
Date: Tue, 29 Aug 2023 15:45:10 -0700
Subject: [PATCH] Use keyboard-mode instead of :focus-visible

---
 stylesheets/components/CallsTab.scss   | 13 ++++++-------
 stylesheets/components/NavSidebar.scss | 20 ++++++++++----------
 stylesheets/components/NavTabs.scss    |  9 ++++++---
 stylesheets/components/Toast.scss      | 16 ++++++++++------
 4 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/stylesheets/components/CallsTab.scss b/stylesheets/components/CallsTab.scss
index 5485ac6c81f2..0688050eb1a4 100644
--- a/stylesheets/components/CallsTab.scss
+++ b/stylesheets/components/CallsTab.scss
@@ -117,10 +117,9 @@
 
   &:focus {
     outline: none;
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-ultramarine;
+    @include keyboard-mode {
+      box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-ultramarine;
+    }
   }
 
   &::before {
@@ -307,9 +306,9 @@
   }
   &:focus {
     outline: none;
-  }
-  &:focus-visible {
-    box-shadow: 0 0 0 2px $color-ultramarine;
+    @include keyboard-mode {
+      box-shadow: 0 0 0 2px $color-ultramarine;
+    }
   }
   &:disabled,
   &[aria-disabled='true'] {
diff --git a/stylesheets/components/NavSidebar.scss b/stylesheets/components/NavSidebar.scss
index 0db20f7c891c..014f201eaba9 100644
--- a/stylesheets/components/NavSidebar.scss
+++ b/stylesheets/components/NavSidebar.scss
@@ -96,10 +96,9 @@
 
   &:focus {
     outline: none;
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 2px $color-ultramarine;
+    @include keyboard-mode {
+      box-shadow: 0 0 0 2px $color-ultramarine;
+    }
   }
 
   &::before {
@@ -147,9 +146,11 @@
   background: transparent;
   cursor: col-resize;
 
-  &:focus-visible {
+  &:focus {
     outline: none;
-    box-shadow: inset 0 0 0 2px $color-ultramarine;
+    @include keyboard-mode {
+      box-shadow: inset 0 0 0 2px $color-ultramarine;
+    }
   }
 }
 
@@ -194,10 +195,9 @@
 
   &:focus {
     outline: none;
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 2px $color-ultramarine;
+    @include keyboard-mode {
+      box-shadow: 0 0 0 2px $color-ultramarine;
+    }
   }
 }
 
diff --git a/stylesheets/components/NavTabs.scss b/stylesheets/components/NavTabs.scss
index c2208269e160..6012243d4811 100644
--- a/stylesheets/components/NavTabs.scss
+++ b/stylesheets/components/NavTabs.scss
@@ -64,7 +64,7 @@ $NavTabs__ProfileAvatar__size: 28px;
   padding-block: $NavTabs__ItemButton__blockPadding;
   border-radius: 8px;
   .NavTabs__Item:hover &,
-  .NavTabs__Item:focus-visible & {
+  .NavTabs__Item:focus & {
     @include light-theme {
       background-color: $color-black-alpha-06;
     }
@@ -72,8 +72,11 @@ $NavTabs__ProfileAvatar__size: 28px;
       background-color: $color-white-alpha-06;
     }
   }
-  .NavTabs__Item:focus-visible & {
-    box-shadow: 0 0 0 2px $color-ultramarine;
+  .NavTabs__Item:focus & {
+    outline: none;
+    @include keyboard-mode {
+      box-shadow: 0 0 0 2px $color-ultramarine;
+    }
   }
   .NavTabs__Item:active &,
   .NavTabs__Item[aria-selected='true'] & {
diff --git a/stylesheets/components/Toast.scss b/stylesheets/components/Toast.scss
index 89af8564d806..b82ceaf2d5e0 100644
--- a/stylesheets/components/Toast.scss
+++ b/stylesheets/components/Toast.scss
@@ -19,10 +19,12 @@
   max-width: 280px;
   background-color: $color-gray-75;
   color: $color-gray-05;
-  outline: none;
 
-  &:focus:focus-visible {
-    box-shadow: inset 0px 0px 0px 2px $color-ultramarine;
+  &:focus {
+    outline: none;
+    @include keyboard-mode {
+      box-shadow: inset 0px 0px 0px 2px $color-ultramarine;
+    }
   }
 
   &--align-center {
@@ -51,10 +53,12 @@
     padding-inline: 16px;
     white-space: nowrap;
     color: $color-ios-blue-tint;
-    outline: none;
 
-    &:focus:focus-visible {
-      box-shadow: inset 0px 0px 0px 2px $color-ultramarine;
+    &:focus {
+      outline: none;
+      @include keyboard-mode {
+        box-shadow: inset 0px 0px 0px 2px $color-ultramarine;
+      }
     }
   }
 }