diff --git a/src/elements/core/testing/private/visual-regression-snapshot.ts b/src/elements/core/testing/private/visual-regression-snapshot.ts index cfe6c02e1e..53a7f274e7 100644 --- a/src/elements/core/testing/private/visual-regression-snapshot.ts +++ b/src/elements/core/testing/private/visual-regression-snapshot.ts @@ -113,8 +113,19 @@ export const visualDiffFocus: VisualDiffState = { with(setup: (setup: VisualDiffSetupBuilder) => void | Promise): Mocha.Func { return async function (this: Mocha.Context) { const builder = await runSetupWithViewport(setup, this.test?.ctx?.['requestViewport']); - builder.snapshotElement.focus(); + + // We create a focusable element () right before the state element. + // We can tab once to land on the desired element. + const link = document.createElement(`a`); + link.href = '#'; + link.classList.add('sbb-screen-reader-only'); + // We need to copy the slot so we can ensure it's landing at the right position + link.slot = builder.stateElement.slot; + builder.stateElement.insertAdjacentElement('beforebegin', link); + link.focus(); await sendKeys({ press: tabKey }); + link.remove(); + await visualDiff(builder.snapshotElement, imageName(this.test!)); }; }, diff --git a/src/elements/datepicker/datepicker-next-day/datepicker-next-day.visual.spec.ts b/src/elements/datepicker/datepicker-next-day/datepicker-next-day.visual.spec.ts index ed279c4dd7..3601a3901f 100644 --- a/src/elements/datepicker/datepicker-next-day/datepicker-next-day.visual.spec.ts +++ b/src/elements/datepicker/datepicker-next-day/datepicker-next-day.visual.spec.ts @@ -1,12 +1,10 @@ -import { sendKeys } from '@web/test-runner-commands'; import { html, nothing } from 'lit'; -import { tabKey } from '../../core/testing/private/keys.js'; import { describeEach, describeViewports, visualDiffDefault, - visualRegressionFixture, + visualDiffFocus, } from '../../core/testing/private.js'; import './datepicker-next-day.js'; @@ -20,51 +18,37 @@ describe(`sbb-datepicker-next-day`, () => { }; describeViewports({ viewports: ['zero', 'medium'] }, () => { - it( - `standalone`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(html``); - }), - ); - - describeEach(cases, ({ negative, value }) => { - let root: HTMLElement; - - beforeEach(async () => { - root = await visualRegressionFixture( - html` - - - - - - `, - { backgroundColor: negative ? 'var(--sbb-color-black)' : undefined }, - ); - }); - + for (const state of [visualDiffDefault, visualDiffFocus]) { it( - `with form-field`, - visualDiffDefault.with(async (setup) => { - setup.withSnapshotElement(root); + `standalone ${state.name}`, + state.with(async (setup) => { + await setup.withFixture(html``); }), ); - it( - `with form-field focus`, - visualDiffDefault.with(async (setup) => { - setup.withSnapshotElement(root); - - if (value) { - // Focus input so that with a tab press it should land on next day - setup.snapshotElement.querySelector('input')!.focus(); - } else { - setup.snapshotElement.focus(); - } - - await sendKeys({ press: tabKey }); - }), - ); - }); + describeEach(cases, ({ negative, value }) => { + it( + `with form-field ${state.name}`, + state.with(async (setup) => { + await setup.withFixture( + html` + + + + + + `, + { backgroundColor: negative ? 'var(--sbb-color-black)' : undefined }, + ); + + if (value) { + setup.withStateElement( + setup.snapshotElement.querySelector('sbb-datepicker-next-day')!, + ); + } + }), + ); + }); + } }); }); diff --git a/src/elements/datepicker/datepicker-previous-day/datepicker-previous-day.visual.spec.ts b/src/elements/datepicker/datepicker-previous-day/datepicker-previous-day.visual.spec.ts index 90b2654d16..22bcf849db 100644 --- a/src/elements/datepicker/datepicker-previous-day/datepicker-previous-day.visual.spec.ts +++ b/src/elements/datepicker/datepicker-previous-day/datepicker-previous-day.visual.spec.ts @@ -42,6 +42,12 @@ describe(`sbb-datepicker-previous-day`, () => { `, { backgroundColor: negative ? 'var(--sbb-color-black)' : undefined }, ); + + if (value) { + setup.withStateElement( + setup.snapshotElement.querySelector('sbb-datepicker-previous-day')!, + ); + } }), ); }); diff --git a/src/elements/form-field/form-field/form-field.visual.spec.ts b/src/elements/form-field/form-field/form-field.visual.spec.ts index 4a16dddfcd..1148573362 100644 --- a/src/elements/form-field/form-field/form-field.visual.spec.ts +++ b/src/elements/form-field/form-field/form-field.visual.spec.ts @@ -1,8 +1,5 @@ -import { sendKeys } from '@web/test-runner-commands'; import { html, nothing, type TemplateResult } from 'lit'; -import type { SbbMiniButtonElement } from '../../button/mini-button.js'; -import { tabKey } from '../../core/testing/private/keys.js'; import { describeEach, describeViewports, @@ -221,7 +218,7 @@ describe(`sbb-form-field`, () => { it( `slot=buttons focus`, - visualDiffDefault.with(async (setup) => { + visualDiffFocus.with(async (setup) => { const templateResult: TemplateResult = html`${template(args)} ${buttonsAndPopover(args)}`; await setup.withFixture(html`${formField(args, templateResult)}`, { @@ -229,11 +226,7 @@ describe(`sbb-form-field`, () => { focusOutlineDark: negative, forcedColors, }); - ( - setup.snapshotElement.querySelector(name)! - .nextElementSibling as SbbMiniButtonElement - ).focus(); - await sendKeys({ press: tabKey }); + setup.withStateElement(setup.snapshotElement.querySelector('sbb-mini-button')!); }), ); }); diff --git a/src/elements/header/header/header.visual.spec.ts b/src/elements/header/header/header.visual.spec.ts index b2ce3c05fa..1be81e1a07 100644 --- a/src/elements/header/header/header.visual.spec.ts +++ b/src/elements/header/header/header.visual.spec.ts @@ -1,8 +1,10 @@ -import { sendKeys } from '@web/test-runner-commands'; import { html, type TemplateResult } from 'lit'; -import { tabKey } from '../../core/testing/private/keys.js'; -import { describeViewports, visualDiffDefault } from '../../core/testing/private.js'; +import { + describeViewports, + visualDiffDefault, + visualDiffFocus, +} from '../../core/testing/private.js'; import './header.js'; import '../header-link.js'; @@ -64,14 +66,13 @@ describe(`sbb-header`, () => { describe(logoOrSignet, () => { it( 'focus', - visualDiffDefault.with(async (setup) => { + visualDiffFocus.with(async (setup) => { await setup.withFixture(template(false, logoOrSignet === 'signet' ? 's' : 'm'), { padding: '0', }); - setup.snapshotElement.querySelector(`a[slot='logo']`)!.focus(); - // We focus the logo and then tab left and right again to activate the focus visible state on the link - await sendKeys({ press: `Shift+${tabKey}` }); - await sendKeys({ press: tabKey }); + setup.withStateElement( + setup.snapshotElement.querySelector(`a[slot='logo']`)!, + ); }), ); });