diff --git a/.Jules/palette.md b/.Jules/palette.md index b6f5d5bf..c1582ffd 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -29,3 +29,7 @@ ## 2024-07-01 - Testing components with focusable disabled button wrappers **Learning:** When native disabled buttons are wrapped in a focusable `span` to provide accessible tooltips, tests that previously found and clicked the `button` (by temporarily removing the `disabled` attribute) may fail or become overly complex. It is cleaner and more accurate to query the wrapper element (e.g. via its `title`) and fire events on it, reflecting the actual accessible DOM structure. **Action:** When testing UI components that wrap disabled buttons in a focusable span for accessibility (e.g., using a tooltip/title), use `screen.getByTitle(...)` to query the wrapper element for interactions like `fireEvent.click` rather than `screen.getByRole('button')`. + +## 2024-05-24 - Avoid nesting native buttons with ARIA role button on wrappers +**Learning:** Adding `role="button"` to a `span` or `div` wrapper that contains a native ` - - - Help coming soon - - + + @@ -646,7 +659,7 @@ export function App() { Save Project ) : ( - + @@ -311,15 +316,39 @@ export function Workspace({ song, sourceBootstrap = null, onSongUpdate }: Worksp

Stem Player

{activeRoleDetails?.name ?? activeRole}

- - - - - - - - - + + + {canTranscribeBass ? ( - + )}