From ec58b97552bddd28f4701fa9f62e0a05ec319fc1 Mon Sep 17 00:00:00 2001
From: Nick Taylor <nick@nickyt.co>
Date: Thu, 8 Aug 2024 11:14:30 -0400
Subject: [PATCH] fix: now layout toggles are radio buttons

---
 .../atoms/LayoutToggle/layout-toggle.tsx      | 26 ++++++++++++-------
 e2e/explore-page.spec.ts                      |  4 +++
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/components/atoms/LayoutToggle/layout-toggle.tsx b/components/atoms/LayoutToggle/layout-toggle.tsx
index 3a9bd7de2..6ff24b94b 100644
--- a/components/atoms/LayoutToggle/layout-toggle.tsx
+++ b/components/atoms/LayoutToggle/layout-toggle.tsx
@@ -16,26 +16,32 @@ const LayoutToggle = ({ value, onChange }: LayoutToggleProps) => {
 
   return (
     <div className="flex h-8 border rounded-lg shadow-xs w-28 p-[1px] text-light-slate-9">
-      <div
+      <button
+        role="radio"
+        aria-checked={value === "list"}
+        name="layout"
         onClick={() => handleToggle("list")}
-        role="toggle"
         className={clsx(
-          "flex items-center cursor-pointer justify-center flex-1 transition rounded-lg",
-          value === "list" && "bg-light-slate-4 "
+          "flex items-center cursor-pointer justify-center flex-1 transition rounded-lg border border-transparent",
+          value === "list" && "bg-light-slate-4"
         )}
       >
+        <span className="sr-only">Contributor list view</span>
         <BsListUl className="text-2xl" />
-      </div>
-      <div
+      </button>
+      <button
+        role="radio"
+        aria-checked={value === "grid"}
+        name="layout"
         onClick={() => handleToggle("grid")}
-        role="toggle"
         className={clsx(
-          "flex items-center justify-center flex-1 rounded-lg transition cursor-pointer",
-          value === "grid" && "bg-light-slate-4 "
+          "flex items-center justify-center flex-1 rounded-lg transition cursor-pointer border border-transparent",
+          value === "grid" && "bg-light-slate-4"
         )}
       >
+        <span className="sr-only">Contributor grid view</span>
         <BiGridAlt className="text-2xl" />
-      </div>
+      </button>
     </div>
   );
 };
diff --git a/e2e/explore-page.spec.ts b/e2e/explore-page.spec.ts
index e0da69a15..2a13ab542 100644
--- a/e2e/explore-page.spec.ts
+++ b/e2e/explore-page.spec.ts
@@ -32,6 +32,10 @@ test("Loads explore contributors page", async ({ page }) => {
   await expect(page.getByRole("button", { name: "7d" })).toBeVisible();
   await expect(page.getByRole("button", { name: "30d" })).toBeVisible();
   await expect(page.getByRole("button", { name: "3m" })).toBeVisible();
+
+  await expect(page.getByRole("radio", { name: "Contributor list view" })).toBeVisible();
+  await expect(page.getByRole("radio", { name: "Contributor list view" })).toBeChecked();
+  await expect(page.getByRole("radio", { name: "Contributor grid view" })).toBeVisible();
 });
 
 test("Loads explore activity page", async ({ page }) => {