Skip to content

fix(overlays): show focus indicators only during keyboard navigation and improve focus management #19534

fix(overlays): show focus indicators only during keyboard navigation and improve focus management

fix(overlays): show focus indicators only during keyboard navigation and improve focus management #19534

Triggered via pull request June 12, 2026 21:39
@IonitronIonitron
synchronize #31165
FW-6922
Status Failure
Total duration 13m 40s
Artifacts –

build.yml

on: pull_request
build-react
48s
build-react
build-vue
42s
build-vue
Matrix: test-core-screenshot
build-angular
1m 8s
build-angular
build-angular-server
46s
build-angular-server
test-core-clean-build
12s
test-core-clean-build
test-core-lint
59s
test-core-lint
test-core-spec
1m 1s
test-core-spec
build-react-router
build-react-router
build-vue-router
build-vue-router
verify-screenshots
4s
verify-screenshots
Matrix: test-angular-e2e
Matrix: test-react-e2e
Matrix: test-react-router-e2e
Matrix: test-vue-e2e
verify-test-angular-e2e
3s
verify-test-angular-e2e
verify-test-react-e2e
4s
verify-test-react-e2e
verify-test-react-router-e2e
3s
verify-test-react-router-e2e
verify-test-vue-e2e
17s
verify-test-vue-e2e
Fit to window
Zoom out
Zoom in

Annotations

