refactor(SelectView): enhance accessibility and update test roles

- Introduced a unique ID for the dropdown in SelectView to improve accessibility.
- Updated aria attributes for better screen reader support, including aria-controls and aria-label.
- Changed test role assertions from "combobox" to "button" for consistency with the updated component structure in TaskListHeader and TaskContextMenu tests.
- Ensured all related tests reflect these changes, enhancing clarity and maintainability.

Author: tyler-dane

packages/web/src/components/SelectView/SelectView.tsx

@@ -96,6 +96,8 @@ export const SelectView = ({
     { route: ROOT_ROUTES.ROOT, label: "Week", view: "Week" as const },
   ];
 
+  const dropdownId = "view-select-dropdown";
+
   return (
     <div className="relative">
       <button
@@ -107,6 +109,8 @@ export const SelectView = ({
         }
         aria-expanded={isOpen}
         aria-haspopup="listbox"
+        aria-controls={isOpen ? dropdownId : undefined}
+        aria-label={`Select view, currently ${currentView}`}
       >
         <span>{buttonLabel}</span>
         <svg
@@ -141,6 +145,7 @@ export const SelectView = ({
               }
             },
           })}
+          id={dropdownId}
           data-testid="view-select-dropdown"
           className="inset-inline-end-0 absolute top-full z-50 mt-1 min-w-[140px] rounded border border-gray-600 bg-gray-800 py-1 shadow-lg"
           role="listbox"

packages/web/src/views/Day/components/ContextMenu/TaskContextMenu.test.tsx

@@ -152,7 +152,7 @@ describe("TaskContextMenu", () => {
     });
 
     // Click outside the menu (on the heading button)
-    const headingButton = screen.getByRole("combobox");
+    const headingButton = screen.getByRole("button", { name: /select view/i });
     await act(async () => {
       await user.click(headingButton);
     });

packages/web/src/views/Day/components/TaskList/TaskList.header.test.tsx

@@ -37,7 +37,7 @@ describe("TaskListHeader", () => {
   it("should render the today heading with current date", () => {
     renderTaskList();
 
-    const headingButton = screen.getByRole("combobox");
+    const headingButton = screen.getByRole("button", { name: /select view/i });
     const subheading = screen.getByRole("heading", { level: 3 });
     expect(headingButton).toBeInTheDocument();
     expect(subheading).toBeInTheDocument();
@@ -51,7 +51,7 @@ describe("TaskListHeader", () => {
 
     // Verify initial heading shows correct date
     const expectedInitialDate = format(testDate);
-    const headingButton = screen.getByRole("combobox");
+    const headingButton = screen.getByRole("button", { name: /select view/i });
     expect(headingButton).toHaveTextContent(expectedInitialDate);
 
     // Click the next day button
@@ -73,7 +73,7 @@ describe("TaskListHeader", () => {
 
     // Verify initial heading shows correct date
     const expectedInitialDate = format(testDate);
-    const headingButton = screen.getByRole("combobox");
+    const headingButton = screen.getByRole("button", { name: /select view/i });
     expect(headingButton).toHaveTextContent(expectedInitialDate);
 
     // Click the previous day button
@@ -93,7 +93,7 @@ describe("TaskListHeader", () => {
     const testDate = createUtcDate("2025-01-15T12:00:00Z");
     const { user } = renderTaskList({}, testDate);
 
-    const headingButton = screen.getByRole("combobox");
+    const headingButton = screen.getByRole("button", { name: /select view/i });
     const nextButton = screen.getByRole("button", { name: "Next day" });
     const prevButton = screen.getByRole("button", { name: "Previous day" });
 
@@ -129,7 +129,7 @@ describe("TaskListHeader", () => {
     const { user } = renderTaskList({}, testDate);
 
     const initialDate = format(testDate);
-    const headingButton = screen.getByRole("combobox");
+    const headingButton = screen.getByRole("button", { name: /select view/i });
     const nextButton = screen.getByRole("button", { name: "Next day" });
 
     // Verify initial date is end of January
@@ -172,7 +172,7 @@ describe("TaskListHeader", () => {
     const { user } = renderTaskList({}, testDate);
 
     const expectedInitialDate = format(testDate);
-    const headingButton = screen.getByRole("combobox");
+    const headingButton = screen.getByRole("button", { name: /select view/i });
     const goToTodayButton = screen.getByRole("button", { name: "Go to today" });
 
     // Verify initial heading shows the test date
@@ -227,7 +227,7 @@ describe("TaskListHeader - Timezone Handling", () => {
     // Should show local date (Oct 19), not UTC date (Oct 20)
     const localDate = utcDayjs.local();
     const expectedHeading = localDate.format(DAY_HEADING_FORMAT);
-    const headingButton = screen.getByRole("combobox");
+    const headingButton = screen.getByRole("button", { name: /select view/i });
     const subheading = screen.getByRole("heading", { level: 3 });
 
     expect(headingButton).toHaveTextContent(expectedHeading);