fix(searchbar): clear button has focus indicator (#25828)

ionic-team · Aug 26, 2022 · 373b4ff · 373b4ff
1 parent c270756
commit 373b4ff
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git 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
@@ -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;
 }