javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Maria Hutt
2024-05-03 12:28:37 -07:00
committed by GitHub
parent 5c7a782c42
commit 2eb1dbd83c
3 changed files with 6 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/input/input.ionic.scss
View File

@ -69,7 +69,7 @@
color: #{$ionic-color-neutral-500}; color: #{$ionic-color-neutral-500};
} }
.input-clear-icon.ion-focused { .input-clear-icon:focus-visible {
@include border-radius($ionic-border-radius-rounded-small); @include border-radius($ionic-border-radius-rounded-small);
outline: #{$ionic-border-size-medium} solid #{$ionic-color-primary-100}; outline: #{$ionic-border-size-medium} solid #{$ionic-color-primary-100};

2
core/src/components/input/input.tsx
View File

@ -843,7 +843,7 @@ export class Input implements ComponentInterface {
<button <button
aria-label="reset" aria-label="reset"
type="button" type="button"
class="input-clear-icon ion-focusable" class="input-clear-icon"
onPointerDown={(ev) => { onPointerDown={(ev) => {
/** /**
* This prevents mobile browsers from * This prevents mobile browsers from

10
core/src/components/input/test/basic/input.e2e.ts
View File

@ -154,7 +154,7 @@ configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
await expect(input).toHaveScreenshot(screenshot(`input-with-clear-button`)); 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 // extra padding around input ensures focus ring doesn't get cut off at screenshot edges
await page.setContent( await page.setContent(
` `
@ -180,9 +180,7 @@ configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
await input.evaluate((el: HTMLIonInputElement) => el.setFocus()); await input.evaluate((el: HTMLIonInputElement) => el.setFocus());
await page.waitForChanges(); await page.waitForChanges();
const clearButton = input.locator('.input-clear-icon'); await pageUtils.pressKeys('Tab');
clearButton.evaluate((el: HTMLElement) => el.classList.add('ion-focused'));
await page.waitForChanges();
const container = page.locator('#container'); const container = page.locator('#container');
await expect(container).toHaveScreenshot(screenshot(`input-clear-button-focused`)); 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 }) => { configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, config }) => {
test.describe(title('input: clear button in ionic theme, functionality checks'), () => { 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( await page.setContent(
` `
<ion-input <ion-input
@ -214,7 +212,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, config }
await expect(clearButton).toBeVisible(); await expect(clearButton).toBeVisible();
// ensure blurring native input doesn't immediately hide clear button // 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).toBeFocused();
await expect(clearButton).toBeVisible(); await expect(clearButton).toBeVisible();
}); });