fix(card-list): add keyboard navigation for "show more cards" card

.changeset/common-dogs-add.md

@@ -0,0 +1,7 @@
+---
+"@siemens/ix-angular": patch
+"@siemens/ix": patch
+"@siemens/ix-react": patch
+---
+
+Add keyboard navigation for "Show all" and "Show more" cards in __ix-card-list__.

packages/angular/src/components.ts

@@ -331,7 +331,7 @@ export class IxCardList {
   protected el: HTMLIxCardListElement;
   @Output() collapseChanged = new EventEmitter<CustomEvent<boolean>>();
   @Output() showAllClick = new EventEmitter<CustomEvent<{ nativeEvent: MouseEvent; }>>();
-  @Output() showMoreCardClick = new EventEmitter<CustomEvent<{ nativeEvent: MouseEvent; }>>();
+  @Output() showMoreCardClick = new EventEmitter<CustomEvent<{ nativeEvent: MouseEvent | KeyboardEvent; }>>();
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -351,7 +351,7 @@ export declare interface IxCardList extends Components.IxCardList {
   /**
    * Fire event when the show more card is clicked.
    */
-  showMoreCardClick: EventEmitter<CustomEvent<{ nativeEvent: MouseEvent; }>>;
+  showMoreCardClick: EventEmitter<CustomEvent<{ nativeEvent: MouseEvent | KeyboardEvent; }>>;
 }
 
 

packages/angular/standalone/src/components.ts

@@ -441,7 +441,7 @@ export class IxCardList {
   protected el: HTMLIxCardListElement;
   @Output() collapseChanged = new EventEmitter<CustomEvent<boolean>>();
   @Output() showAllClick = new EventEmitter<CustomEvent<{ nativeEvent: MouseEvent; }>>();
-  @Output() showMoreCardClick = new EventEmitter<CustomEvent<{ nativeEvent: MouseEvent; }>>();
+  @Output() showMoreCardClick = new EventEmitter<CustomEvent<{ nativeEvent: MouseEvent | KeyboardEvent; }>>();
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -461,7 +461,7 @@ export declare interface IxCardList extends Components.IxCardList {
   /**
    * Fire event when the show more card is clicked.
    */
-  showMoreCardClick: EventEmitter<CustomEvent<{ nativeEvent: MouseEvent; }>>;
+  showMoreCardClick: EventEmitter<CustomEvent<{ nativeEvent: MouseEvent | KeyboardEvent; }>>;
 }
 
 

packages/core/component-api.json

@@ -1166,7 +1166,7 @@
         },
         {
           "name": "showMoreCardClick",
-          "detail": "{ nativeEvent: MouseEvent; }",
+          "detail": "{ nativeEvent: MouseEvent | KeyboardEvent; }",
           "bubbles": true,
           "cancelable": true,
           "composed": true,

packages/core/src/components.d.ts

@@ -5385,7 +5385,7 @@ declare global {
     nativeEvent: MouseEvent;
   };
         "showMoreCardClick": {
-    nativeEvent: MouseEvent;
+    nativeEvent: MouseEvent | KeyboardEvent;
   };
     }
     interface HTMLIxCardListElement extends Components.IxCardList, HTMLStencilElement {
@@ -7540,7 +7540,7 @@ declare namespace LocalJSX {
           * Fire event when the show more card is clicked.
          */
         "onShowMoreCardClick"?: (event: IxCardListCustomEvent<{
-    nativeEvent: MouseEvent;
+    nativeEvent: MouseEvent | KeyboardEvent;
   }>) => void;
         /**
           * Overwrite the default show all count.

packages/core/src/components/card-list/card-list.scss

@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 @use 'mixins/shadow-dom/component';
+@use 'mixins/hover';
 
 $CardList__Title__Height: 1.5rem;
 
@@ -108,6 +109,11 @@ $CardList__Title__Height: 1.5rem;
 
     --ix-card-border-color: var(--theme-color-primary);
     color: var(--theme-color-primary);
+
+    @include hover.focus-visible {
+      outline: 1px solid var(--theme-color-focus-bdr);
+      outline-offset: var(--theme-btn--focus--outline-offset);
+    }
   }
 
   .CardList__Style__Infinite__Scroll .Show__All__Card {

packages/core/src/components/card-list/card-list.tsx

@@ -164,7 +164,7 @@ export class CardList {
     cancelable: true,
   })
   showMoreCardClick!: EventEmitter<{
-    nativeEvent: MouseEvent;
+    nativeEvent: MouseEvent | KeyboardEvent;
   }>;
 
   @Element() hostElement!: HTMLIxCardListElement;
@@ -183,7 +183,68 @@ export class CardList {
     this.collapseChanged.emit(this.collapse);
   }
 
-  private handleClick(emitter: EventEmitter, event: MouseEvent) {
+  private findFirstFocusable(
+    root: HTMLElement | ShadowRoot
+  ): HTMLElement | null {
+    const focusableSelectors =
+      'button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+    const direct = (root as Element).querySelector?.<HTMLElement>(
+      focusableSelectors
+    );
+    if (direct) return direct;
+
+    for (const child of Array.from(
+      (root as Element).querySelectorAll?.('*') ?? []
+    )) {
+      const el = child as HTMLElement;
+      if (el.shadowRoot) {
+        const found = this.findFirstFocusable(el.shadowRoot);
+        if (found) return found;
+      }
+    }
+
+    return null;
+  }
+
+  private focusFirstVisibleCard(startIndex: number = 0) {
+    requestAnimationFrameNoNgZone(() => {
+      requestAnimationFrameNoNgZone(() => {
+        const firstNewlyVisible = this.getListChildren()
+          .slice(startIndex)
+          .find(
+            (el): el is HTMLElement =>
+              el instanceof HTMLElement &&
+              !el.classList.contains('display-none')
+          );
+
+        if (!firstNewlyVisible) return;
+
+        const internalFocusable = firstNewlyVisible.shadowRoot
+          ? this.findFirstFocusable(firstNewlyVisible.shadowRoot)
+          : null;
+
+        if (internalFocusable) {
+          internalFocusable.focus({ preventScroll: false });
+          return;
+        }
+
+        if (firstNewlyVisible.hasAttribute('tabindex')) {
+          firstNewlyVisible.focus({ preventScroll: false });
+          return;
+        }
+
+        firstNewlyVisible.setAttribute('tabindex', '-1');
+        firstNewlyVisible.focus({ preventScroll: false });
+        firstNewlyVisible.removeAttribute('tabindex');
+      });
+    });
+  }
+
+  private handleClick(
+    emitter: EventEmitter,
+    event: MouseEvent | KeyboardEvent
+  ) {
     const { defaultPrevented } = emitter.emit({
       nativeEvent: event,
     });
@@ -192,14 +253,31 @@ export class CardList {
       return;
     }
 
+    const wasShowingAll = this.isShowingAll;
+    const firstNewCardIndex = this.maxVisibleCards;
+
     this.isShowingAll = !this.isShowingAll;
     this.changeVisibilityOfSlotChildren();
+
+    if (!wasShowingAll) {
+      this.focusFirstVisibleCard(firstNewCardIndex);
+    }
   }
 
   private onShowAllClick(event: MouseEvent) {
     this.handleClick(this.showAllClick, event);
   }
 
+  private onShowMoreCardClick(event: MouseEvent | KeyboardEvent) {
+    if (event instanceof KeyboardEvent) {
+      if (event.key !== 'Enter' && event.key !== ' ') {
+        return;
+      }
+      event.preventDefault();
+    }
+    this.handleClick(this.showMoreCardClick, event);
+  }
+
   private getListChildren() {
     const slot = this.hostElement.shadowRoot!.querySelector(
       '.CardList__Content > slot'
@@ -371,12 +449,16 @@ export class CardList {
             ></slot>
             {this.isShowMoreCardVisible() ? (
               <ix-card
+                role="button"
+                tabindex="0"
+                aria-label={`${this.i18nMoreCards} (${this.numberOfOverflowingElements})`}
                 class={{
                   Show__All__Card: true,
                 }}
-                onClick={(event) => {
-                  this.handleClick(this.showMoreCardClick, event);
-                }}
+                onClick={(event) => this.onShowMoreCardClick(event)}
+                onKeyDown={(event: KeyboardEvent) =>
+                  this.onShowMoreCardClick(event)
+                }
               >
                 <ix-card-content>
                   <div class="Show__All__Card__Content">

packages/core/src/components/card-list/test/card-list.ct.ts

@@ -18,6 +18,30 @@ const CARDS_HTML = `
   <ix-card><ix-card-content>Card 5</ix-card-content></ix-card>
 `;
 
+regressionTest('accessibility', async ({ mount, makeAxeBuilder }) => {
+  await mount(`
+    <ix-card-list label="Test" list-style="stack">
+      <ix-card><ix-card-content>Card 1</ix-card-content></ix-card>
+      <ix-card><ix-card-content>Card 2</ix-card-content></ix-card>
+    </ix-card-list>
+  `);
+
+  const results = await makeAxeBuilder().analyze();
+  expect(results.violations).toEqual([]);
+});
+
+regressionTest('renders', async ({ mount, page }) => {
+  await mount(`
+    <ix-card-list label="Test">
+      <ix-card><ix-card-content>Card 1</ix-card-content></ix-card>
+    </ix-card-list>
+  `);
+
+  const cardList = page.locator('ix-card-list');
+  await expect(cardList).toHaveClass(/\bhydrated\b/);
+  await expect(cardList).toBeVisible();
+});
+
 regressionTest(
   'show all button reveals all hidden cards',
   async ({ mount, page }) => {
@@ -162,3 +186,31 @@ regressionTest(
     await expect(cards.nth(4)).toHaveClass(/display-none/);
   }
 );
+
+regressionTest(
+  'show more card: keyboard activation reveals all hidden cards',
+  async ({ mount, page }) => {
+    await mount(`
+      <ix-card-list label="Test" list-style="stack" max-visible-cards="3">
+        ${CARDS_HTML}
+      </ix-card-list>
+    `);
+
+    const cardList = page.locator('ix-card-list');
+    await expect(cardList).toHaveClass(/\bhydrated\b/);
+
+    let showMoreCard = cardList.locator('.Show__All__Card');
+    await showMoreCard.focus();
+    await page.keyboard.press('Enter');
+    await expect(showMoreCard).not.toBeVisible();
+
+    const showLessButton = cardList.getByRole('button', { name: /show less/i });
+    await showLessButton.click();
+
+    showMoreCard = cardList.locator('.Show__All__Card');
+    await expect(showMoreCard).toBeVisible();
+    await showMoreCard.focus();
+    await page.keyboard.press(' ');
+    await expect(showMoreCard).not.toBeVisible();
+  }
+);

packages/react/src/components/components.server.ts

@@ -349,7 +349,7 @@ export const IxCardContent: StencilReactComponent<IxCardContentElement, IxCardCo
 export type IxCardListEvents = {
     onCollapseChanged: EventName<IxCardListCustomEvent<boolean>>,
     onShowAllClick: EventName<IxCardListCustomEvent<{ nativeEvent: MouseEvent; }>>,
-    onShowMoreCardClick: EventName<IxCardListCustomEvent<{ nativeEvent: MouseEvent; }>>
+    onShowMoreCardClick: EventName<IxCardListCustomEvent<{ nativeEvent: MouseEvent | KeyboardEvent; }>>
 };
 
 export const IxCardList: StencilReactComponent<IxCardListElement, IxCardListEvents, Components.IxCardList> = /*@__PURE__*/ createComponent<IxCardListElement, IxCardListEvents, Components.IxCardList>({

packages/react/src/components/components.ts

@@ -271,7 +271,7 @@ export const IxCardContent: StencilReactComponent<IxCardContentElement, IxCardCo
 export type IxCardListEvents = {
     onCollapseChanged: EventName<IxCardListCustomEvent<boolean>>,
     onShowAllClick: EventName<IxCardListCustomEvent<{ nativeEvent: MouseEvent; }>>,
-    onShowMoreCardClick: EventName<IxCardListCustomEvent<{ nativeEvent: MouseEvent; }>>
+    onShowMoreCardClick: EventName<IxCardListCustomEvent<{ nativeEvent: MouseEvent | KeyboardEvent; }>>
 };
 
 export const IxCardList: StencilReactComponent<IxCardListElement, IxCardListEvents, Components.IxCardList> = /*@__PURE__*/ createComponent<IxCardListElement, IxCardListEvents, Components.IxCardList>({