- Restore focus to main canvas when closing the matrix modal to support keyboard navigation
- Update aria-label to 'Copied' on copy button success to support screen readers
- Conditionally restore original aria-label to prevent overwriting on error
Co-authored-by: AEmotionStudio <163354043+AEmotionStudio@users.noreply.github.com>
- Restore focus to main canvas when closing the matrix modal to support keyboard navigation
- Update aria-label to 'Copied' on copy button success to support screen readers
- Restore original aria-label after timeout
Co-authored-by: AEmotionStudio <163354043+AEmotionStudio@users.noreply.github.com>
- Remove redundant Side-by-Side case in computeSize():
The case set height = Math.max(500, width) which was identical to the
default initialization, so it was effectively dead code.
- Extract resetButtonTimeout helper in copyCodeSection():
Both success and error handlers had identical timeout reset logic.
Consolidated into a single helper function, reducing ~25 lines.
All 85 tests pass.
💡 What:
- Exposed the `showToast` utility from `web/shader_params_save_button.js` as `window.showComfyToast`.
- Updated `web/matrix_button.js` to use `window.showComfyToast` for the "Copy Code" feedback.
- Added `:focus-visible` styles to the "Shader Matrix" modal buttons and tabs.
🎯 Why:
- To provide consistent and delightful feedback when copying code snippets.
- To improve accessibility for keyboard users by making focus states clearly visible.
📸 Before/After:
- Before: Copy button text changed to "Copied!". No visible focus ring on dark modal buttons.
- After: "Code copied to clipboard!" toast appears. Interactive elements have a bright purple focus ring.
♿ Accessibility:
- Added `:focus-visible` outline styles using the theme's accent color.
- Implements a `keydown` listener on the modal to intercept Tab and Shift+Tab key presses.
- Dynamically queries visible focusable elements (`button`, `input`, etc.) that have a valid `offsetParent`.
- Loops focus between the first and last focusable elements to prevent keyboard users from tabbing out of the modal into obscured content.
- Enhances accessibility for screen reader and keyboard-only users.
- Added `window.copyCodeSection` helper in `web/matrix_button.js`.
- Updated documentation modal HTML to include "Copy" buttons next to "Show" buttons for all code examples.
- Added CSS for `.button-group` and `.copy-code-button` with hover and success states.
- Implemented robust error handling for clipboard access and success/error feedback loops.
- Fixed race condition in button state reset by using explicit string "Copy" and clearing timeouts.
- Restored `verification/verify_dos_fix.py` which was inadvertently deleted.
- Hardened error handler to clean up state and manage timeouts correctly.
- Added `window.copyCodeSection` helper in `web/matrix_button.js`.
- Updated documentation modal HTML to include "Copy" buttons next to "Show" buttons for all code examples.
- Added CSS for `.button-group` and `.copy-code-button` with hover and success states.
- Implemented robust error handling for clipboard access and success/error feedback loops.
- Fixed race condition in button state reset by using explicit string "Copy" and clearing timeouts.
- Restored `verification/verify_dos_fix.py` which was inadvertently deleted.
- Added `window.copyCodeSection` helper in `web/matrix_button.js`.
- Updated documentation modal HTML to include "Copy" buttons next to "Show" buttons for all code examples.
- Added CSS for `.button-group` and `.copy-code-button` with hover and success states.
- Implemented robust error handling for clipboard access and success/error feedback loops.
- Restored `verification/verify_dos_fix.py` which was inadvertently deleted.
- Add `aria-expanded` and `aria-controls` to code block toggle buttons in `web/matrix_button.js`.
- Add unique IDs to collapsible code `pre` blocks.
- Update `toggleCodeSection` to dynamically toggle `aria-expanded` state.
- Improve screen reader support for the Shader Matrix modal.
Add full ARIA support and keyboard navigation (Arrow keys, Enter/Space) to the documentation tabs in the Shader Matrix modal.
- Add `role="tablist"`, `role="tab"`, `role="tabpanel"`.
- Implement roving `tabindex` and `aria-selected` management.
- Add `window.handleTabNavigation` to support Arrow Left/Right navigation between tabs.
- Ensure visual focus order matches logical tab order.
- 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.
