swaps card click

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eleventy-excellent",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Eleventy starter based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.",
   "author": "Lene Saile",
   "license": "ISC",

readme.md

@@ -101,6 +101,10 @@ npm run build
 
 ## Logbook
 
+- Replaced Heydon's redundant click event for cards with his pseudo-content trick solution so we don't lose the context menu.
+  \- https://inclusive-components.design/cards/#theredundantclickevent
+  \+ https://inclusive-components.design/cards/#thepseudocontenttrick
+
 ### 23-01-25
 
 - updated Elevebty

src/assets/css/blocks/card.css

@@ -34,6 +34,19 @@
   text-decoration: none;
 }
 
+/* 'clickable' */
+
 .card:focus-within a:focus {
   outline: none;
 }
+.card {
+  position: relative;
+}
+.card a:after {
+  bottom: 0;
+  content: '';
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}

src/assets/scripts/app.js

@@ -1,4 +1,4 @@
-// ------------------- responsive accessible nav by Manuel Matuzović: https://web.dev/website-navigation/
+// © Manuel Matuzović: https://web.dev/website-navigation/
 
 const nav = document.querySelector('nav');
 const list = nav.querySelector('ul');
@@ -33,20 +33,3 @@ document.addEventListener('click', e => {
 });
 
 nav.insertBefore(burgerClone, list);
-
-// ------------------- accessible clickable cards solution by Heydon Pickering: https://inclusive-components.design/cards/
-
-const cards = [...document.querySelectorAll('.card')];
-cards.forEach(card => {
-  card.style.cursor = 'pointer';
-  let down,
-    up,
-    link = card.querySelector('a');
-  card.onmousedown = () => (down = +new Date());
-  card.onmouseup = () => {
-    up = +new Date();
-    if (up - down < 200) {
-      link.click();
-    }
-  };
-});