fix: make the desktop task editor a labelled dialog like the event editor

components/calendar/__tests__/task-modal-calendars.test.tsx

@@ -34,3 +34,16 @@ describe('task editor calendar select', () => {
     expect(select.value).toBe('birthdays');
   });
 });
+
+// The desktop task panel had no dialog role, unlike the event editor.
+describe('task editor panel', () => {
+  it('is a dialog named by its title on wide screens', () => {
+    render(<TaskModal calendars={calendars} onSave={vi.fn()} onClose={vi.fn()} />);
+    expect(screen.getByRole('dialog', { name: 'tasks.create' })).toBeInTheDocument();
+  });
+
+  it('leaves the role to the full-screen wrapper on a phone', () => {
+    render(<TaskModal calendars={calendars} onSave={vi.fn()} onClose={vi.fn()} isMobile />);
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+});

components/calendar/task-modal.tsx

@@ -56,7 +56,7 @@ export function TaskModal({
   onDelete,
   onClose,
   onDirtyChange,
-  isMobile: _isMobile,
+  isMobile = false,
   isSubscriptionCalendar,
 }: TaskModalProps) {
   const t = useTranslations("calendar");
@@ -213,10 +213,17 @@ export function TaskModal({
   }, [requestClose, handleSave]);
 
   return (
-    <div className="flex flex-col h-full bg-background" onKeyDown={handleKeyDown}>
+    // The desktop side panel is a dialog named by its title, like the event
+    // editor; on a phone the full-screen wrapper around it is.
+    <div
+      role={isMobile ? undefined : "dialog"}
+      aria-labelledby={isMobile ? undefined : `${id}-heading`}
+      className="flex flex-col h-full bg-background"
+      onKeyDown={handleKeyDown}
+    >
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-3 border-b border-border">
-        <h2 className="text-sm font-semibold">
+        <h2 id={`${id}-heading`} className="text-sm font-semibold">
           {isEdit ? t("tasks.edit") : t("tasks.create")}
         </h2>
         <IconButton label={tCommon("close")} onClick={requestClose}>