fix(core/event-list): add focus-visible outline

.changeset/gold-owls-whisper.md

@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+fix(core/event-list): add focus-visible outline

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;

packages/core/src/components/event-list-item/event-list-item.tsx

@@ -83,6 +83,7 @@ export class EventListItem {
 
     return (
       <Host
+        tabIndex="0"
         class={{
           disabled: this.disabled,
         }}

packages/core/src/tests/event-list/event-list.e2e.ts

@@ -7,33 +7,68 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { expect } from '@playwright/test';
+import { expect, Page } from '@playwright/test';
 import { regressionTest } from '@utils/test';
 
+const basicUrl = 'event-list/basic';
+const compactUrl = 'event-list/compact';
+const chevronUrl = 'event-list/chevron';
+const customHeightUrl = 'event-list/custom-height';
+
+async function pressTab(page: Page, count: number) {
+  for (let i = 0; i < count; i++) {
+    await page.keyboard.press('Tab');
+  }
+}
+
 regressionTest.describe('event-list', () => {
   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, 3);
+    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();
+  });
 });