fix(input): add focus ring to the clear input button for ionic theme (#…

…29409)
ionic-team · May 3, 2024 · 2eb1dbd · 2eb1dbd
1 parent 5c7a782
commit 2eb1dbd
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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();
  });