From 373b4ffe216ba584b92014cef501f64668e1f177 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 26 Aug 2022 14:35:58 -0500
Subject: [PATCH] fix(searchbar): clear button has focus indicator (#25828)

---
 core/src/components/input/input.scss         |  7 +++++++
 core/src/components/searchbar/searchbar.scss | 11 +++++++++++
 2 files changed, 18 insertions(+)

diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index 3b918397006..b08914f1b1d 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -147,6 +147,13 @@
   appearance: none;
 }
 
+/**
+ * Normally, we would not want to use :focus
+ * here because that would mean tapping the button
+ * on mobile would focus it (and keep it focused).
+ * However, the clear button always disappears after
+ * being activated, so we never get to that state.
+ */
 .input-clear-icon:focus {
   opacity: 0.5;
 }
diff --git a/core/src/components/searchbar/searchbar.scss b/core/src/components/searchbar/searchbar.scss
index 3e4b2c1ef24..8a41fdde635 100644
--- a/core/src/components/searchbar/searchbar.scss
+++ b/core/src/components/searchbar/searchbar.scss
@@ -145,6 +145,17 @@
   appearance: none;
 }
 
+/**
+ * Normally, we would not want to use :focus
+ * here because that would mean tapping the button
+ * on mobile would focus it (and keep it focused).
+ * However, the clear button always disappears after
+ * being activated, so we never get to that state.
+ */
+.searchbar-clear-button:focus {
+  opacity: 0.5;
+}
+
 :host(.searchbar-has-value.searchbar-should-show-clear) .searchbar-clear-button {
   display: block;
 }