[component]: Link area

[gfellerph]

Description

Create a web component that delegates clicks on it's area to the first slotted link. This solves a tricky accessibility issue where the link cannot wrap a card and cannot be reliably extended to the cards size via overlay. Optionally, the <post-linkarea> takes a selector to target a specific link. The only thing the component does then, is trigger a click on the link (slotted.querySelector('a').click()).

<post-linkarea>
  <div class="card">
      <img ... />
      <h2>Super product</h2>
      <p>Description...</p>
      <a href="/product-x" class="button">Buy product x</a>
  </div>
</post-linkarea>

Documentation

• Areas should have hover styles

Props

• selector: optional selector to target a link, default behaviour if not specified is to click on the first slotted link

Requirements

• <post-linkarea> should use the pointer cursor to indicate a clickable area
• this component is not focusable, keyboard focus should move to the real link instead. If the card needs outside focus styles, :has(:focus-visible) can be used to style the focus on the outer element
• Prevent involuntary clicks by checking click target against selector if it's set

Component naming

• post-linkarea
• post-linkdelegate
• post-clickdelegate
• post-clickarea

Resources

openui/open-ui#1111

Tasks

💻 Tasks

Preview Give feedback

1. Create <post-linkarea> component
2. Document in storybook
3. Add e2e tests