Merge branch 'feature/3720_select-overflow-stable' of https://github.com/siemens/ix into feature/3720_select-overflow-stable

Author: lzeiml

.changeset/fast-jolly-safe.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+Fix `ix-input` password eye icon: remove debug `color: red` style and conditionally render the toggle button instead of hiding it via CSS class.

.changeset/pink-sloths-drop.md

@@ -0,0 +1,7 @@
+---
+'@siemens/ix': patch
+---
+
+Fix **ix-action-card** to render its content inside a `button` element so it is keyboard-focusable and exposed as a button to assistive technologies, improving accessibility.
+
+Note: the default slot is intended for non-interactive content. Nested interactive elements (links, buttons, inputs) inside the card are not supported, as the card is now a single button.

packages/angular-standalone-test-app/package.json

@@ -29,7 +29,7 @@
     "ag-grid-angular": "^33.1.1",
     "ag-grid-community": "^33.1.1",
     "echarts": "^6.0.0",
-    "echarts-gl": "^2.0.9",
+    "echarts-gl": "^2.1.0",
     "html-test-app": "workspace:*",
     "ngx-echarts": "^20.0.1",
     "rxjs": "~7.8.0",

packages/angular-test-app/package.json

@@ -30,8 +30,8 @@
     "@siemens/ix-icons": "catalog:",
     "ag-grid-angular": "^33.1.1",
     "ag-grid-community": "^33.1.1",
-    "echarts": "5.4.3",
-    "echarts-gl": "^2.0.9",
+    "echarts": "^6.0.0",
+    "echarts-gl": "^2.1.0",
     "html-test-app": "workspace:*",
     "ngx-echarts": "^20.0.1",
     "rxjs": "~7.8.0",

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

@@ -21,8 +21,31 @@
 
   @include component.ix-component;
 
+
+  button {
+    width: 100%;
+    height: 100%;
+    display: block;
+    background: transparent;
+    text-align: start;
+    padding: 0;
+    border: 0;
+    border-radius: var(--theme-btn--border-radius);
+    box-shadow: initial;
+
+    &:focus-visible {
+      outline: 1px solid var(--theme-color-focus-bdr);
+      outline-offset: var(--theme-btn--focus--outline-offset);
+    }
+
+    &[disabled] {
+      cursor: default;
+    }
+  }
+
   ix-card {
     width: 100%;
     height: 100%;
   }
 }
+

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

@@ -8,9 +8,12 @@
  */
 
 import { Component, h, Host, Prop } from '@stencil/core';
-import type { ActionCardVariant } from './action-card.types';
 import { a11yBoolean, getFallbackLabelFromIconName } from '../utils/a11y';
+import type { ActionCardVariant } from './action-card.types';
 
