Merge pull request #22 from AEmotionStudio/palette/fix-modal-nav-focus-17460911087818315433

🎨 Palette: Improve focus management for documentation modal navigation

.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.

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 });
+            }
         }
     };