diff --git a/package.json b/package.json index d2a5ede..b4ea17c 100644 --- a/package.json +++ b/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", diff --git a/readme.md b/readme.md index cd7d721..fe3d86d 100644 --- a/readme.md +++ b/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 diff --git a/src/assets/css/blocks/card.css b/src/assets/css/blocks/card.css index f10e1fe..600e50d 100644 --- a/src/assets/css/blocks/card.css +++ b/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; +} diff --git a/src/assets/scripts/app.js b/src/assets/scripts/app.js index d399faa..6c18504 100644 --- a/src/assets/scripts/app.js +++ b/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(); - } - }; -});