From 5050ef2461b0877edd3254f49366dc5668246270 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 20 Dec 2023 13:08:49 -0800 Subject: [PATCH 1/2] test(radio): re-enable keyboard navigation --- core/src/components/radio/test/a11y/radio.e2e.ts | 12 ++++++++++-- .../components/radio/test/legacy/a11y/radio.e2e.ts | 12 ++++++++++-- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/core/src/components/radio/test/a11y/radio.e2e.ts b/core/src/components/radio/test/a11y/radio.e2e.ts index eaa52c548c3..cb76c0e8fa2 100644 --- a/core/src/components/radio/test/a11y/radio.e2e.ts +++ b/core/src/components/radio/test/a11y/radio.e2e.ts @@ -15,8 +15,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => }); }); - // TODO(FW-5715): re-enable test - test.skip(title('radio: keyboard navigation'), () => { + test.describe(title('radio: keyboard navigation'), () => { test.beforeEach(async ({ page }) => { await page.setContent( ` @@ -65,6 +64,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => const firstGroupRadios = page.locator('#first-group ion-radio'); const secondGroupRadios = page.locator('#second-group ion-radio'); + /** + * Wait for the first radio to be rendered before tabbing. + * This is necessary because the first radio may not be rendered + * when the page first loads. + * + * This would cause the first radio to be skipped when tabbing. + */ + await firstGroupRadios.nth(0).waitFor(); + await pageUtils.pressKeys('Tab'); await expect(firstGroupRadios.nth(0)).toBeFocused(); diff --git a/core/src/components/radio/test/legacy/a11y/radio.e2e.ts b/core/src/components/radio/test/legacy/a11y/radio.e2e.ts index af6ccbfeb2b..bc7b2f438f0 100644 --- a/core/src/components/radio/test/legacy/a11y/radio.e2e.ts +++ b/core/src/components/radio/test/legacy/a11y/radio.e2e.ts @@ -6,14 +6,22 @@ import { configs, test } from '@utils/test/playwright'; */ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { test.describe(title('radio: a11y'), () => { - test.beforeEach(async ({ page, skip }) => { - skip.browser('webkit', 'Tabbing is flaky in Safari'); + test.beforeEach(async ({ page }) => { await page.goto(`/src/components/radio/test/legacy/a11y`, config); }); test('tabbing should switch between radio groups', async ({ page, pageUtils }) => { const firstGroupRadios = page.locator('#first-group ion-radio'); const secondGroupRadios = page.locator('#second-group ion-radio'); + /** + * Wait for the first radio to be rendered before tabbing. + * This is necessary because the first radio may not be rendered + * when the page first loads. + * + * This would cause the first radio to be skipped when tabbing. + */ + await firstGroupRadios.nth(0).waitFor(); + await pageUtils.pressKeys('Tab'); await expect(firstGroupRadios.nth(0)).toBeFocused(); From a4cb5bc0f41ef39985b73a4787dca23382ac76f0 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 20 Dec 2023 13:17:34 -0800 Subject: [PATCH 2/2] test(radio): move to beforeEach --- .../components/radio/test/a11y/radio.e2e.ts | 26 ++++++++++++------- .../radio/test/legacy/a11y/radio.e2e.ts | 26 ++++++++++++------- 2 files changed, 32 insertions(+), 20 deletions(-) diff --git a/core/src/components/radio/test/a11y/radio.e2e.ts b/core/src/components/radio/test/a11y/radio.e2e.ts index cb76c0e8fa2..e5a375bc966 100644 --- a/core/src/components/radio/test/a11y/radio.e2e.ts +++ b/core/src/components/radio/test/a11y/radio.e2e.ts @@ -16,7 +16,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => }); test.describe(title('radio: keyboard navigation'), () => { - test.beforeEach(async ({ page }) => { + test.beforeEach(async ({ page, browserName }) => { await page.setContent( ` @@ -58,21 +58,27 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => `, config ); + + if (browserName === 'webkit') { + const radio = page.locator('#first-group ion-radio').first(); + /** + * Sometimes Safari does not focus the first radio. + * This is a workaround to ensure the first radio is focused. + * + * Wait for the first radio to be rendered before tabbing. + * This is necessary because the first radio may not be rendered + * when the page first loads. + * + * This would cause the first radio to be skipped when tabbing. + */ + await radio.waitFor(); + } }); test('tabbing should switch between radio groups', async ({ page, pageUtils }) => { const firstGroupRadios = page.locator('#first-group ion-radio'); const secondGroupRadios = page.locator('#second-group ion-radio'); - /** - * Wait for the first radio to be rendered before tabbing. - * This is necessary because the first radio may not be rendered - * when the page first loads. - * - * This would cause the first radio to be skipped when tabbing. - */ - await firstGroupRadios.nth(0).waitFor(); - await pageUtils.pressKeys('Tab'); await expect(firstGroupRadios.nth(0)).toBeFocused(); diff --git a/core/src/components/radio/test/legacy/a11y/radio.e2e.ts b/core/src/components/radio/test/legacy/a11y/radio.e2e.ts index bc7b2f438f0..98ccc80a46c 100644 --- a/core/src/components/radio/test/legacy/a11y/radio.e2e.ts +++ b/core/src/components/radio/test/legacy/a11y/radio.e2e.ts @@ -6,22 +6,28 @@ import { configs, test } from '@utils/test/playwright'; */ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { test.describe(title('radio: a11y'), () => { - test.beforeEach(async ({ page }) => { + test.beforeEach(async ({ page, browserName }) => { await page.goto(`/src/components/radio/test/legacy/a11y`, config); + + if (browserName === 'webkit') { + const radio = page.locator('#first-group ion-radio').first(); + /** + * Sometimes Safari does not focus the first radio. + * This is a workaround to ensure the first radio is focused. + * + * Wait for the first radio to be rendered before tabbing. + * This is necessary because the first radio may not be rendered + * when the page first loads. + * + * This would cause the first radio to be skipped when tabbing. + */ + await radio.waitFor(); + } }); test('tabbing should switch between radio groups', async ({ page, pageUtils }) => { const firstGroupRadios = page.locator('#first-group ion-radio'); const secondGroupRadios = page.locator('#second-group ion-radio'); - /** - * Wait for the first radio to be rendered before tabbing. - * This is necessary because the first radio may not be rendered - * when the page first loads. - * - * This would cause the first radio to be skipped when tabbing. - */ - await firstGroupRadios.nth(0).waitFor(); - await pageUtils.pressKeys('Tab'); await expect(firstGroupRadios.nth(0)).toBeFocused();