feat(card): use link instead of button for pictogram card (carbon-des…

…ign-system#11225)

Closes carbon-design-system#10960
[Jira ticket](https://jsw.ibm.com/browse/ADCMS-4074)

Alternate approach to fixing carbon-design-system#10960. Previously we had attempted a resolution that wrapped the whole card in `<a></a>`. That solution introduced regressions with accessibiltiy. It's also come to my attention that the approach is a well [known poor approach](https://css-tricks.com/block-links-are-a-pain-and-maybe-just-a-bad-idea/).

This solution takes the same approach as the Default Card component, which is to wrap the footer icon in a `<a></a>` and then absolute position a pseudo element child to make the whole card clickable still. More on [the pseudo-element  method](https://css-tricks.com/block-links-the-search-for-a-perfect-solution/#aa-method-3-the-good-ol-before-pseudo-element).

**Changed**

- Wrap the footer icon in a link for the card pictogram in the same way as the default card
- Adjustment to Storybook for Card so that the body copy is used on page load

**Removed**

- Remove the `role="button"` wrapper for pictogram card

packages/styles/scss/components/card/_card.scss

@@ -637,4 +637,4 @@
      position: relative;
    }
  }
-
+

packages/web-components/src/components/card/__stories__/card.stories.ts

@@ -28,6 +28,7 @@ import {
   typeOptions,
   types,
 } from '../../cta/__stories__/ctaTypeConfig';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 const tagGroupContent = html`
   <div>
@@ -185,17 +186,13 @@ export const Pictogram = (args) => {
   const { href, heading, copy, tagGroup, pictogramPlacement, cardStyles } =
     args?.PictogramCard ?? {};
 
-  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
-  if (copyComponent) {
-    copyComponent!.innerHTML = copy;
-  }
   return html`
     <c4d-card
       pictogram-placement="${pictogramPlacement}"
       href=${ifDefined(href || undefined)}
       color-scheme=${cardStyles === 'Inverse card' ? 'inverse' : ''}>
       <c4d-card-heading>${heading}</c4d-card-heading>
-      ${copy ? html` <p></p> ` : ``}
+      ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
       <svg
         slot="pictogram"
@@ -283,11 +280,6 @@ export const Static = (args) => {
     ctaCopy,
   } = args?.Card ?? {};
 
-  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
-  if (copyComponent) {
-    copyComponent!.innerHTML = copy;
-  }
-
   return html`
     <c4d-card>
       ${image
@@ -300,7 +292,7 @@ export const Static = (args) => {
         : ``}
       ${eyebrow ? html` <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow> ` : ``}
       <c4d-card-heading>${heading}</c4d-card-heading>
-      ${copy ? html` <p></p> ` : ``}
+      ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
       ${cta
         ? html`
@@ -382,11 +374,6 @@ export const Link = (args) => {
     card.querySelector('c4d-card-footer')!.innerHTML = duration ?? '';
   }
 
-  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
-  if (copyComponent) {
-    copyComponent!.innerHTML = copy;
-  }
-
   return html`
     <c4d-video-cta-container>
       <c4d-card
@@ -396,7 +383,7 @@ export const Link = (args) => {
         cta-type=${ctaType}
         href=${ifDefined(href || undefined)}>
         <c4d-card-heading>${videoCopy ?? heading}</c4d-card-heading>
-        ${copy ? html` <p></p> ` : ``}
+        ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
         <c4d-card-footer></c4d-card-footer>
       </c4d-card>
     </c4d-video-cta-container>
@@ -446,11 +433,6 @@ export const Logo = (args) => {
   const { alt, defaultSrc, eyebrow, heading, href, copy, tagGroup } =
     args?.Card ?? {};
 
-  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
-  if (copyComponent) {
-    copyComponent!.innerHTML = copy;
-  }
-
   return html`
     <c4d-card logo href=${ifDefined(href || undefined)}>
       <c4d-image-logo
@@ -459,7 +441,7 @@ export const Logo = (args) => {
         default-src="${ifDefined(defaultSrc)}"></c4d-image-logo>
       ${eyebrow ? html` <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow> ` : ``}
       ${heading ? html` <c4d-card-heading>${heading}</c4d-card-heading> ` : ``}
-      ${copy ? html` <p></p> ` : ``}
+      ${copy ? unsafeHTML(`<p>${copy}</p>`) : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
 
       <c4d-card-footer></c4d-card-footer>

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> `;