Accessible Card Pattern

<!-- One link, wrapped in the heading.
     The card itself is just an <article>. -->
<article class="card">
  <p class="card__eyebrow">Article</p>
  <h3 class="card__title">
    <a href="/posts/native-html-beats-aria/">
      Why Native HTML Beats ARIA Most of the Time
    </a>
  </h3>
  <p class="card__body">
    A breakdown of when native semantics already do the
    job, and when ARIA is genuinely needed.
  </p>
</article>

<!-- Title link is the primary navigation.
     Each button is its own control with its own name.
     No ::after overlay. -->
<article class="card card--actions">
  <p class="card__eyebrow">Product</p>
  <h3 class="card__title">
    <a href="/products/keyboard/">Wireless Mechanical Keyboard</a>
  </h3>
  <p class="card__body">75% layout, hot-swappable switches.</p>

  <div class="card__actions">
    <button type="button"
            aria-label="Add Wireless Mechanical Keyboard to favorites">
      <svg aria-hidden="true"><!-- heart --></svg>
      <span>Favorite</span>
    </button>
    <button type="button"
            aria-label="Quick view of Wireless Mechanical Keyboard">
      <svg aria-hidden="true"><!-- eye --></svg>
      <span>Quick view</span>
    </button>
  </div>
</article>

/* Card sets the positioning context */
.card {
  position: relative;
  padding: 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
}

/* The link's ::after expands to fill the card.
   This is a virtual click target — no extra DOM,
   no extra tab stop, no nested interactive element. */
.card .card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Anything that needs to stay clickable on top of
   the overlay (action buttons, inline links) needs
   position: relative + z-index. */
.card__actions,
.card__body a {
  position: relative;
  z-index: 1;
}

/* Hover the card visually when the pointer is anywhere
   over it — works because ::after covers everything. */
.card:hover {
  border-color: var(--color-primary);
}

/* Focus ring on the whole card when the inner link
   has keyboard focus. :has() is supported in all
   modern browsers (2023+). */
.card:has(a:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}

/* Suppress the link's own focus ring — we render
   it on the card instead. */
.card .card__title a:focus-visible {
  outline: none;
}

/* Fallback for browsers without :has() —
   focus ring on the link itself. */
@supports not selector(:has(*)) {
  .card .card__title a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}