feat(card): use link instead of button for pictogram card

carbon-design-system · Dec 13, 2023 · c54af43 · c54af43
1 parent 5b48b8f
commit c54af43
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
@@ -148,6 +148,12 @@
     .#{$prefix}--card__img {
       transition: $duration-moderate-01 motion(standard, productive);
     }
+
+    .#{$prefix}--card__link::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
   }
 
   // Card with pictogram placement style

diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts
@@ -9,6 +9,7 @@
 
 import { TemplateResult, html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
 import CDSLink from '../../internal/vendor/@carbon/web-components/components/link/link.js';
 import markdownToHtml from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/markdownToHtml/markdownToHtml.js';
@@ -395,14 +396,15 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
   render() {
     return this._hasPictogram
       ? html`
-          <div
-            tabindex="0"
-            aria-label="${this.querySelector(`${c4dPrefix}-card-heading`)
-              ?.textContent || ''}"
-            aria-live="polite"
-            aria-describedby="${prefix}--card__copy"
-            role="button">
-            ${this._renderInner()} ${ArrowRight20()}
+          <div>
+            ${this._renderInner()}
+            <a
+              class="${`${prefix}--card__link`}"
+              href="${ifDefined(this.href)}"
+              aria-label="${this.querySelector(`${c4dPrefix}-card-heading`)
+                ?.textContent || ''}"
+              >${ArrowRight20()}</a
+            >
           </div>
         `
       : html` <div>${this._renderInner()}</div> `;