From ea2f7407fffe6b01f340377ce00af9f943ff35e9 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 15 Jan 2026 07:05:26 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20accessibili?=
 =?UTF-8?q?ty=20of=20Shader=20Matrix=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added `role="dialog"`, `aria-modal="true"`, and `aria-label` to the modal container.
- Added `aria-label` to the icon-only "Close" and "Scroll to top" buttons.
- Implemented initial focus management to set focus on the "Close" button when the modal opens.

These changes ensure screen reader users can correctly identify the modal and navigate its controls.
---
 .Jules/palette.md    |  3 +++
 web/matrix_button.js | 18 ++++++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..1848284
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-05-22 - ComfyUI Manual Modals
+**Learning:** ComfyUI custom nodes often inject raw HTML for modals via JS, bypassing standard UI libraries. This frequently leads to missing ARIA roles and focus management.
+**Action:** When working on ComfyUI extensions, always check `document.createElement` calls for missing `role="dialog"`, `aria-modal`, and manual focus handling.
diff --git a/web/matrix_button.js b/web/matrix_button.js
index 0e9a0f7..ca07305 100644
--- a/web/matrix_button.js
+++ b/web/matrix_button.js
@@ -144,6 +144,11 @@ import { app } from "../../scripts/app.js";
                     const button = self.addWidget("button", "📊 Show Shader Matrix", null, function() {
                         // Create modal container
                         const modal = document.createElement("div");
+                        // Accessibility attributes for the modal
+                        modal.setAttribute('role', 'dialog');
+                        modal.setAttribute('aria-modal', 'true');
+                        modal.setAttribute('aria-label', 'Shader Matrix Documentation');
+
                         modal.style.cssText = `
                             position: fixed; top: 0; left: 0; width: 100%; height: 100%;
                             background: linear-gradient(135deg, rgba(0,0,0,0.9), rgba(26,13,52,0.95));
@@ -959,7 +964,7 @@ import { app } from "../../scripts/app.js";
                             </style>
                             
                             <!-- This button is handled by the closeModalCleanup logic if class matches -->
-                            <button class="close-button" title="Close" style="position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--accent-color), 0.7); color: white; border: none; font-size: 1.2rem; z-index: 100; display: flex; align-items:center; justify-content:center; line-height:1;">×</button>
+                            <button class="close-button" aria-label="Close" title="Close" style="position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--accent-color), 0.7); color: white; border: none; font-size: 1.2rem; z-index: 100; display: flex; align-items:center; justify-content:center; line-height:1;">×</button>
                             
                             <div id="canvas-container"></div>
     
@@ -2978,7 +2983,7 @@ def apply_color_to_noise(noise_tensor, shader_params):
 </div>
                             </footer>
                         
-                            <button id="scroll-top" title="Go to top">↑</button>
+                            <button id="scroll-top" aria-label="Scroll to top" title="Go to top">↑</button>
                             
                             <!-- Scripts temporarily removed for debugging linter errors -->
                             
@@ -2996,6 +3001,15 @@ def apply_color_to_noise(noise_tensor, shader_params):
                         
                         modal.appendChild(content);
                         document.body.appendChild(modal);
+
+                        // Accessibility: Set focus to the close button when modal opens
+                        // Using a small timeout to ensure DOM insertion is complete and to play nice with screen readers
+                        setTimeout(() => {
+                            const closeBtn = content.querySelector('.close-button');
+                            if (closeBtn) {
+                                closeBtn.focus();
+                            }
+                        }, 50);
                         
                         // Call the renderer for noise visualizations
                         if (window.NoiseVisualizer && window.NoiseVisualizer.renderAllInModal) {