Fix dialog warnings

package.json

@@ -17,6 +17,7 @@
     "check": "tsc -b && biome check",
     "check:fix": "tsc -b && biome check --write",
     "preview": "vite preview",
+    "scan": "npx react-scan@latest localhost:5173",
     "test": "vitest",
     "test:once": "vitest run",
     "test:debug": "vitest --inspect-brk --no-file-parallelism",

src/components/app/AppSidebar/AppSidebar.tsx

@@ -85,7 +85,7 @@ export const AppSidebar = ({ children }: AppSidebarProps) => {
                     {THEMES[theme as Theme].label}
                   </span>
                 </MenuItem>
-                <Popover>
+                <Popover title="Select a theme">
                   <Menu
                     disallowEmptySelection
                     selectionMode="single"

src/components/common/ComboBox/ComboBox.tsx

@@ -56,7 +56,7 @@ export function ComboBox<T extends object>({
       </FieldGroup>
       {description && <FieldDescription>{description}</FieldDescription>}
       <FieldError>{errorMessage}</FieldError>
-      <Popover className="w-[--trigger-width]">
+      <Popover title="Select an option" className="w-[--trigger-width]">
         <ListBox
           items={items}
           className="outline-0 p-1 max-h-[inherit] overflow-auto [clip-path:inset(0_0_0_0_round_.75rem)]"

src/components/common/DatePicker/DatePicker.tsx

@@ -9,7 +9,6 @@ import {
 import { Button } from "../Button";
 import { Calendar } from "../Calendar";
 import { DateInput } from "../DateField";
-import { Dialog } from "../Dialog";
 import { FieldDescription, FieldError, FieldGroup, Label } from "../Field";
 import { Popover } from "../Popover";
 
@@ -43,10 +42,8 @@ export function DatePicker<T extends DateValue>({
       </FieldGroup>
       {description && <FieldDescription>{description}</FieldDescription>}
       <FieldError>{errorMessage}</FieldError>
-      <Popover>
-        <Dialog>
-          <Calendar />
-        </Dialog>
+      <Popover title="Select a date">
+        <Calendar />
       </Popover>
     </AriaDatePicker>
   );

src/components/common/DateRangePicker/DateRangePicker.tsx

@@ -8,7 +8,6 @@ import {
 } from "react-aria-components";
 import { Button } from "../Button";
 import { DateInput } from "../DateField";
-import { Dialog } from "../Dialog";
 import { FieldDescription, FieldError, FieldGroup, Label } from "../Field";
 import { Popover } from "../Popover";
 import { RangeCalendar } from "../RangeCalendar";
@@ -50,10 +49,8 @@ export function DateRangePicker<T extends DateValue>({
       </FieldGroup>
       {description && <FieldDescription>{description}</FieldDescription>}
       <FieldError>{errorMessage}</FieldError>
-      <Popover>
-        <Dialog>
-          <RangeCalendar />
-        </Dialog>
+      <Popover title="Select a date range">
+        <RangeCalendar />
       </Popover>
     </AriaDateRangePicker>
   );

src/components/common/Menu/Menu.stories.tsx

@@ -70,7 +70,7 @@ export const Submenu = (args: any) => (
       <MenuItem id="new">New…</MenuItem>
       <SubmenuTrigger>
         <MenuItem id="open">Open</MenuItem>
-        <Popover>
+        <Popover title="Open in">
           <Menu>
             <MenuItem id="open-new">Open in New Window</MenuItem>
             <MenuItem id="open-current">Open in Current Window</MenuItem>
@@ -81,13 +81,13 @@ export const Submenu = (args: any) => (
       <MenuItem id="print">Print…</MenuItem>
       <SubmenuTrigger>
         <MenuItem id="share">Share</MenuItem>
-        <Popover>
+        <Popover title="Share">
           <Menu>
             <MenuItem id="sms">SMS</MenuItem>
             <MenuItem id="twitter">Twitter</MenuItem>
             <SubmenuTrigger>
               <MenuItem id="email">Email</MenuItem>
-              <Popover>
+              <Popover title="Email">
                 <Menu>
                   <MenuItem id="work">Work</MenuItem>
                   <MenuItem id="personal">Personal</MenuItem>

src/components/common/Menu/Menu.tsx

@@ -34,7 +34,11 @@ export function MenuTrigger(props: MenuTriggerProps) {
 
 export function Menu<T extends object>(props: MenuProps<T>) {
   return (
-    <Popover placement={props.placement} className="min-w-[150px]">
+    <Popover
+      title="Select an option"
+      placement={props.placement}
+      className="min-w-[150px]"
+    >
       <AriaMenu
         {...props}
         className="p-1 outline outline-0 max-h-[inherit] overflow-auto [clip-path:inset(0_0_0_0_round_.75rem)]"

src/components/common/Popover/Popover.stories.tsx

@@ -1,13 +1,14 @@
 import type { Meta } from "@storybook/react";
 import { CircleHelp } from "lucide-react";
-import { Heading } from "react-aria-components";
 import { Popover } from ".";
 import { Button } from "../Button";
-import { Dialog, DialogTrigger } from "../Dialog";
+import { DialogTrigger } from "../Dialog";
 
 const meta: Meta<typeof Popover> = {
   component: Popover,
-  args: {},
+  args: {
+    title: "Help",
+  },
 };
 
 export default meta;
@@ -18,14 +19,9 @@ export const Example = (args: any) => (
       <CircleHelp />
     </Button>
     <Popover {...args} className="max-w-[250px]">
-      <Dialog>
-        <Heading slot="title" className="text-lg font-semibold mb-2">
-          Help
-        </Heading>
-        <p className="text-sm">
-          For help accessing your account, please contact support.
-        </p>
-      </Dialog>
+      <p className="text-sm">
+        For help accessing your account, please contact support.
+      </p>
     </Popover>
   </DialogTrigger>
 );

src/components/common/Popover/Popover.tsx

@@ -11,6 +11,8 @@ import { Dialog } from "../Dialog";
 
 export interface PopoverProps extends Omit<AriaPopoverProps, "children"> {
   children: React.ReactNode;
+  /** Provide a screen reader title for the popover. */
+  title: string;
 }
 
 const styles = tv({
@@ -25,7 +27,12 @@ const styles = tv({
   },
 });
 
-export function Popover({ children, className, ...props }: PopoverProps) {
+export function Popover({
+  children,
+  className,
+  title,
+  ...props
+}: PopoverProps) {
   const popoverContext = useSlottedContext(PopoverContext)!;
   const isSubmenu = popoverContext?.trigger === "SubmenuTrigger";
   const offset = isSubmenu ? 2 : 8;
@@ -38,7 +45,7 @@ export function Popover({ children, className, ...props }: PopoverProps) {
         styles({ ...renderProps, className }),
       )}
     >
-      <Dialog>{children}</Dialog>
+      <Dialog aria-label={title}>{children}</Dialog>
     </AriaPopover>
   );
 }

src/components/common/Select/Select.tsx

@@ -66,7 +66,7 @@ export function Select<T extends object>({
       </Button>
       {description && <FieldDescription>{description}</FieldDescription>}
       <FieldError>{errorMessage}</FieldError>
-      <Popover className="min-w-[--trigger-width]">
+      <Popover title="Select an option" className="min-w-[--trigger-width]">
         <ListBox
           items={items}
           className="outline-none p-1 max-h-[inherit] overflow-auto [clip-path:inset(0_0_0_0_round_.75rem)]"

src/components/quests/StatGroup/StatGroup.tsx

@@ -20,7 +20,9 @@ export const StatPopover = ({ tooltip, children }: StatPopoverProps) => (
       </Button>
       <Tooltip>{tooltip}</Tooltip>
     </TooltipTrigger>
-    <Popover className="p-4">{children}</Popover>
+    <Popover title={tooltip} className="p-4">
+      {children}
+    </Popover>
   </DialogTrigger>
 );