From 26ee079773b597c36aa77785fd3df3d1228c1a72 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 10 Apr 2023 13:20:05 -0400 Subject: [PATCH 01/11] chore(angular): test apps use modern label syntax --- angular/test/base/src/app/searchbar/searchbar.component.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/angular/test/base/src/app/searchbar/searchbar.component.html b/angular/test/base/src/app/searchbar/searchbar.component.html index 7dde40195cb..fd56e5e027d 100644 --- a/angular/test/base/src/app/searchbar/searchbar.component.html +++ b/angular/test/base/src/app/searchbar/searchbar.component.html @@ -2,8 +2,7 @@
- Searchbar - +
From 09153d799c098b936f245ad7ad3ef332265daf87 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 10 Apr 2023 13:55:12 -0400 Subject: [PATCH 02/11] fix(many): dynamic label support for modern form controls --- core/src/utils/forms/form-controller.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/core/src/utils/forms/form-controller.ts b/core/src/utils/forms/form-controller.ts index a43a2d24919..8ad5633f23b 100644 --- a/core/src/utils/forms/form-controller.ts +++ b/core/src/utils/forms/form-controller.ts @@ -1,3 +1,5 @@ +import { findItemLabel } from '@utils/helpers'; + type HTMLLegacyFormControlElement = HTMLElement & { label?: string; legacy?: boolean }; /** @@ -21,17 +23,12 @@ export const createLegacyFormController = (el: HTMLLegacyFormControlElement): Le * can check to see if the component has slotted text * in the light DOM. */ - const hasLabelProp = (controlEl as any).label !== undefined || hasLabelSlot(controlEl); - const hasAriaLabelAttribute = - controlEl.hasAttribute('aria-label') || - // Shadow DOM form controls cannot use aria-labelledby - (controlEl.hasAttribute('aria-labelledby') && controlEl.shadowRoot === null); - + const legacyLabel = findItemLabel(controlEl); /** * Developers can manually opt-out of the modern form markup * by setting `legacy="true"` on components. */ - legacyControl = controlEl.legacy === true || (!hasLabelProp && !hasAriaLabelAttribute); + legacyControl = controlEl.legacy === true || (legacyLabel !== null && !hasLabelSlot(controlEl)); } return legacyControl; }; From 55ebe1ac480a034183a6d1fc1557ecd7205db8c5 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 10 Apr 2023 16:11:07 -0400 Subject: [PATCH 03/11] fix: use legacy checks, add item label check --- core/src/utils/forms/form-controller.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/core/src/utils/forms/form-controller.ts b/core/src/utils/forms/form-controller.ts index 8ad5633f23b..0a7c628be08 100644 --- a/core/src/utils/forms/form-controller.ts +++ b/core/src/utils/forms/form-controller.ts @@ -23,12 +23,19 @@ export const createLegacyFormController = (el: HTMLLegacyFormControlElement): Le * can check to see if the component has slotted text * in the light DOM. */ - const legacyLabel = findItemLabel(controlEl); + const hasLabelProp = controlEl.label !== undefined || hasLabelSlot(controlEl); + const hasAriaLabelAttribute = + controlEl.hasAttribute('aria-label') || + // Shadow DOM form controls cannot use aria-labelledby + (controlEl.hasAttribute('aria-labelledby') && controlEl.shadowRoot === null); + const legacyItemLabel = findItemLabel(controlEl); + /** * Developers can manually opt-out of the modern form markup * by setting `legacy="true"` on components. */ - legacyControl = controlEl.legacy === true || (legacyLabel !== null && !hasLabelSlot(controlEl)); + legacyControl = + controlEl.legacy === true || (!hasLabelProp && !hasAriaLabelAttribute && legacyItemLabel !== null); } return legacyControl; }; From 9b5eae4a435b5f683a2d690e624a6ef2364ca422 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 10 Apr 2023 16:12:09 -0400 Subject: [PATCH 04/11] test(input): modern syntax supports async labels --- .../components/input/test/item/input.e2e.ts | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/core/src/components/input/test/item/input.e2e.ts b/core/src/components/input/test/item/input.e2e.ts index d853f01c0fd..29f77093471 100644 --- a/core/src/components/input/test/item/input.e2e.ts +++ b/core/src/components/input/test/item/input.e2e.ts @@ -36,4 +36,35 @@ test.describe('input: item', () => { const list = page.locator('ion-list'); expect(await list.screenshot()).toMatchSnapshot(`input-inset-list-no-fill-${page.getSnapshotSettings()}.png`); }); + test('input renders as modern when label is set asynchronously', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/27085', + }); + + await page.setContent( + ` + + + Set label + + + ` + ); + const input = page.locator('ion-input'); + // Initial template should be modern + await expect(input).not.toHaveClass(/legacy-input/); + + // Click button to set label + await page.click('ion-button'); + await page.waitForChanges(); + + // Template should still be modern + await expect(input).not.toHaveClass(/legacy-input/); + }); }); From 60dab25cbf002b39ec438488a577e441b8663ef8 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 10 Apr 2023 22:13:03 -0400 Subject: [PATCH 05/11] test(range): add legacy prop to legacy test --- core/src/components/range/test/legacy/a11y/range.e2e.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/src/components/range/test/legacy/a11y/range.e2e.ts b/core/src/components/range/test/legacy/a11y/range.e2e.ts index bc2941bf51e..d60877daf13 100644 --- a/core/src/components/range/test/legacy/a11y/range.e2e.ts +++ b/core/src/components/range/test/legacy/a11y/range.e2e.ts @@ -9,7 +9,7 @@ test.describe('range: a11y', () => { await page.setContent( ` - + ` @@ -41,7 +41,7 @@ test.describe('range: a11y', () => { await page.setContent( ` - + ` From 33cf731264a535a28d01baf5bd81647c6e39aa2f Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 10 Apr 2023 22:47:47 -0400 Subject: [PATCH 06/11] test(range): add legacy prop to tests --- core/src/components/range/test/label/range.e2e.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/src/components/range/test/label/range.e2e.ts b/core/src/components/range/test/label/range.e2e.ts index 9c128b1c2dc..d773cce0ec3 100644 --- a/core/src/components/range/test/label/range.e2e.ts +++ b/core/src/components/range/test/label/range.e2e.ts @@ -5,7 +5,7 @@ test.describe('range: label', () => { test.describe('range: no start or end items', () => { test('should render a range with no visible label', async ({ page }) => { await page.setContent(` - + `); const range = page.locator('ion-range'); @@ -50,7 +50,7 @@ test.describe('range: label', () => { test.describe('range: start and end items', () => { test('should render a range with no visible label', async ({ page }) => { await page.setContent(` - + From 9037ae39d73d1e2c37dcb47d6349625dfd4ed4ad Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 10 Apr 2023 22:58:39 -0400 Subject: [PATCH 07/11] test(range): add legacy prop to basic test --- core/src/components/range/test/legacy/basic/index.html | 2 +- core/src/components/range/test/legacy/basic/range.e2e.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/core/src/components/range/test/legacy/basic/index.html b/core/src/components/range/test/legacy/basic/index.html index 58b6a313500..a9b05c86d3c 100644 --- a/core/src/components/range/test/legacy/basic/index.html +++ b/core/src/components/range/test/legacy/basic/index.html @@ -249,7 +249,7 @@ Custom pin label - + diff --git a/core/src/components/range/test/legacy/basic/range.e2e.ts b/core/src/components/range/test/legacy/basic/range.e2e.ts index 4fbebb94108..be8cfcc5ace 100644 --- a/core/src/components/range/test/legacy/basic/range.e2e.ts +++ b/core/src/components/range/test/legacy/basic/range.e2e.ts @@ -15,7 +15,7 @@ test.describe('range: basic', () => { * TODO FW-2873 */ test.fixme('should emit start/end events', async ({ page }, testInfo) => { - await page.setContent(``); + await page.setContent(``); const rangeStart = await page.spyOnEvent('ionKnobMoveStart'); const rangeEnd = await page.spyOnEvent('ionKnobMoveEnd'); @@ -43,7 +43,7 @@ test.describe('range: basic', () => { }); test('should emit start/end events, keyboard', async ({ page }) => { - await page.setContent(``); + await page.setContent(``); const rangeStart = await page.spyOnEvent('ionKnobMoveStart'); const rangeEnd = await page.spyOnEvent('ionKnobMoveEnd'); From b5b31e5cac928ee87202c98198d98b3e71172c03 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 10 Apr 2023 23:23:20 -0400 Subject: [PATCH 08/11] test(range): add legacy prop to a11y tests --- core/src/components/range/test/a11y/range.e2e.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/src/components/range/test/a11y/range.e2e.ts b/core/src/components/range/test/a11y/range.e2e.ts index 444f8b590d5..4005c7dead0 100644 --- a/core/src/components/range/test/a11y/range.e2e.ts +++ b/core/src/components/range/test/a11y/range.e2e.ts @@ -25,7 +25,7 @@ test.describe('range: a11y', () => { await page.setContent( ` - + ` @@ -57,7 +57,7 @@ test.describe('range: a11y', () => { await page.setContent( ` - + ` From b514fbc933f1e0561fa19ca67c6ca76992181f67 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Sun, 16 Apr 2023 21:45:41 -0400 Subject: [PATCH 09/11] revert: angular test app searchbar label --- angular/test/base/src/app/searchbar/searchbar.component.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/angular/test/base/src/app/searchbar/searchbar.component.html b/angular/test/base/src/app/searchbar/searchbar.component.html index fd56e5e027d..52ce6106d17 100644 --- a/angular/test/base/src/app/searchbar/searchbar.component.html +++ b/angular/test/base/src/app/searchbar/searchbar.component.html @@ -2,7 +2,8 @@
- + Searchbar +
@@ -12,4 +13,4 @@

