From 5d31889240f75edd1a990d50628389ed45ba8e0d Mon Sep 17 00:00:00 2001 From: 0m364 <13804150+0m364@users.noreply.github.com> Date: Tue, 7 Jul 2026 10:58:46 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Accessible=20anchor?= =?UTF-8?q?=20buttons=20for=20modals?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Adds `role="button"` and `aria-haspopup="dialog"` to all "OSINT" `` tags (`#sitrep-btn`). - Adds a missing `#sitrep-btn` link to `index.html`'s navigation for consistency. - Binds a `Spacebar` keyboard event listener in `modal.js` so the links behave exactly like native buttons, preventing default scrolling and opening the modal. - Logs the structural learning in `.Jules/palette.md`. --- .Jules/palette.md | 4 ++++ concepts.html | 2 +- contact.html | 2 +- index.html | 1 + modal.js | 6 ++++++ products.html | 2 +- 6 files changed, 14 insertions(+), 3 deletions(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index 7c7c523..8450ca3 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 - Using `` Tags as Buttons +**Learning:** When using `` tags with `href="#"` as buttons to open modals or trigger actions, they lack the semantic role and keyboard interactions that users expect from actual buttons. Specifically, screen readers will announce them as links, and natively they only trigger on `Enter`, not on `Spacebar` (which instead scrolls the page). +**Action:** Always add `role="button"` and `aria-haspopup="dialog"` (if applicable) when using anchor tags as buttons. Additionally, manually bind a `keydown` event listener for the `Spacebar` key (checking for `e.key === ' '`), and ensure you call `e.preventDefault()` to stop the default page scroll, so they respond consistently like actual native `