javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +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};
}
.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};

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

@ -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

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`));
});
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();
});