feat(core): refactor keyboard navigation

packages/angular/src/components.ts

@@ -826,11 +826,12 @@ export declare interface IxDrawer extends Components.IxDrawer {
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
   inputs: ['anchor', 'closeBehavior', 'header', 'placement', 'positioningStrategy', 'show', 'suppressAutomaticPlacement', 'trigger'],
-  outputs: ['showChanged'],
+  outputs: ['showChange', 'showChanged'],
   standalone: false
 })
 export class IxDropdown {
   protected el: HTMLIxDropdownElement;
+  @Output() showChange = new EventEmitter<CustomEvent<boolean>>();
   @Output() showChanged = new EventEmitter<CustomEvent<boolean>>();
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -841,7 +842,11 @@ export class IxDropdown {
 
 export declare interface IxDropdown extends Components.IxDropdown {
   /**
-   * Fire event after visibility of dropdown has changed
+   * Fire event before visibility of dropdown has changed, preventing event will cancel showing dropdown
+   */
+  showChange: EventEmitter<CustomEvent<boolean>>;
+  /**
+   * Fire event after visibility of dropdown has changed, preventing event will prevent nothing
    */
   showChanged: EventEmitter<CustomEvent<boolean>>;
 }

packages/angular/standalone/src/components.ts

@@ -927,10 +927,11 @@ export declare interface IxDrawer extends Components.IxDrawer {
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
   inputs: ['anchor', 'closeBehavior', 'header', 'placement', 'positioningStrategy', 'show', 'suppressAutomaticPlacement', 'trigger'],
-  outputs: ['showChanged'],
+  outputs: ['showChange', 'showChanged'],
 })
 export class IxDropdown {
   protected el: HTMLIxDropdownElement;
+  @Output() showChange = new EventEmitter<CustomEvent<boolean>>();
   @Output() showChanged = new EventEmitter<CustomEvent<boolean>>();
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -941,7 +942,11 @@ export class IxDropdown {
 
 export declare interface IxDropdown extends Components.IxDropdown {
   /**
-   * Fire event after visibility of dropdown has changed
+   * Fire event before visibility of dropdown has changed, preventing event will cancel showing dropdown
+   */
+  showChange: EventEmitter<CustomEvent<boolean>>;
+  /**
+   * Fire event after visibility of dropdown has changed, preventing event will prevent nothing
    */
   showChanged: EventEmitter<CustomEvent<boolean>>;
 }

packages/core/scss/mixins/shadow-dom/_focus-visible.scss

@@ -0,0 +1,12 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+@mixin ix-focus-visible() {
+  outline: 1px solid var(--theme-color-focus-bdr) !important;
+  outline-offset: var(--theme-btn--focus--outline-offset) !important;
+}

packages/core/src/components.d.ts

@@ -4720,6 +4720,7 @@ declare global {
         new (): HTMLIxDrawerElement;
     };
     interface HTMLIxDropdownElementEventMap {
+        "showChange": boolean;
         "showChanged": boolean;
     }
     interface HTMLIxDropdownElement extends Components.IxDropdown, HTMLStencilElement {
@@ -7168,7 +7169,11 @@ declare namespace LocalJSX {
     alignmentAxis?: number;
   };
         /**
-          * Fire event after visibility of dropdown has changed
+          * Fire event before visibility of dropdown has changed, preventing event will cancel showing dropdown
+         */
+        "onShowChange"?: (event: IxDropdownCustomEvent<boolean>) => void;
+        /**
+          * Fire event after visibility of dropdown has changed, preventing event will prevent nothing
          */
         "onShowChanged"?: (event: IxDropdownCustomEvent<boolean>) => void;
         "overwriteDropdownStyle"?: (delegate: {

packages/core/src/components/avatar/avatar.scss

@@ -12,6 +12,7 @@
 @use 'mixins/text-truncation';
 @use 'mixins/hover';
 @use 'mixins/scrollbar';
+@use 'mixins/shadow-dom/focus-visible' as focus-visible;
 
 :host {
   display: flex;
@@ -119,3 +120,9 @@
     transform: scale(0.8);
   }
 }
+
+:host(.avatar-button.ix-focused) {
+  button {
+    @include focus-visible.ix-focus-visible();
+  }
+}

packages/core/src/components/avatar/avatar.tsx

@@ -233,7 +233,10 @@ export class Avatar {
 
     if (this.isClosestApplicationHeader) {
       return (
-        <Host slot="ix-application-header-avatar" class={'avatar-button'}>
+        <Host
+          slot="ix-application-header-avatar"
+          class={'avatar-button ix-focusable'}
+        >
           <BaseButton
             disabled={false}
             iconOval={false}

packages/core/src/components/button/base-button.tsx

@@ -89,7 +89,7 @@ export const BaseButton: FunctionalComponent<BaseButtonProps> = (
 
   const commonAttributes = {
     ...ariaAttributes,
-    tabindex: props.disabled ? -1 : (props.tabIndex ?? 0),
+    // tabindex: props.disabled ? -1 : (props.tabIndex ?? 0),
     class: {
       ...getButtonClasses(
         props.variant,

packages/core/src/components/button/button-mixin.scss

@@ -19,9 +19,7 @@
     border-top-right-radius: var(--ix-button-border-radius-right);
     border-bottom-right-radius: var(--ix-button-border-radius-right);
 
-    &,
-    &.focus,
-    &:focus-visible {
+    & {
       background-color: var(--theme-btn-#{$name}--background);
       color: var(--theme-btn-#{$name}--color);
 
@@ -32,10 +30,10 @@
       border-style: solid;
     }
 
-    @include hover.focus-visible {
-      outline: 1px solid var(--theme-color-focus-bdr);
-      outline-offset: var(--theme-btn--focus--outline-offset);
-    }
+    // @include hover.focus-visible {
+    //   outline: 1px solid var(--theme-color-focus-bdr);
+    //   outline-offset: var(--theme-btn--focus--outline-offset);
+    // }
 
     &.selected {
       background-color: var(--theme-btn-#{$name}--background--pressed);
@@ -160,6 +158,21 @@
   :host(.disabled) {
     cursor: default;
   }
+
+  :host(.ix-focused) {
+    .btn {
+      outline: 1px solid var(--theme-color-focus-bdr) !important;
+      outline-offset: var(--theme-btn--focus--outline-offset) !important;
+    }
+  }
+
+  :host(:focus-visible) {
+    outline: none;
+
+    .btn {
+      outline: none;
+    }
+  }
 }
 
 @mixin all-btn-variants {

packages/core/src/components/button/button.tsx

@@ -190,7 +190,6 @@ export class Button implements IxButtonComponent {
       onClick: () => this.dispatchFormEvents(),
       type: this.type,
       alignment: this.alignment,
-      tabIndex: 0,
       ariaAttributes: {
         'aria-label': this.ariaLabelButton,
       },
@@ -203,6 +202,7 @@ export class Button implements IxButtonComponent {
       <Host
         class={{
           disabled: this.disabled || this.loading,
+          'ix-focusable': true,
         }}
       >
         <BaseButton {...baseButtonProps}>

packages/core/src/components/dropdown-item/dropdown-item.tsx

@@ -106,8 +106,10 @@ export class DropdownItem implements DropdownItemWrapper {
           'icon-only': this.isIconOnly(),
           disabled: this.disabled,
           submenu: this.isSubMenu,
+          'ix-focusable': true,
         }}
         role="listitem"
+        tabIndex={-1}
       >
         <button
           type="button"

packages/core/src/components/dropdown/dropdown-controller.ts

@@ -180,6 +180,16 @@ class DropdownController {
     return;
   }
 
+  getParentDropdownId(dropdownId: string) {
+    for (const ruleKey of Object.keys(this.submenuIds)) {
+      if (this.submenuIds[ruleKey].includes(dropdownId)) {
+        return ruleKey;
+      }
+    }
+
+    return;
+  }
+
   private pathIncludesDropdown(eventTargets: EventTarget[]) {
     return !!eventTargets.find(
       (element: EventTarget) =>

packages/core/src/components/dropdown/dropdown-focus.ts

@@ -0,0 +1,159 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';
+
+export const getIndexOfDropdownItem = (
+  items: HTMLElement[],
+  item: HTMLElement | null
+) => {
+  if (!item || item.tagName !== 'IX-DROPDOWN-ITEM') {
+    return -1;
+  }
+
+  return items.findIndex((el) => el === item);
+};
+
+export const getNextFocusableDropdownItem = (
+  items: HTMLElement[],
+  currentItem: HTMLElement | null
+) => {
+  const currentItemIndex = getIndexOfDropdownItem(items, currentItem);
+  return items[currentItemIndex + 1];
+};
+
+export const getPreviousFocusableItem = (
+  items: HTMLElement[],
+  currentItem: HTMLElement | null
+) => {
+  const currentItemIndex = getIndexOfDropdownItem(items, currentItem);
+  return items[currentItemIndex - 1];
+};
+
+const focusItem = (item: HTMLElement) => {
+  requestAnimationFrameNoNgZone(() =>
+    item.shadowRoot!.querySelector('button')!.focus()
+  );
+};
+
+export const isTriggerElement = (element: HTMLElement) =>
+  element.hasAttribute('data-ix-dropdown-trigger');
+
+export const configureKeyboardInteraction = (dropdownElement: HTMLElement) => {
+  const callback = async (ev: KeyboardEvent) => {
+    const activeElement = document.activeElement as HTMLElement | null;
+    let items: HTMLElement[] = [];
+
+    const targetTagName = (ev.target as HTMLElement)?.tagName;
+    if (
+      targetTagName !== 'IX-DROPDOWN' &&
+      targetTagName !== 'IX-DROPDOWN-ITEM'
+    ) {
+      return;
+    }
+
+    try {
+      const query =
+        'ix-dropdown-item:not(ix-dropdown ix-dropdown *):not([disabled])';
+
+      // Collect items from slots if they exist
+      if (dropdownElement.querySelectorAll('slot').length > 0) {
+        const slotElements = Array.from(
+          dropdownElement.querySelectorAll('slot')
+        );
+        items = slotElements.flatMap((slot) =>
+          Array.from(
+            slot.assignedElements({ flatten: true }) as HTMLElement[]
+          ).flatMap((el) => {
+            // Check if the assigned element itself matches the query
+            if (el.matches && el.matches(query)) {
+              return [el];
+            }
+            // Otherwise, query its children
+            return Array.from(
+              el.querySelectorAll(query) as NodeListOf<HTMLElement>
+            );
+          })
+        );
+      } else {
+        // No slots, query directly on popoverEl
+        items = Array.from(
+          dropdownElement.querySelectorAll(query) as NodeListOf<HTMLElement>
+        );
+      }
+
+      /* eslint-disable-next-line */
+    } catch {}
+
+    switch (ev.key) {
+      case 'ArrowLeft':
+        dropdownElement.dispatchEvent(
+          new CustomEvent('ix-close-submenu', {
+            bubbles: true,
+            cancelable: true,
+          })
+        );
+        break;
+
+      case 'ArrowDown':
+        // Disable movement/scroll with keyboard
+        ev.preventDefault();
+        const nextItem = getNextFocusableDropdownItem(items, activeElement);
+        if (nextItem !== undefined) {
+          focusItem(nextItem);
+        }
+        break;
+
+      case 'ArrowUp':
+        // Disable movement/scroll with keyboard
+        ev.preventDefault();
+        const prevItem = getPreviousFocusableItem(items, activeElement);
+        if (prevItem !== undefined) {
+          focusItem(prevItem);
+        }
+        break;
+
+      case 'Home':
+        ev.preventDefault();
+        const firstItem = items[0];
+        if (firstItem !== undefined) {
+          focusItem(firstItem);
+        }
+        break;
+
+      case 'End':
+        ev.preventDefault();
+        const lastItem = items[items.length - 1];
+        if (lastItem !== undefined) {
+          focusItem(lastItem);
+        }
+        break;
+
+      case 'ArrowRight':
+      case ' ':
+      case 'Enter':
+        if (activeElement && isTriggerElement(activeElement)) {
+          const triggerEvent = new CustomEvent('ix-open-submenu', {
+            bubbles: true,
+            cancelable: true,
+            detail: {
+              activeElement: activeElement,
+            },
+          });
+          activeElement.dispatchEvent(triggerEvent);
+        }
+        break;
+      default:
+        break;
+    }
+  };
+
+  dropdownElement.addEventListener('keydown', callback);
+  return () => dropdownElement.removeEventListener('keydown', callback);
+};