nodes/AEmotionStudio-ComfyUI-ShaderNoiseKSampler
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨 Palette: Improve accessibility of Shader Matrix modal

Browse Source 
- 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.
This commit is contained in:
google-labs-jules[bot]
2026-01-15 07:05:26 +00:00
parent 60e6375ad6
commit ea2f7407ff
2 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.Jules/palette.md
+3
View File
@@ -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.
web/matrix_button.js
+16 -2
View File
@@ -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) {