From 89128d49c4dfdc185e817eb672b20d91863e6503 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Wed, 28 Oct 2026 10:33:36 +0100
Subject: [PATCH] fix: make the desktop task editor a labelled dialog like the
 event editor

---
 .../__tests__/task-modal-calendars.test.tsx         | 13 +++++++++++++
 components/calendar/task-modal.tsx                  | 13 ++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/components/calendar/__tests__/task-modal-calendars.test.tsx b/components/calendar/__tests__/task-modal-calendars.test.tsx
index 1bd0abf30..15eb01375 100644
--- a/components/calendar/__tests__/task-modal-calendars.test.tsx
+++ b/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();
+  });
+});
diff --git a/components/calendar/task-modal.tsx b/components/calendar/task-modal.tsx
index 26507e54d..fb89b9505 100644
--- a/components/calendar/task-modal.tsx
+++ b/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}>