From d261f2acb43b49a3554a01620545aeee42cf13f2 Mon Sep 17 00:00:00 2001
From: 0m364 <13804150+0m364@users.noreply.github.com>
Date: Sat, 4 Jul 2026 11:11:34 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20accessibili?=
=?UTF-8?q?ty=20of=20anchor=20buttons=20for=20modals?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
💡 What: Added `role="button"` and `aria-haspopup="dialog"` to native `` tags used as buttons, and explicitly bound the Spacebar key to the action to prevent page scrolling.
🎯 Why: Native `` tags only respond to `Enter`. Screen reader and keyboard users expect elements functioning as buttons to also trigger on `Spacebar`. Defaulting to scroll creates a confusing experience.
📸 Before/After: Visuals remain unchanged, but the element now correctly responds to Spacebar without scrolling.
♿ Accessibility: Ensures correct ARIA semantic roles and restores standard keyboard expectations for interactive elements.
---
.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..36ae60a 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-25 - Anchor Link Modals and Keyboard Interactivity
+**Learning:** When using native `` tags with `href="#"` as buttons to open modals, they natively only respond to the `Enter` key. Keyboard and screen reader users expect `button` roles to also respond to the `Spacebar` key, which instead triggers a page scroll by default on anchors.
+**Action:** When using anchors as buttons, always add `role="button"` and explicitly bind a `keydown` listener that checks for the `Spacebar` key, calls `e.preventDefault()` to stop the scroll, and fires the 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..7ad7852 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.key === 'Spacebar') {
+ 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