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

@@ -36,4 +36,19 @@ regressionTest.describe('event-list', () => {
     await (await page.waitForSelector('text="Text 3"')).hover();
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
+
+  regressionTest('outline', async ({ page }) => {
+    await page.goto('event-list/basic');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+
+  regressionTest('outline selected', async ({ page }) => {
+    await page.goto('event-list/basic');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
 });