Form value: {{ form.value | json }}

- + \ No newline at end of file From 5ea3e5e398b2a10450600e3014552ce53e898a36 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Sun, 16 Apr 2023 21:46:12 -0400 Subject: [PATCH 10/11] chore: whitespace --- angular/test/base/src/app/searchbar/searchbar.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular/test/base/src/app/searchbar/searchbar.component.html b/angular/test/base/src/app/searchbar/searchbar.component.html index 52ce6106d17..7dde40195cb 100644 --- a/angular/test/base/src/app/searchbar/searchbar.component.html +++ b/angular/test/base/src/app/searchbar/searchbar.component.html @@ -13,4 +13,4 @@

Form value: {{ form.value | json }}

- \ No newline at end of file + From a18c2dca389ad0ce81d8768bbb1b6cf1cbaba32b Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 17 Apr 2023 13:52:27 -0400 Subject: [PATCH 11/11] chore: simplify test --- core/src/components/input/test/item/input.e2e.ts | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/core/src/components/input/test/item/input.e2e.ts b/core/src/components/input/test/item/input.e2e.ts index 29f77093471..6e87a31e899 100644 --- a/core/src/components/input/test/item/input.e2e.ts +++ b/core/src/components/input/test/item/input.e2e.ts @@ -46,22 +46,14 @@ test.describe('input: item', () => { ` - Set label - - ` ); const input = page.locator('ion-input'); // Initial template should be modern await expect(input).not.toHaveClass(/legacy-input/); - // Click button to set label - await page.click('ion-button'); + // Update the input label + await input.evaluate((el: HTMLIonInputElement) => (el.label = 'New label')); await page.waitForChanges(); // Template should still be modern