Clickable Area 

<div class="demo--accented">
    <clickable-area>
        <h1>Hello</h1>
        <a href="#">Click here!</a>
    </clickable-area>
</div>
 
<div class="demo--accented">
    <clickable-area>
        <h1>Hello</h1>
        <a href="#">Click here!</a>
    </clickable-area>
</div>
 
/* No context defined. */
  • Content: 
    //
// Clickable Area
//
// Makes the entire area clickable using CSS-only solution
// The first link's click area is extended to cover the entire element
// Additional links maintain their own click areas with higher z-index
//
// Based on: https://inclusive-components.design/cards
//

clickable-area {
  cursor: pointer;
  position: relative;
  display: block;

  // Extend the first link's click area to cover the entire element
  a::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
  }

  // Ensure additional links remain clickable above the extended area
  a:not(:first-of-type) {
    position: relative;
    z-index: 2;
  }
}
  • URL: /components/raw/clickable-area/_clickable-area.scss
  • Filesystem Path: components/05-atoms/clickable-area/_clickable-area.scss
  • Size: 663 Bytes
  • Content: 
    // DEPRECATED: This JavaScript implementation is no longer needed.
// The clickable-area functionality is now implemented purely with CSS.
// See _clickable-area.scss for the CSS-only solution.
//
// This file is kept for backwards compatibility but will be removed in a future version.
// You can safely stop registering this custom element.
//
// following advice from https://inclusive-components.design/cards
export default class ClickableArea extends HTMLElement {
  connectedCallback() {
    if (this.link) {
      this.addEventListener('mousedown', this.handleMousedown.bind(this))
      this.addEventListener('mouseup', this.handleMouseup.bind(this))
      this.style.cursor = 'pointer'
    }
  }

  handleMousedown({ timeStamp }) {
    this.down = timeStamp
  }

  handleMouseup({ timeStamp }) {
    if (timeStamp - this.down < 200) {
      this.link.click()
    }
  }

  get link() {
    return this.querySelector('a')
  }
}
  • URL: /components/raw/clickable-area/clickable-area.js
  • Filesystem Path: components/05-atoms/clickable-area/clickable-area.js
  • Size: 935 Bytes

No notes defined.