fix: improve GroupCard keyboard accessibility

__tests__/components/groups/page/list/card/GroupCard.test.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { render, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import GroupCard, {
   GroupCardState,
 } from "@/components/groups/page/list/card/GroupCard";
@@ -30,6 +31,10 @@ jest.mock(
 const push = jest.fn();
 (useRouter as jest.Mock).mockReturnValue({ push });
 
+beforeEach(() => {
+  push.mockClear();
+});
+
 describe("GroupCard", () => {
   const group: any = {
     id: "g1",
@@ -61,8 +66,30 @@ describe("GroupCard", () => {
   }
 
   it("navigates to community view when idle", () => {
-    renderComp();
-    fireEvent.click(document.querySelector("div.tw-col-span-1")!);
+    const { getByRole } = renderComp();
+    fireEvent.click(getByRole("button"));
+    expect(push).toHaveBeenCalledWith(`/network?page=1&group=${group.id}`);
+  });
+
+  it("navigates to community view when pressing Enter", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderComp();
+    const button = getByRole("button");
+
+    button.focus();
+    await user.keyboard("{Enter}");
+
+    expect(push).toHaveBeenCalledWith(`/network?page=1&group=${group.id}`);
+  });
+
+  it("navigates to community view when pressing Space", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderComp();
+    const button = getByRole("button");
+
+    button.focus();
+    await user.keyboard(" ");
+
     expect(push).toHaveBeenCalledWith(`/network?page=1&group=${group.id}`);
   });
 

components/groups/page/list/card/GroupCard.tsx

@@ -105,29 +105,33 @@ export default function GroupCard({
     ),
   };
 
-  const goToCommunityView = () => {
-    if (state !== GroupCardState.IDLE) return;
-    router.push(`/network?page=1&group=${group?.id}`);
-  };
+  const isIdle = state === GroupCardState.IDLE;
+  const cardLabel =
+    group?.name ?? titlePlaceholder ?? "View community group details";
 
   return (
-    <div
-      className={`${
-        state === GroupCardState.IDLE && "tw-group tw-cursor-pointer"
-      } tw-col-span-1`}
-      onClick={goToCommunityView}>
-      <div
-        className="tw-relative tw-w-full tw-h-9 tw-rounded-t-2xl"
-        style={{
-          background: `linear-gradient(45deg, ${banner1} 0%, ${banner2} 100%)`,
-        }}>
-        <div className="tw-absolute tw-inset-0 tw-rounded-t-2xl tw-ring-[1.5px] tw-ring-white/20 group-hover:tw-ring-white/40 tw-ring-inset tw-pointer-events-none tw-transition tw-duration-500 tw-ease-out"></div>
-      </div>
-      <div
-        className={` ${
-          connectedProfile?.handle ? "tw-min-h-[134px]" : "tw-h-[123.5px]"
-        } -tw-mt-1 tw-bg-iron-900 tw-flex tw-flex-col tw-rounded-b-2xl tw-relative tw-border-[1.5px] tw-border-solid tw-border-t-0 tw-border-iron-700 group-hover:tw-border-iron-600 tw-transition tw-duration-500 tw-ease-out`}>
-        {components[state]}
+    <div className="tw-col-span-1 tw-relative">
+      {isIdle && (
+        <button
+          type="button"
+          onClick={() => router.push(`/network?page=1&group=${group?.id}`)}
+          className="tw-absolute tw-inset-0 tw-z-10 tw-rounded-2xl tw-border-0 tw-bg-transparent tw-p-0 tw-cursor-pointer focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-primary-500"
+          aria-label={`Open ${cardLabel}`}></button>
+      )}
+      <div className={isIdle ? "tw-group" : ""}>
+        <div
+          className="tw-relative tw-w-full tw-h-9 tw-rounded-t-2xl"
+          style={{
+            background: `linear-gradient(45deg, ${banner1} 0%, ${banner2} 100%)`,
+          }}>
+          <div className="tw-absolute tw-inset-0 tw-rounded-t-2xl tw-ring-[1.5px] tw-ring-white/20 group-hover:tw-ring-white/40 tw-ring-inset tw-pointer-events-none tw-transition tw-duration-500 tw-ease-out"></div>
+        </div>
+        <div
+          className={`${
+            connectedProfile?.handle ? "tw-min-h-[134px]" : "tw-h-[123.5px]"
+          } -tw-mt-1 tw-bg-iron-900 tw-flex tw-flex-col tw-rounded-b-2xl tw-relative tw-border-[1.5px] tw-border-solid tw-border-t-0 tw-border-iron-700 group-hover:tw-border-iron-600 tw-transition tw-duration-500 tw-ease-out`}>
+          {components[state]}
+        </div>
       </div>
     </div>
   );

components/groups/page/list/card/GroupCardConfigs.tsx

@@ -203,7 +203,7 @@ export default function GroupCardConfigs({
               scrollContainer("left");
             }}
             aria-label="Scroll left"
-            className="tw-inline-flex tw-items-center tw-justify-center tw-group tw-absolute tw-top-0.5 tw-z-[5] tw-p-0 tw-h-7 tw-w-7 tw-left-0 tw-bg-iron-900 hover:tw-bg-iron-800 tw-ring-1 tw-ring-inset tw-ring-iron-650 tw-rounded-md tw-border-none tw-transition tw-duration-300 tw-ease-out">
+            className="tw-inline-flex tw-items-center tw-justify-center tw-group tw-absolute tw-top-0.5 tw-z-[20] tw-p-0 tw-h-7 tw-w-7 tw-left-0 tw-bg-iron-900 hover:tw-bg-iron-800 tw-ring-1 tw-ring-inset tw-ring-iron-650 tw-rounded-md tw-border-none tw-transition tw-duration-300 tw-ease-out">
             <svg
               className="tw-h-5 tw-w-5 tw-text-iron-300 group-hover:tw-text-iron-50 tw-rotate-90 tw-transition tw-duration-300 tw-ease-out"
               viewBox="0 0 24 24"
@@ -235,7 +235,7 @@ export default function GroupCardConfigs({
               scrollContainer("right");
             }}
             aria-label="Scroll right"
-            className="tw-inline-flex tw-items-center tw-justify-center tw-group tw-absolute tw-top-0.5 tw-z-[5] tw-p-0 tw-h-7 tw-w-7 tw-right-0 tw-bg-iron-900 hover:tw-bg-iron-800 tw-ring-1 tw-ring-inset tw-ring-iron-650 tw-rounded-md tw-border-none tw-transition tw-duration-300 tw-ease-out">
+            className="tw-inline-flex tw-items-center tw-justify-center tw-group tw-absolute tw-top-0.5 tw-z-[20] tw-p-0 tw-h-7 tw-w-7 tw-right-0 tw-bg-iron-900 hover:tw-bg-iron-800 tw-ring-1 tw-ring-inset tw-ring-iron-650 tw-rounded-md tw-border-none tw-transition tw-duration-300 tw-ease-out">
             <svg
               className="tw-h-5 tw-w-5 tw-text-iron-300 group-hover:tw-text-iron-50 -tw-rotate-90 tw-transition tw-duration-300 tw-ease-out"
               viewBox="0 0 24 24"

components/groups/page/list/card/GroupCardContent.tsx

@@ -41,7 +41,7 @@ export default function GroupCardContent({
               disabled={haveActiveGroupVoteAll}
               className={`${
                 haveActiveGroupVoteAll ? disabledClasses : nonDisabledClasses
-              } tw-whitespace-nowrap tw-inline-flex tw-items-center tw-bg-iron-800 tw-border tw-border-solid tw-rounded-lg tw-px-3 tw-py-2 tw-text-sm tw-font-semibold tw-shadow-sm focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-iron-700 tw-transition tw-duration-300 tw-ease-out`}>
+              } tw-relative tw-z-20 tw-whitespace-nowrap tw-inline-flex tw-items-center tw-bg-iron-800 tw-border tw-border-solid tw-rounded-lg tw-px-3 tw-py-2 tw-text-sm tw-font-semibold tw-shadow-sm focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-iron-700 tw-transition tw-duration-300 tw-ease-out`}>
               Rep all
             </button>
             <button
@@ -53,7 +53,7 @@ export default function GroupCardContent({
               disabled={haveActiveGroupVoteAll}
               className={`${
                 haveActiveGroupVoteAll ? disabledClasses : nonDisabledClasses
-              } tw-whitespace-nowrap tw-inline-flex tw-items-center tw-bg-iron-800 tw-border tw-border-solid tw-rounded-lg tw-px-3 tw-py-2 tw-text-sm tw-font-semibold tw-shadow-sm focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-iron-700 tw-transition tw-duration-300 tw-ease-out`}>
+              } tw-relative tw-z-20 tw-whitespace-nowrap tw-inline-flex tw-items-center tw-bg-iron-800 tw-border tw-border-solid tw-rounded-lg tw-px-3 tw-py-2 tw-text-sm tw-font-semibold tw-shadow-sm focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-iron-700 tw-transition tw-duration-300 tw-ease-out`}>
               NIC all
             </button>
           </div>

components/groups/page/list/card/GroupCardHeader.tsx

@@ -49,7 +49,7 @@ export default function GroupCardHeader({
               ? `/${group?.created_by.handle ?? userPlaceholder}`
               : userPlaceholder ?? ""
           }
-          className="tw-no-underline hover:tw-underline tw-transition tw-duration-300 tw-ease-out  tw-text-iron-50 hover:tw-text-iron-400">
+          className="tw-relative tw-z-20 tw-no-underline hover:tw-underline tw-transition tw-duration-300 tw-ease-out  tw-text-iron-50 hover:tw-text-iron-400">
           <span className="tw-text-sm tw-font-semibold">
             {group?.created_by.handle ?? userPlaceholder}
           </span>

components/groups/page/list/card/actions/GroupCardEditActions.tsx

@@ -40,7 +40,7 @@ export default function GroupCardEditActions({
   useEffect(() => setEditTitle(getEditTitle()), [isMyFilter]);
 
   return (
-    <div className="tw-relative" ref={listRef}>
+    <div className="tw-relative tw-z-20" ref={listRef}>
       <button
         type="button"
         className="tw-bg-transparent tw-h-full tw-border-0 tw-block tw-text-iron-500 hover:tw-text-iron-50 tw-transition tw-duration-300 tw-ease-out"