From 0c568bbf59efe62fa3d4ab35214f32e7486ef75a Mon Sep 17 00:00:00 2001 From: 0m364 <13804150+0m364@users.noreply.github.com> Date: Wed, 8 Jul 2026 10:55:55 +0000 Subject: [PATCH] Add ARIA roles and spacebar support to modal anchor buttons Added `role="button"` and `aria-haspopup="dialog"` to `#sitrep-btn` anchors across HTML files. Added a `keydown` listener in `modal.js` to trigger on Spacebar, bringing full keyboard accessibility to these custom trigger elements. Updated `.Jules/palette.md` with learnings. --- .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..712c42f 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-13 - Anchor Buttons, Roles, and Keyboard Triggers +**Learning:** When using `` tags with `href="#"` as buttons to trigger dialogs (like the Sitrep OSINT button), simply styling them to look like buttons isn't enough. Screen readers read them as links by default, which sets the wrong interaction expectation. Furthermore, native anchors only trigger on the `Enter` key, whereas standard buttons respond to both `Enter` and `Spacebar`. +**Action:** Always add `role="button"` and `aria-haspopup="dialog"` to anchor tags functioning as modal triggers. Additionally, bind a specific `keydown` event listener for the `Spacebar` key (and call `e.preventDefault()` to stop page scrolling) to ensure full keyboard equivalence with native `