35 errors and 13 notices
test-core-clean-build
Process completed with exit code 1.
build-vue
Process completed with exit code 1.
build-react
Process completed with exit code 1.
verify-test-react-router-e2e
Process completed with exit code 1.
verify-test-react-e2e
Process completed with exit code 1.
verify-test-vue-e2e
Process completed with exit code 1.
build-angular
Process completed with exit code 1.
verify-test-angular-e2e
Process completed with exit code 1.
test-core-screenshot (15, 20)
Process completed with exit code 1.
[Mobile Safari] › src/components/checkbox/test/basic/checkbox.e2e.ts:176:9 › checkbox: ionFocus - ios/ltr › should not have visual regressions when interacting with checkbox in item: src/components/checkbox/test/basic/checkbox.e2e.ts#L191
2) [Mobile Safari] › src/components/checkbox/test/basic/checkbox.e2e.ts:176:9 › checkbox: ionFocus - ios/ltr › should not have visual regressions when interacting with checkbox in item Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(locator).toHaveScreenshot(expected) failed Locator: locator('ion-item') 4 pixels (ratio 0.01 of all image pixels) are different. Snapshot: checkbox-in-item-focus-ios-ltr.png Call log: - Expect "toHaveScreenshot(checkbox-in-item-focus-ios-ltr.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('ion-item') - locator resolved to <ion-item class="ion-focused item ios item-lines-default item-control-needs-pointer-cursor ion-activatable ion-focusable hydrated">…</ion-item> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - 4 pixels (ratio 0.01 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('ion-item') - locator resolved to <ion-item class="ion-focused item ios item-lines-default item-control-needs-pointer-cursor ion-activatable ion-focusable hydrated">…</ion-item> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - captured a stable screenshot - 4 pixels (ratio 0.01 of all image pixels) are different. 189 | const item = page.locator('ion-item'); 190 | > 191 | await expect(item).toHaveScreenshot(screenshot(`checkbox-in-item-focus`)); | ^ 192 | }); 193 | 194 | test('should fire ionFocus when checkbox is focused', async ({ page, pageUtils }) => { at /ionic/src/components/checkbox/test/basic/checkbox.e2e.ts:191:26
[Mobile Safari] › src/components/checkbox/test/basic/checkbox.e2e.ts:176:9 › checkbox: ionFocus - ios/ltr › should not have visual regressions when interacting with checkbox in item: src/components/checkbox/test/basic/checkbox.e2e.ts#L191
2) [Mobile Safari] › src/components/checkbox/test/basic/checkbox.e2e.ts:176:9 › checkbox: ionFocus - ios/ltr › should not have visual regressions when interacting with checkbox in item Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(locator).toHaveScreenshot(expected) failed Locator: locator('ion-item') 4 pixels (ratio 0.01 of all image pixels) are different. Snapshot: checkbox-in-item-focus-ios-ltr.png Call log: - Expect "toHaveScreenshot(checkbox-in-item-focus-ios-ltr.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('ion-item') - locator resolved to <ion-item class="ion-focused item ios item-lines-default item-control-needs-pointer-cursor ion-activatable ion-focusable hydrated">…</ion-item> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - 4 pixels (ratio 0.01 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('ion-item') - locator resolved to <ion-item class="ion-focused item ios item-lines-default item-control-needs-pointer-cursor ion-activatable ion-focusable hydrated">…</ion-item> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - captured a stable screenshot - 4 pixels (ratio 0.01 of all image pixels) are different. 189 | const item = page.locator('ion-item'); 190 | > 191 | await expect(item).toHaveScreenshot(screenshot(`checkbox-in-item-focus`)); | ^ 192 | }); 193 | 194 | test('should fire ionFocus when checkbox is focused', async ({ page, pageUtils }) => { at /ionic/src/components/checkbox/test/basic/checkbox.e2e.ts:191:26
[Mobile Safari] › src/components/checkbox/test/basic/checkbox.e2e.ts:152:9 › checkbox: ionFocus - ios/ltr › should not have visual regressions: src/components/checkbox/test/basic/checkbox.e2e.ts#L173
1) [Mobile Safari] › src/components/checkbox/test/basic/checkbox.e2e.ts:152:9 › checkbox: ionFocus - ios/ltr › should not have visual regressions Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(locator).toHaveScreenshot(expected) failed Locator: locator('#container') 556 pixels (ratio 0.10 of all image pixels) are different. Snapshot: checkbox-focus-ios-ltr.png Call log: - Expect "toHaveScreenshot(checkbox-focus-ios-ltr.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('#container') - locator resolved to <div id="container">…</div> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - 556 pixels (ratio 0.10 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#container') - locator resolved to <div id="container">…</div> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - captured a stable screenshot - 556 pixels (ratio 0.10 of all image pixels) are different. 171 | const container = page.locator('#container'); 172 | > 173 | await expect(container).toHaveScreenshot(screenshot(`checkbox-focus`)); | ^ 174 | }); 175 | 176 | test('should not have visual regressions when interacting with checkbox in item', async ({ page, pageUtils }) => { at /ionic/src/components/checkbox/test/basic/checkbox.e2e.ts:173:31
[Mobile Safari] › src/components/checkbox/test/basic/checkbox.e2e.ts:152:9 › checkbox: ionFocus - ios/ltr › should not have visual regressions: src/components/checkbox/test/basic/checkbox.e2e.ts#L173
1) [Mobile Safari] › src/components/checkbox/test/basic/checkbox.e2e.ts:152:9 › checkbox: ionFocus - ios/ltr › should not have visual regressions Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(locator).toHaveScreenshot(expected) failed Locator: locator('#container') 556 pixels (ratio 0.10 of all image pixels) are different. Snapshot: checkbox-focus-ios-ltr.png Call log: - Expect "toHaveScreenshot(checkbox-focus-ios-ltr.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('#container') - locator resolved to <div id="container">…</div> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - 556 pixels (ratio 0.10 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#container') - locator resolved to <div id="container">…</div> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - captured a stable screenshot - 556 pixels (ratio 0.10 of all image pixels) are different. 171 | const container = page.locator('#container'); 172 | > 173 | await expect(container).toHaveScreenshot(screenshot(`checkbox-focus`)); | ^ 174 | }); 175 | 176 | test('should not have visual regressions when interacting with checkbox in item', async ({ page, pageUtils }) => { at /ionic/src/components/checkbox/test/basic/checkbox.e2e.ts:173:31
test-core-screenshot (6, 20)
The strategy configuration was canceled because "test-core-screenshot._15_20" failed
test-core-screenshot (6, 20)
Process completed with exit code 12.
test-core-screenshot (6, 20)
The operation was canceled.
test-core-screenshot (4, 20)
The strategy configuration was canceled because "test-core-screenshot._15_20" failed
test-core-screenshot (3, 20)
The strategy configuration was canceled because "test-core-screenshot._15_20" failed
test-core-screenshot (4, 20)
Process completed with exit code 12.
test-core-screenshot (3, 20)
Process completed with exit code 12.
test-core-screenshot (17, 20)
The strategy configuration was canceled because "test-core-screenshot._15_20" failed
test-core-screenshot (4, 20)
The operation was canceled.
test-core-screenshot (3, 20)
The operation was canceled.
test-core-screenshot (17, 20)
Process completed with exit code 12.
test-core-screenshot (17, 20)
The operation was canceled.
test-core-screenshot (2, 20)
The strategy configuration was canceled because "test-core-screenshot._15_20" failed
test-core-screenshot (2, 20)
Process completed with exit code 12.
test-core-screenshot (2, 20)
The operation was canceled.
test-core-screenshot (5, 20)
The strategy configuration was canceled because "test-core-screenshot._15_20" failed
test-core-screenshot (5, 20)
Process completed with exit code 12.
test-core-screenshot (5, 20)
The operation was canceled.
test-core-screenshot (1, 20)
The strategy configuration was canceled because "test-core-screenshot._15_20" failed
test-core-screenshot (1, 20)
Process completed with exit code 12.
test-core-screenshot (1, 20)
The operation was canceled.
verify-screenshots
Process completed with exit code 1.
🎭 Playwright Run Summary
360 skipped 389 passed (3.6m)
🎭 Playwright Run Summary
2 skipped 634 passed (4.1m)
🎭 Playwright Run Summary
368 skipped 385 passed (4.3m)
🎭 Playwright Run Summary
36 skipped 731 passed (4.5m)
🎭 Playwright Run Summary
8 skipped 748 passed (4.5m)
🎭 Playwright Run Summary
8 skipped 870 passed (4.9m)
🎭 Playwright Run Summary
5 skipped 748 passed (5.8m)
🎭 Playwright Run Summary
1 flaky [Mobile Chrome] › src/components/segment/test/segment-events.e2e.ts:10:11 › segment: events: ionChange - ios/ltr › when the segment is activated by keyboard navigation › should emit when there is no initial value 1 skipped 755 passed (5.9m)
🎭 Playwright Run Summary
5 skipped 742 passed (7.6m)
🎭 Playwright Run Summary
14 skipped 727 passed (7.8m)
🎭 Playwright Run Summary
31 skipped 738 passed (8.3m)
🎭 Playwright Run Summary
14 skipped 737 passed (9.1m)
🎭 Playwright Run Summary
2 failed [Mobile Safari] › src/components/checkbox/test/basic/checkbox.e2e.ts:152:9 › checkbox: ionFocus - ios/ltr › should not have visual regressions [Mobile Safari] › src/components/checkbox/test/basic/checkbox.e2e.ts:176:9 › checkbox: ionFocus - ios/ltr › should not have visual regressions when interacting with checkbox in item 12 skipped 751 passed (10.0m)