From 2eb1dbd83c390015e81f637a01d6f544d037c868 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Fri, 3 May 2024 12:28:37 -0700
Subject: [PATCH] fix(input): add focus ring to the clear input button for
 ionic theme (#29409)

---
 core/src/components/input/input.ionic.scss        |  2 +-
 core/src/components/input/input.tsx               |  2 +-
 core/src/components/input/test/basic/input.e2e.ts | 10 ++++------
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss
index 26eae66371..e322dbaa11 100644
--- a/core/src/components/input/input.ionic.scss
+++ b/core/src/components/input/input.ionic.scss
@@ -69,7 +69,7 @@
   color: #{$ionic-color-neutral-500};
 }
 
-.input-clear-icon.ion-focused {
+.input-clear-icon:focus-visible {
   @include border-radius($ionic-border-radius-rounded-small);
 
   outline: #{$ionic-border-size-medium} solid #{$ionic-color-primary-100};
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 98dee65228..b135ae99ba 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -843,7 +843,7 @@ export class Input implements ComponentInterface {
               <button
                 aria-label="reset"
                 type="button"
-                class="input-clear-icon ion-focusable"
+                class="input-clear-icon"
                 onPointerDown={(ev) => {
                   /**
                    * This prevents mobile browsers from
diff --git a/core/src/components/input/test/basic/input.e2e.ts b/core/src/components/input/test/basic/input.e2e.ts
index 56f8929745..78f0561c57 100644
--- a/core/src/components/input/test/basic/input.e2e.ts
+++ b/core/src/components/input/test/basic/input.e2e.ts
@@ -154,7 +154,7 @@ configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
       await expect(input).toHaveScreenshot(screenshot(`input-with-clear-button`));
     });
 
-    test('should not have visual regressions when clear button is focused', async ({ page }) => {
+    test('should not have visual regressions when clear button is focused', async ({ page, pageUtils }) => {
       // extra padding around input ensures focus ring doesn't get cut off at screenshot edges
       await page.setContent(
         `
@@ -180,9 +180,7 @@ configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
       await input.evaluate((el: HTMLIonInputElement) => el.setFocus());
       await page.waitForChanges();
 
-      const clearButton = input.locator('.input-clear-icon');
-      clearButton.evaluate((el: HTMLElement) => el.classList.add('ion-focused'));
-      await page.waitForChanges();
+      await pageUtils.pressKeys('Tab');
 
       const container = page.locator('#container');
       await expect(container).toHaveScreenshot(screenshot(`input-clear-button-focused`));
@@ -192,7 +190,7 @@ configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
 
 configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('input: clear button in ionic theme, functionality checks'), () => {
-    test('should show clear button when any part of input is focused', async ({ page }) => {
+    test('should show clear button when any part of input is focused', async ({ page, pageUtils }) => {
       await page.setContent(
         `
           <ion-input
@@ -214,7 +212,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, config }
       await expect(clearButton).toBeVisible();
 
       // ensure blurring native input doesn't immediately hide clear button
-      await page.keyboard.press('Tab');
+      await pageUtils.pressKeys('Tab');
       await expect(clearButton).toBeFocused();
       await expect(clearButton).toBeVisible();
     });