feat(playground): add accessible context menus

packages/ui/src/features/playground/components/Mixer/__tests__/MixerView.test.tsx

@@ -22,6 +22,7 @@ function createTestStore(tracks: ReturnType<typeof createMockTrack>[]) {
     setCurrentSection: noop,
     addSection: noop,
     renameSection: noop,
+    duplicateSection: noop,
     removeSection: noop,
     setTrackVolume: noop,
     setTrackPan: noop,
@@ -32,6 +33,8 @@ function createTestStore(tracks: ReturnType<typeof createMockTrack>[]) {
     updateNote: noop,
     setClipNotes: noop,
     createClip: noop,
+    duplicateClip: noop,
+    removeClip: noop,
     setClipLength: noop,
     addNewTrack: noop,
     removeTrack: noop,

packages/ui/src/features/playground/components/PlaygroundsDashboard/PlaygroundsDashboard.tsx

@@ -27,12 +27,14 @@ import type { PlaygroundState } from '../../types';
 
 interface PlaygroundCardProps {
   playground: PlaygroundState;
+  index: number;
   onPress?: (id: string) => void;
   onMenuPress?: (id: string) => void;
 }
 
 const PlaygroundCard = memo(function PlaygroundCard({
   playground,
+  index,
   onPress,
   onMenuPress,
 }: PlaygroundCardProps) {
@@ -75,6 +77,7 @@ const PlaygroundCard = memo(function PlaygroundCard({
         hitSlop={12}
         accessibilityRole="button"
         accessibilityLabel="More options"
+        testID={`playgroundMenuButton_${index}`}
       >
         <Icon icon={Icons.more} size={20} color={colors.mcWhite3} />
       </Pressable>
@@ -173,10 +176,11 @@ export const PlaygroundsDashboard = memo(function PlaygroundsDashboard({
               { paddingHorizontal: padding },
             ]}
           >
-            {playgrounds.map((p) => (
+            {playgrounds.map((p, index) => (
               <PlaygroundCard
                 key={p.id}
                 playground={p}
+                index={index}
                 onPress={onSelect}
                 onMenuPress={onMenuPress}
               />

packages/ui/src/features/playground/components/PlaygroundsDashboard/__tests__/PlaygroundsDashboard.test.tsx

@@ -70,6 +70,21 @@ describe('PlaygroundsDashboard behavior', () => {
     expect(onSelect).toHaveBeenCalled();
   });
 
+  it('calls onMenuPress from a stable indexed menu trigger', () => {
+    const onMenuPress = jest.fn();
+    const playgrounds = createMockPlaygroundsList(2);
+    const { getByTestId } = renderWithTheme(
+      <PlaygroundsDashboard
+        playgrounds={playgrounds}
+        onMenuPress={onMenuPress}
+      />
+    );
+
+    fireEvent.press(getByTestId('playgroundMenuButton_1'));
+
+    expect(onMenuPress).toHaveBeenCalledWith(playgrounds[1]!.id);
+  });
+
   it('calls onCreate when tapping + New', () => {
     const onCreate = jest.fn();
     const playgrounds = createMockPlaygroundsList(1);

packages/ui/src/features/playground/components/PlaygroundsDashboard/__tests__/__snapshots__/PlaygroundsDashboard.test.tsx.snap

@@ -582,6 +582,7 @@ exports[`PlaygroundsDashboard snapshots matches snapshot refresh with playground
                 "padding": 12,
               }
             }
+            testID="playgroundMenuButton_0"
           >
             <View>
               <View
@@ -790,6 +791,7 @@ exports[`PlaygroundsDashboard snapshots matches snapshot refresh with playground
                 "padding": 12,
               }
             }
+            testID="playgroundMenuButton_1"
           >
             <View>
               <View
@@ -1136,6 +1138,7 @@ exports[`PlaygroundsDashboard snapshots matches snapshot with playgrounds 1`] =
                 "padding": 12,
               }
             }
+            testID="playgroundMenuButton_0"
           >
             <View>
               <View
@@ -1344,6 +1347,7 @@ exports[`PlaygroundsDashboard snapshots matches snapshot with playgrounds 1`] =
                 "padding": 12,
               }
             }
+            testID="playgroundMenuButton_1"
           >
             <View>
               <View
@@ -1552,6 +1556,7 @@ exports[`PlaygroundsDashboard snapshots matches snapshot with playgrounds 1`] =
                 "padding": 12,
               }
             }
+            testID="playgroundMenuButton_2"
           >
             <View>
               <View