fix: use meaningful fallback in delete announcement

src/__tests__/QuadrantCanvas.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from 'vitest'
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import QuadrantCanvas from '../components/QuadrantCanvas'
 import type { Framework } from '../types'
@@ -109,4 +109,21 @@ describe('QuadrantCanvas', () => {
     const updatedFw = onUpdate.mock.calls[0][0]
     expect(updatedFw.quadrants[0].items).toHaveLength(2)
   })
+
+  it('announces item text when deleting an item', async () => {
+    const user = userEvent.setup()
+    render(<QuadrantCanvas {...defaultProps} />)
+
+    // Delete the existing item "Task A" via its delete button
+    const deleteBtn = screen.getByRole('button', { name: /delete item: task a/i })
+    await user.click(deleteBtn)
+
+    // The sr-only aria-live region should announce the deletion with the item name
+    await waitFor(() => {
+      const liveRegions = screen.getAllByRole('status')
+      const announcement = liveRegions.find((el) => el.textContent?.includes('deleted from'))
+      expect(announcement).toBeDefined()
+      expect(announcement!.textContent).toContain('Task A')
+    })
+  })
 })

src/components/QuadrantCanvas.tsx

@@ -82,7 +82,9 @@ export default function QuadrantCanvas({
     (quadrantIdx: number, itemId: string) => {
       const item = frameworkRef.current.quadrants[quadrantIdx].items.find((i) => i.id === itemId)
       updateFramework((fw) => removeItem(fw, quadrantIdx, itemId))
-      announce(`Item "${item?.text ?? ''}" deleted from ${frameworkRef.current.quadrants[quadrantIdx].label}`)
+      const label = frameworkRef.current.quadrants[quadrantIdx].label
+      const itemText = item ? `"${item.text}"` : ''
+      announce(item ? `Item ${itemText} deleted from ${label}` : `Item deleted from ${label}`)
     },
     [updateFramework, announce],
   )