diff --git a/.Jules/palette.md b/.Jules/palette.md index c576588..8d6b0da 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -5,3 +5,7 @@ ## 2025-05-23 - Dynamic Content in Raw HTML Modals **Learning:** When using raw HTML strings for modals in ComfyUI extensions, dynamic content toggles (like "Show/Hide Code") often lack state indication (`aria-expanded`) and relationship linking (`aria-controls`), as they rely on simple onclick handlers. **Action:** Ensure all toggle buttons in template strings include unique IDs for target content and `aria-expanded`/`aria-controls` attributes, with JS handlers updating the state. + +## 2025-05-24 - In-Page Navigation Focus Management +**Learning:** In single-page documentation modals (common in custom nodes), in-page navigation buttons (`scrollToSection`) often scroll content but leave focus on the button. This forces keyboard users to traverse the entire menu again to reach the content. +**Action:** Update scroll handlers to programmatically move focus to the target section's heading (setting `tabindex="-1"` if needed) to maintain logical reading flow. diff --git a/web/matrix_button.js b/web/matrix_button.js index efa1830..23656d8 100644 --- a/web/matrix_button.js +++ b/web/matrix_button.js @@ -11,6 +11,18 @@ import { app } from "../../scripts/app.js"; const section = modalContent.querySelector('#' + sectionId); if (section) { section.scrollIntoView({ behavior: 'smooth' }); + + // UX Enhancement: Move focus to the section header for accessibility + const header = section.querySelector('h1, h2, h3, h4, h5, h6'); + if (header) { + // Ensure the header is focusable programmatically + if (!header.hasAttribute('tabindex')) { + header.setAttribute('tabindex', '-1'); + } + // Focus the header to update reading position for keyboard/screen reader users + // preventScroll: true prevents the browser from fighting the smooth scroll + header.focus({ preventScroll: true }); + } } };