diff --git a/.Jules/palette.md b/.Jules/palette.md index c975fe9..3ed526e 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -23,6 +23,10 @@ ## 2024-05-18 - Missing Focus Visible States on Custom Switches **Learning:** Custom UI controls that mimic native inputs (like pill-shaped switches for Reverse or Melodic Mode) frequently omit `focus-visible` styles, rendering them completely invisible to keyboard users when tabbing through the interface. Furthermore, developers frequently mistakenly use `aria-pressed` with `role="button"` instead of the correct `role="switch"` with `aria-checked` for these pill-shaped components. **Action:** Always verify that interactive custom switches not only have appropriate ARIA roles (`role="switch"`, `aria-checked`) but explicitly define `focus:outline-none focus-visible:ring-*` classes. + +## 2024-04-10 - Standardization of aria-busy on Async Import Buttons +**Learning:** Discovered an inconsistency where some background task buttons (like the AI Song Import button) lacked the `aria-busy` attribute, while others (like RbsImportModal and SamplerPanel) correctly used it to inform screen readers of processing states. +**Action:** Applied `aria-busy={isImporting}` to the AI Song Import button to standardise asynchronous feedback mechanisms for accessibility across all modal interfaces. ## 2026-04-09 - Standardize Modal Accessibility for Cloud Library **Learning:** The `CloudLibrary` component functioned as a modal visually but lacked standard ARIA modal attributes (`role="dialog"`, `aria-modal="true"`, `aria-labelledby`), causing screen readers to announce it incorrectly or not at all. **Action:** When implementing custom modals, always include `role="dialog"`, `aria-modal="true"`, an explicit `aria-labelledby` referencing a visually hidden or visible title element, and an `aria-hidden="true"` on the clickable background overlay. diff --git a/src/components/AISongModal.tsx b/src/components/AISongModal.tsx index 1b5b26f..f774c01 100644 --- a/src/components/AISongModal.tsx +++ b/src/components/AISongModal.tsx @@ -1354,6 +1354,7 @@ export function AISongModal({ isOpen, onClose, onImport, onShowToast, audioEngin