fix(date-picker): improve calendar accessibility

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

packages/ui/src/components/date-picker.test.tsx

@@ -3,6 +3,12 @@ import { describe, expect, it, vi } from "vitest";
 
 import { DatePicker } from "./date-picker";
 
+function getCalendarDayButtons(dialogName: string) {
+  return within(screen.getByRole("dialog", { name: dialogName }))
+    .getAllByRole("button")
+    .filter((button) => button.getAttribute("data-slot") === "day");
+}
+
 describe("DatePicker", () => {
   it("renders a placeholder and selects a date in uncontrolled mode", async () => {
     render(
@@ -16,8 +22,7 @@ describe("DatePicker", () => {
     const field = screen.getByRole("combobox", { name: "Launch date" });
     expect(field.closest('[data-slot="root"]')).toHaveAttribute("data-placeholder", "");
 
-    const calendar = screen.getByRole("grid");
-    const dayButton = within(calendar).getAllByRole("gridcell")[10];
+    const dayButton = getCalendarDayButtons("Launch date calendar")[10];
 
     fireEvent.click(dayButton);
 
@@ -38,7 +43,7 @@ describe("DatePicker", () => {
     );
 
     fireEvent.click(
-      screen.getByRole("gridcell", {
+      screen.getByRole("button", {
         name: /Apr 20, 2026|20 Apr 2026|Apr 20 2026/i
       })
     );
@@ -96,7 +101,7 @@ describe("DatePicker", () => {
       />
     );
 
-    const firstDay = within(screen.getByRole("grid")).getAllByRole("gridcell")[0];
+    const firstDay = getCalendarDayButtons("Monday-first date calendar")[0];
 
     expect(firstDay).toHaveAccessibleName("Feb 23, 2026");
     expect(screen.getByText("Mon")).toBeInTheDocument();
@@ -113,7 +118,7 @@ describe("DatePicker", () => {
       />
     );
 
-    const firstDay = within(screen.getByRole("grid")).getAllByRole("gridcell")[0];
+    const firstDay = getCalendarDayButtons("Sunday-first date calendar")[0];
 
     expect(firstDay).toHaveAccessibleName("Mar 1, 2026");
     expect(screen.getByText("Sun")).toBeInTheDocument();
@@ -130,9 +135,9 @@ describe("DatePicker", () => {
       />
     );
 
-    const disabledDays = screen
-      .getAllByRole("gridcell")
-      .filter((cell) => cell.hasAttribute("data-disabled"));
+    const disabledDays = getCalendarDayButtons("Guardrailed date calendar").filter((cell) =>
+      cell.hasAttribute("data-disabled")
+    );
 
     expect(disabledDays.length).toBeGreaterThan(0);
   });