From 0b7d976cf5cec8a336804d85ee727463925ca3cf Mon Sep 17 00:00:00 2001 From: 0m364 <13804150+0m364@users.noreply.github.com> Date: Mon, 22 Jun 2026 11:02:44 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Accessible=20Modal=20?= =?UTF-8?q?Triggers?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Added `role="button"` and `aria-haspopup="dialog"` to the anchor tags functioning as buttons. - Bound a `keydown` event listener for the Space key to prevent default scrolling and trigger the modal properly. - Added a `.Jules/palette.md` entry. --- .Jules/palette.md | 4 ++++ concepts.html | 2 +- contact.html | 2 +- modal.js | 6 ++++++ products.html | 2 +- 5 files changed, 13 insertions(+), 3 deletions(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index 7c7c523..c5375a5 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -29,3 +29,7 @@ ## 2026-06-12 - Robust Skip-to-Content Links **Learning:** Adding a "Skip to main content" link is a critical accessibility requirement for keyboard users. To make it robust, it needs to be hidden visually but appear when focused using `transform: translateY(-100%)` instead of magic pixel numbers, and the target container (e.g., `
`) must have a matching `id` and `tabindex="-1"` so it can programmatically receive focus across all browsers. **Action:** Always include a visually hidden 'Skip to main content' link immediately after the opening `` tag. Set the main content container with an `id` and explicitly `tabindex="-1"`. + +## 2026-06-22 - Anchor Tags as Accessible Buttons +**Learning:** When using `` tags with `href="#"` as buttons (e.g., to open a modal), native anchors only respond to the 'Enter' key, but keyboard and screen reader users expect elements acting as buttons to also respond to the 'Space' key. Additionally, screen readers announce these elements as generic links unless explicitly defined. +**Action:** Always add `role="button"` to anchor tags functioning as buttons. If they open a modal, also include `aria-haspopup="dialog"`. Crucially, bind a JavaScript `keydown` event listener for the `Space` key that calls `e.preventDefault()` (to stop the page from scrolling down) and then executes the click action. diff --git a/concepts.html b/concepts.html index d4e1807..13b8873 100644 --- a/concepts.html +++ b/concepts.html @@ -19,7 +19,7 @@

CHARLES WILLIAMS

Products Concepts Contact - OSINT + OSINT
diff --git a/contact.html b/contact.html index b30b503..15d119b 100644 --- a/contact.html +++ b/contact.html @@ -49,7 +49,7 @@

Get in Touch

- + OSINT diff --git a/modal.js b/modal.js index 994d6bd..3fd335d 100644 --- a/modal.js +++ b/modal.js @@ -56,6 +56,12 @@ const openModal = (e) => { const btns = document.querySelectorAll('#sitrep-btn'); btns.forEach(btn => { btn.addEventListener('click', openModal); + btn.addEventListener('keydown', (e) => { + if (e.key === ' ' || e.code === 'Space') { + e.preventDefault(); + openModal(e); + } + }); }); // Close modal via button diff --git a/products.html b/products.html index f5f0835..01f1a6c 100644 --- a/products.html +++ b/products.html @@ -20,7 +20,7 @@

CHARLES WILLIAMS

Products Concepts Contact - OSINT + OSINT