feat: enhance accessibility by adding VisuallyHidden component for reminder title in TaskRowShare

Author: mikepsinn

packages/web/src/components/retroui/Select.tsx

@@ -42,7 +42,7 @@ const SelectContent = ({
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
         className={cn(
-          "relative z-50 min-w-[8rem] overflow-hidden border border-border bg-background text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "relative z-50 min-w-[8rem] max-h-[var(--radix-select-content-available-height)] overflow-hidden border border-border bg-background text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className,
@@ -55,6 +55,7 @@ const SelectContent = ({
         </SelectPrimitive.ScrollUpButton>
         <SelectPrimitive.Viewport
           className={cn(
+            "overflow-y-auto",
             position === "popper" &&
               "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
           )}

packages/web/src/components/tasks/task-row-share.tsx

@@ -24,6 +24,7 @@ function copyToClipboard(text: string): Promise<void> {
   }
 }
 import { useSession } from "next-auth/react";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import {
   FaEnvelope,
   FaFacebookF,
@@ -450,6 +451,9 @@ export function TaskRowShare({
             </button>
           </Drawer.Trigger>
           <Drawer.Content className="max-h-[90vh] overflow-y-auto border-t-4 border-foreground bg-background">
+            <VisuallyHidden>
+              <Drawer.Title>{`Send reminder — ${taskTitle}`}</Drawer.Title>
+            </VisuallyHidden>
             <ReminderComposer {...composerProps} />
           </Drawer.Content>
         </Drawer>