fix(#2929): add keyboard handlers to non-interactive elements

Author: MSzalowski

CHANGELOG.md

@@ -15,6 +15,7 @@ changes.
 - Add metadata url and hash to drep details [Issue 2911](https://github.com/IntersectMBO/govtool/issues/2911)
 - Add CC votes percentages, not voted and Ratification threshold
 - Add support for submitting all 7 governance action types [Issue 2258](https://github.com/IntersectMBO/govtool/issues/2258)
+- Add click handlers to non-interactive elements [Issue 2929](https://github.com/IntersectMBO/govtool/issues/2929)
 
 ### Fixed
 

govtool/frontend/src/components/atoms/CopyButton.tsx

@@ -41,6 +41,13 @@ export const CopyButton = ({ isChecked, text, variant }: Props) => {
       }}
       src={iconSrc}
       style={{ cursor: "pointer" }}
+      onKeyDown={(e) => {
+        if (e.ctrlKey && e.key === "c") {
+          navigator.clipboard.writeText(text);
+          addSuccessAlert(t("alerts.copiedToClipboard"));
+          e.stopPropagation();
+        }
+      }}
     />
   );
 };

govtool/frontend/src/components/atoms/StakeRadio.tsx

@@ -57,14 +57,20 @@ export const StakeRadio: FC<StakeRadioProps> = ({ ...props }) => {
           >
             {stakeKey}
           </Typography>
-          <IconButton color="primary">
+          <IconButton color="primary" tabIndex={0}>
             <img
               alt="copy"
               onClick={(e) => {
                 navigator.clipboard.writeText(stakeKey);
                 e.stopPropagation();
               }}
               src={isChecked ? ICONS.copyWhiteIcon : ICONS.copyIcon}
+              onKeyDown={(e) => {
+                if (e.ctrlKey && e.key === "c") {
+                  navigator.clipboard.writeText(stakeKey);
+                  e.stopPropagation();
+                }
+              }}
             />
           </IconButton>
         </Box>

govtool/frontend/src/components/molecules/CopyableInfo.tsx

@@ -33,7 +33,7 @@ export const CopyableInfo = ({
     <Typography color={gray.c300} fontSize={12} fontWeight={500}>
       {label}
     </Typography>
-    <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+    <Box sx={{ display: "flex", justifyContent: "space-between" }} tabIndex={0}>
       <Typography
         textOverflow="ellipsis"
         overflow="hidden"

govtool/frontend/src/components/molecules/DRepInfoCard.tsx

@@ -18,7 +18,10 @@ export const DRepInfoCard = () => {
 
   return (
     <Card border elevation={0} sx={{ p: 1.5 }}>
-      <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+      <Box
+        sx={{ display: "flex", justifyContent: "space-between" }}
+        tabIndex={0}
+      >
         <Typography color={gray.c300} fontSize={12} fontWeight={500}>
           {t("myDRepId")}
         </Typography>

govtool/frontend/src/components/molecules/GovernanceActionCardElement.tsx

@@ -198,6 +198,16 @@ export const GovernanceActionCardElement = ({
                       },
                     });
                   }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      openModal({
+                        type: "externalLink",
+                        state: {
+                          externalLink: text.toString(),
+                        },
+                      });
+                    }
+                  }}
                 />
               </Box>
             )}

govtool/frontend/src/components/molecules/GovernanceActionDetailsCardLinks.tsx

@@ -90,6 +90,16 @@ export const GovernanceActionDetailsCardLinks = ({
                         },
                       });
                     }}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        openModal({
+                          type: "externalLink",
+                          state: {
+                            externalLink: uri,
+                          },
+                        });
+                      }
+                    }}
                   />
                 </Box>
               )}

govtool/frontend/src/components/organisms/TopNav.tsx

@@ -14,7 +14,10 @@ import { DrawerMobile } from "./DrawerMobile";
 const POSITION_TO_BLUR = 50;
 
 export const TopNav = ({ isConnectButton = true }) => {
-  const { isProposalDiscussionForumEnabled, isGovernanceOutcomesPillarEnabled } = useFeatureFlag();
+  const {
+    isProposalDiscussionForumEnabled,
+    isGovernanceOutcomesPillarEnabled,
+  } = useFeatureFlag();
   const containerRef = useRef<HTMLDivElement>(null);
   const [shouldBlur, setShouldBlur] = useState<boolean>(false);
   const { openModal } = useModal();
@@ -189,6 +192,7 @@ export const TopNav = ({ isConnectButton = true }) => {
                   alt="drawer-icon"
                   src={ICONS.drawerIcon}
                   onClick={openDrawer}
+                  onKeyDown={(e) => e.key === "Enter" && openDrawer()}
                   data-testid="open-drawer-button"
                 />
               )}