Improve pick item delete confirmation flow

src/components/PickItemRow.test.tsx

@@ -1,10 +1,23 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { PickItemRow } from './PickItemRow';
 import { PickItem } from '../models/PickItem';
 import { Product } from '../models/Product';
 
+const mockMatchMedia = (matches: boolean) => {
+  window.matchMedia = vi.fn().mockImplementation((query) => ({
+    matches,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+};
+
 const baseItem: PickItem = {
   id: 'item-1',
   pick_list_id: 'list-1',
@@ -29,6 +42,10 @@ const baseProduct: Product = {
 };
 
 describe('PickItemRow', () => {
+  beforeEach(() => {
+    mockMatchMedia(false);
+  });
+
   it('asks for confirmation before deleting a product from the pick list', async () => {
     const onDelete = vi.fn();
     const user = userEvent.setup();
@@ -52,7 +69,7 @@ describe('PickItemRow', () => {
     ).toBeVisible();
     expect(onDelete).not.toHaveBeenCalled();
 
-    await user.click(screen.getByRole('button', { name: /confirm delete/i }));
+    await user.click(screen.getByRole('button', { name: /^delete$/i }));
 
     expect(onDelete).toHaveBeenCalledTimes(1);
   });

src/components/PickItemRow.tsx

@@ -49,9 +49,14 @@ export const PickItemRow = ({
     onStatusChange(checked ? 'picked' : 'pending');
   };
 
+  const closeDialogs = () => {
+    setIsConfirmOpen(false);
+    setIsControlsOpen(false);
+  };
+
   const handleConfirmDelete = () => {
     onDelete();
-    setIsConfirmOpen(false);
+    closeDialogs();
   };
 
   const handleRowClick = () => {
@@ -263,7 +268,7 @@ export const PickItemRow = ({
 
       <Dialog
         open={isConfirmOpen}
-        onClose={() => setIsConfirmOpen(false)}
+        onClose={closeDialogs}
         aria-labelledby="confirm-delete-title"
         aria-describedby="confirm-delete-description"
       >
@@ -274,15 +279,10 @@ export const PickItemRow = ({
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button onClick={() => setIsConfirmOpen(false)} aria-label="Cancel delete" autoFocus>
+          <Button onClick={closeDialogs} autoFocus>
             Cancel
           </Button>
-          <Button
-            color="error"
-            variant="contained"
-            onClick={handleConfirmDelete}
-            aria-label="Confirm delete"
-          >
+          <Button color="error" variant="contained" onClick={handleConfirmDelete}>
             Delete
           </Button>
         </DialogActions>