fix(action-card): render a button for proper accessibility

Wraps the inner `ix-card` of the `ix-action-card` in a `button`.
This is aligned with the element approach.

Author: spike-rabbit

.changeset/pink-sloths-drop.md

@@ -0,0 +1,5 @@
+---
+'@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.

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

@@ -21,8 +21,22 @@
 
   @include component.ix-component;
 
+
+  button {
+    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);
+    }
+  }
+
   ix-card {
     width: 100%;
     height: 100%;
   }
 }
+

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

@@ -8,8 +8,8 @@
  */
 
 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';
 
 @Component({
   tag: 'ix-action-card',
@@ -75,48 +75,50 @@ export class IxActionCard {
 
     return (
       <Host>
-        <ix-card
-          selected={this.selected}
-          variant={this.variant}
-          passive={this.passive}
-          class={'pointer'}
-          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>
+        <button>
+          <ix-card
+            selected={this.selected}
+            variant={this.variant}
+            passive={this.passive}
+            class={'pointer'}
+            aria-label={this.ariaLabelCard}
+            aria-labelledby={ariaLabelledBy}
+          >
+            <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>
     );
   }