From 3af30d25570ae6ed2d814a5a3c3e3c0f24bbc8c6 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Fri, 10 Apr 2026 08:31:56 +0000 Subject: [PATCH] feat(a11y): standardize `aria-busy` on async import buttons Added the `aria-busy={isImporting}` attribute to the AI Song Modal's "Import Song" button. This ensures screen readers receive explicit context that a background loading task is occurring, bringing the component in line with the accessibility patterns used in other import modals (e.g., RbsImportModal). Co-authored-by: ford442 <9397845+ford442@users.noreply.github.com> --- .Jules/palette.md | 4 ++++ src/components/AISongModal.tsx | 1 + 2 files changed, 5 insertions(+) diff --git a/.Jules/palette.md b/.Jules/palette.md index 65496c31..99412b08 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -23,3 +23,7 @@ ## 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. diff --git a/src/components/AISongModal.tsx b/src/components/AISongModal.tsx index 8fa0fdc2..ca30e78f 100644 --- a/src/components/AISongModal.tsx +++ b/src/components/AISongModal.tsx @@ -1347,6 +1347,7 @@ export function AISongModal({ isOpen, onClose, onImport, onShowToast, audioEngin