+/**
+ * @slot - Place additional non-interactive content inside the card. Avoid interactive elements (links, buttons, inputs) as the card itself is rendered as a single button.
+ */
 @Component({
   tag: 'ix-action-card',
   styleUrl: 'action-card.scss',
@@ -75,48 +78,53 @@ export class IxActionCard {
 
     return (
       <Host>
-        <ix-card
-          selected={this.selected}
-          variant={this.variant}
-          passive={this.passive}
-          class={'pointer'}
+        <button
+          type="button"
+          disabled={this.passive}
           aria-label={this.ariaLabelCard}
           aria-labelledby={ariaLabelledBy}
-          role={ariaLabelledBy ? 'group' : undefined}
         >
-          <ix-card-content>
-            {this.icon ? (
-              <ix-icon
-                class={'icon'}
-                name={this.icon}
-                size="32"
-                aria-label={
-                  this.ariaLabelIcon || getFallbackLabelFromIconName(this.icon)
-                }
-              ></ix-icon>
-            ) : null}
-            <div>
-              {this.heading ? (
-                <ix-typography
-                  id="ix-action-card-heading"
-                  aria-hidden={a11yBoolean(!ariaLabelledBy)}
-                  format="h4"
-                >
-                  {this.heading}
-                </ix-typography>
-              ) : null}
-              {this.subheading ? (
-                <ix-typography
-                  format="h5"
-                  text-color={this.getSubheadingTextColor()}
-                >
-                  {this.subheading}
-                </ix-typography>
+          <ix-card
+            selected={this.selected}
+            variant={this.variant}
+            passive={this.passive}
+            class={this.passive ? undefined : 'pointer'}
+          >
+            <ix-card-content>
+              {this.icon ? (
+                <ix-icon
+                  class={'icon'}
+                  name={this.icon}
+                  size="32"
+                  aria-label={
+                    this.ariaLabelIcon ||
+                    getFallbackLabelFromIconName(this.icon)
+                  }
+                ></ix-icon>
               ) : null}
-              <slot></slot>
-            </div>
-          </ix-card-content>
-        </ix-card>
+              <div>
+                {this.heading ? (
+                  <ix-typography
+                    id="ix-action-card-heading"
+                    aria-hidden={a11yBoolean(!ariaLabelledBy)}
+                    format="h4"
+                  >
+                    {this.heading}
+                  </ix-typography>
+                ) : null}
+                {this.subheading ? (
+                  <ix-typography
+                    format="h5"
+                    text-color={this.getSubheadingTextColor()}
+                  >
+                    {this.subheading}
+                  </ix-typography>
+                ) : null}
+                <slot></slot>
+              </div>
+            </ix-card-content>
+          </ix-card>
+        </button>
       </Host>
     );
   }

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

@@ -0,0 +1,51 @@
+/*
+ * 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 { expect } from '@playwright/test';
+import { regressionTest } from '@utils/test';
+
+regressionTest('renders', async ({ mount, page }) => {
+  await mount(`
+    <ix-action-card heading="Heading" subheading="Subheading"></ix-action-card>
+  `);
+  const actionCard = page.locator('ix-action-card');
+  await expect(actionCard).toHaveClass(/\bhydrated\b/);
+  await expect(actionCard.locator('button')).toBeVisible();
+});
+
+regressionTest(
+  'passive card renders a disabled button',
+  async ({ mount, page }) => {
+    await mount(`
+      <ix-action-card heading="Heading" subheading="Subheading" passive></ix-action-card>
+    `);
+    const actionCard = page.locator('ix-action-card');
+    await expect(actionCard).toHaveClass(/\bhydrated\b/);
+    await expect(actionCard.locator('button')).toBeDisabled();
+  }
+);
+
+regressionTest.describe('accessibility', () => {
+  regressionTest('default', async ({ mount, makeAxeBuilder }) => {
+    await mount(`
+      <ix-action-card heading="Heading" subheading="Subheading"></ix-action-card>
+    `);
+
+    const accessibilityScanResults = await makeAxeBuilder().analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
+  regressionTest('passive', async ({ mount, makeAxeBuilder }) => {
+    await mount(`
+      <ix-action-card heading="Heading" subheading="Subheading" passive></ix-action-card>
+    `);
+
+    const accessibilityScanResults = await makeAxeBuilder().analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

packages/core/src/components/input/input.scss

@@ -27,8 +27,6 @@
   }
 
   .password-eye {
-    &.eye-hidden {
-      display: none;
-    }
+    margin-left: 0.125rem;
   }
 }

packages/core/src/components/input/input.tsx

@@ -194,6 +194,7 @@ export class Input implements IxInputFieldComponent<string> {
   private readonly inputRef = makeRef<HTMLInputElement>();
   private readonly slotEndRef = makeRef<HTMLDivElement>();
   private readonly slotStartRef = makeRef<HTMLDivElement>();
+  private readonly passwordToggleRef = () => this.updatePaddings();
   private readonly inputId = `input-${inputIds++}`;
   private touched = false;
 
@@ -353,26 +354,26 @@ export class Input implements IxInputFieldComponent<string> {
               slotEndRef={this.slotEndRef}
               onSlotChange={() => this.updatePaddings()}
             >
-              <ix-icon-button
-                color="color-weak-text"
-                class={{
-                  'password-eye': true,
-                  'eye-hidden': this.type !== 'password' || this.disabled,
-                }}
-                variant="tertiary"
-                size="16"
-                icon={
-                  this.inputType === 'password' ? iconEye : iconEyeCancelled
-                }
-                onClick={() => {
-                  if (this.inputType === 'password') {
-                    this.inputType = 'text';
-                    return;
+              {this.type === 'password' && !this.disabled && (
+                <ix-icon-button
+                  ref={this.passwordToggleRef}
+                  color="color-weak-text"
+                  class="password-eye"
+                  variant="tertiary"
+                  size="16"
+                  icon={
+                    this.inputType === 'password' ? iconEye : iconEyeCancelled
                   }
-
-                  this.inputType = 'password';
-                }}
-              ></ix-icon-button>
+                  onClick={() => {
+                    if (this.inputType === 'password') {
+                      this.inputType = 'text';
+                      return;
+                    }
+
+                    this.inputType = 'password';
+                  }}
+                ></ix-icon-button>
+              )}
             </SlotEnd>
           </div>
           {!!this.maxLength && this.maxLength > 0 && (

packages/core/src/components/input/tests/password-input.ct.ts

@@ -13,6 +13,16 @@ test.describe('password input', () => {
   let input: import('@playwright/test').Locator;
   let eyeButton: import('@playwright/test').Locator;
 
+  test('accessibility', async ({ mount, makeAxeBuilder }) => {
+    await mount(`
+      <ix-input type="password" value="secret123"></ix-input>
+      <ix-input type="password" disabled value="secret123"></ix-input>
+    `);
+
+    const results = await makeAxeBuilder().analyze();
+    expect(results.violations).toEqual([]);
+  });
+
   test.beforeEach(async ({ page }) => {
     input = page.locator('ix-input');
     eyeButton = input.locator('ix-icon-button.password-eye');
@@ -21,7 +31,7 @@ test.describe('password input', () => {
   test.describe('eye icon visibility', () => {
     test('eye icon is visible for password type', async ({ mount }) => {
       await mount('<ix-input type="password" value="secret123"></ix-input>');
-      await expect(eyeButton).not.toHaveClass(/eye-hidden/);
+      await expect(eyeButton).toBeAttached();
       await expect(eyeButton).toBeVisible();
     });
 
@@ -35,8 +45,7 @@ test.describe('password input', () => {
     for (const { type, value } of nonPasswordInputTypes) {
       test(`eye icon is hidden for ${type} type`, async ({ mount }) => {
         await mount(`<ix-input type="${type}" value="${value}"></ix-input>`);
-        await expect(eyeButton).toHaveClass(/eye-hidden/);
-        await expect(eyeButton).not.toBeVisible();
+        await expect(eyeButton).not.toBeAttached();
       });
     }
 
@@ -46,8 +55,7 @@ test.describe('password input', () => {
       await mount(
         '<ix-input type="password" disabled value="secret"></ix-input>'
       );
-      await expect(eyeButton).toHaveClass(/eye-hidden/);
-      await expect(eyeButton).not.toBeVisible();
+      await expect(eyeButton).not.toBeAttached();
     });
 
     test('eye icon is visible when password input is readonly', async ({
@@ -56,7 +64,7 @@ test.describe('password input', () => {
       await mount(
         '<ix-input type="password" readonly value="secret"></ix-input>'
       );
-      await expect(eyeButton).not.toHaveClass(/eye-hidden/);
+      await expect(eyeButton).toBeAttached();
       await expect(eyeButton).toBeVisible();
     });
   });