diff --git a/.changeset/gold-owls-whisper.md b/.changeset/gold-owls-whisper.md new file mode 100644 index 00000000000..23fa25d0a3a --- /dev/null +++ b/.changeset/gold-owls-whisper.md @@ -0,0 +1,5 @@ +--- +"@siemens/ix": patch +--- + +fix(core/event-list): add focus-visible outline diff --git a/packages/core/src/components/event-list-item/event-list-item.scss b/packages/core/src/components/event-list-item/event-list-item.scss index ec27baa97a2..0f574d20f00 100644 --- a/packages/core/src/components/event-list-item/event-list-item.scss +++ b/packages/core/src/components/event-list-item/event-list-item.scss @@ -17,6 +17,8 @@ $default-event-list-item-height: 2.5rem; :host { @include ix-component; + display: block; + position: relative; .event-list-item { display: flex; @@ -129,4 +131,13 @@ $default-event-list-item-height: 2.5rem; } } +:host(:focus) { + outline: none; +} + +:host(:focus-visible) { + outline: 1px solid var(--theme-color-focus-bdr); + outline-offset: var(--theme-btn--focus--outline-offset); +} + @include host-disabled; diff --git a/packages/core/src/components/event-list-item/event-list-item.tsx b/packages/core/src/components/event-list-item/event-list-item.tsx index d86eddd65f5..a23e593897a 100644 --- a/packages/core/src/components/event-list-item/event-list-item.tsx +++ b/packages/core/src/components/event-list-item/event-list-item.tsx @@ -83,6 +83,7 @@ export class EventListItem { return ( { regressionTest('basic', async ({ page }) => { - await page.goto('event-list/basic'); + await page.goto(basicUrl); expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); }); regressionTest('compact', async ({ page }) => { - await page.goto('event-list/compact'); + await page.goto(compactUrl); expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); }); regressionTest('chevron', async ({ page }) => { - await page.goto('event-list/chevron'); + await page.goto(chevronUrl); expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); }); regressionTest('custom-height', async ({ page }) => { - await page.goto('event-list/custom-height'); + await page.goto(customHeightUrl); expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); }); regressionTest('hover', async ({ page }) => { - await page.goto('event-list/basic'); + await page.goto(basicUrl); await (await page.waitForSelector('text="Text 3"')).hover(); expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); }); + + regressionTest('outline', async ({ page }) => { + await page.goto(basicUrl); + await pressTab(page, 2); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); + + regressionTest('outline selected', async ({ page }) => { + await page.goto(basicUrl); + await pressTab(page, 3); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); + + regressionTest('outline compact', async ({ page }) => { + await page.goto(compactUrl); + await pressTab(page, 2); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); + + regressionTest('outline compact selected', async ({ page }) => { + await page.goto(compactUrl); + await pressTab(page, 3); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); }); diff --git a/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..315d5529c92 Binary files /dev/null and b/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..743d368c1e8 Binary files /dev/null and b/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-compact-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-compact-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..4acaab35bf4 Binary files /dev/null and b/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-compact-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-compact-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-compact-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..c18f44c88d0 Binary files /dev/null and b/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-compact-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-compact-selected-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-compact-selected-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..fd90a8e7667 Binary files /dev/null and b/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-compact-selected-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-compact-selected-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-compact-selected-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..da0feaf7915 Binary files /dev/null and b/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-compact-selected-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-selected-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-selected-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..0de5194b7c3 Binary files /dev/null and b/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-selected-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-selected-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-selected-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..0d8bc649039 Binary files /dev/null and b/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-outline-selected-1-chromium---theme-classic-light-linux.png differ