fix: a11y fail click events have key events and no static element interactions

components/atoms/PillSelector/pill-selector.tsx

@@ -63,13 +63,13 @@ const PillSelector: React.FC<PillSelectorProps> = ({
       <PillSelectorButton>
         {selected ? (
           <>
-            <div onClick={toggleFilter}>
+            <button onClick={toggleFilter}>
               {pillOptions.find((option) => option.toLowerCase().replaceAll(" ", "-") === selected)}
-            </div>
+            </button>
             <Icon IconImage={cancelIcon} onClick={handleCancelClick} />
           </>
         ) : (
-          <div onClick={toggleFilter}>Add Filter</div>
+          <button onClick={toggleFilter}>Add Filter</button>
         )}
       </PillSelectorButton>
 

components/atoms/Radio/radio.tsx

@@ -16,6 +16,14 @@ const Radio = ({ className, withLabel, id, children, value, checked = false, onC
   return (
     <div
       onClick={onClick}
+      onKeyDown={(e) => {
+        if (onClick && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          onClick();
+        }
+      }}
+      tabIndex={0}
+      role="button"
       className={
         `${
           checked && "!bg-light-orange-3"

components/atoms/RadioCheck/radio-check.tsx

@@ -14,6 +14,14 @@ const RadioCheck = ({ className, id, children, value, checked = false, onClick }
   return (
     <div
       onClick={onClick}
+      onKeyDown={(e) => {
+        if (onClick && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          onClick();
+        }
+      }}
+      tabIndex={0}
+      role="button"
       className={
         "px-2 py-1.5 text-sm text-black group  rounded-md  hover:bg-light-orange-3 hover:text-light-orange-9 hover:text-slate-800 focus:outline-none focus-visible:border-orange-500 focus-visible:ring focus-visible:ring-orange-200 transition" +
         `${className}`

components/atoms/SVGIcon/svg-icon.tsx

@@ -11,17 +11,26 @@ interface IconProps {
 
 const SVGIcon: React.FC<IconProps> = ({ onClick, className, IconImage, size = 16 }) => {
   return (
-    <div className={clsx(`inline-flex`, className)} onClick={onClick}>
-      <svg>
-        <use
-          href={IconImage}
-          width={size}
-          height={size}
-          className="items-center justify-center"
-          style={{ stroke: "currentcolor", maxWidth: "100%", height: "auto" }}
-        />
-      </svg>
-    </div>
+    <svg
+      className={clsx(`inline-flex`, className)}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (onClick && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          onClick();
+        }
+      }}
+      tabIndex={0}
+      role="button"
+    >
+      <use
+        href={IconImage}
+        width={size}
+        height={size}
+        className="items-center justify-center"
+        style={{ stroke: "currentcolor", maxWidth: "100%", height: "auto" }}
+      />
+    </svg>
   );
 };
 

components/atoms/Search/search.tsx

@@ -119,7 +119,6 @@ const Search = ({
       <FaSearch className="text-light-slate-9" fontSize={16} onClick={handleOnSearch} />
       <input
         className="w-full pl-2 placeholder:text-sm focus:outline-none placeholder:text-slate-400 disabled:cursor-not-allowed"
-        autoFocus={autoFocus}
         placeholder={placeholder}
         name={name}
         value={search}
@@ -150,10 +149,19 @@ const Search = ({
                 style={suggestionsStyle}
                 key={index}
                 data-suggestion={typeof suggestion === "string" ? suggestion : suggestion.key}
+                role="button"
                 onClick={(event) => {
                   const { suggestion } = (event.currentTarget as HTMLElement).dataset;
                   suggestion && handleOnSelect(suggestion);
                 }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    const { suggestion } = (e.currentTarget as HTMLElement).dataset;
+                    suggestion && handleOnSelect(suggestion);
+                  }
+                }}
+                tabIndex={0}
               >
                 {typeof suggestion === "string" ? (
                   <span className="pl-5 text-sm md:mw-auto inline-block text-ellipsis truncate tracking-tighter">

components/atoms/TextInput/text-input.tsx

@@ -77,7 +77,19 @@ const TextInput = ({
               {state === "valid" ? (
                 <CheckCircleFillIcon className="ml-1 text-light-orange-9" size={12} />
               ) : !!value ? (
-                <span title="Clear input" className="flex items-center ml-1" onClick={handleResetInput}>
+                <span
+                  title="Clear input"
+                  className="flex items-center ml-1"
+                  role="button"
+                  onClick={handleResetInput}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      handleResetInput();
+                    }
+                  }}
+                  tabIndex={0}
+                >
                   <XCircleFillIcon
                     className={clsx(state === "invalid" && errorMsg ? "text-light-red-11" : "", "cursor-pointer")}
                     size={12}

components/atoms/ToggleOption/toggle-option.tsx

@@ -10,6 +10,15 @@ const ToggleOption = ({ optionText, withIcon, checked, handleToggle }: ToogleOpt
   return (
     <div
       onClick={handleToggle}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          handleToggle();
+        }
+      }}
+      role="switch"
+      aria-checked={checked}
+      tabIndex={0}
       className="inline-flex cursor-pointer items-center gap-2 rounded-md px-2 py-0.5 border border-light-slate-6 bg-light-slate-1"
     >
       <ToggleSwitch ariaLabel={optionText} size="sm" handleToggle={handleToggle} name={optionText} checked={checked} />

components/molecules/AuthSection/auth-section.tsx

@@ -83,7 +83,7 @@ const AuthSection: React.FC = ({}) => {
         <FiSettings className="group-hover:text-light-orange-10" />
         <Text className="group-hover:text-light-orange-10">Settings</Text>
       </Link>,
-      <span
+      <button
         onClick={async () => {
           const pageHref = window.location.href;
           const searchParams = new URLSearchParams(pageHref.substring(pageHref.indexOf("?")));
@@ -99,7 +99,7 @@ const AuthSection: React.FC = ({}) => {
       >
         <FiLogOut className="group-hover:text-light-orange-10" />
         <Text className="group-hover:text-light-orange-10">Disconnect</Text>
-      </span>,
+      </button>,
     ],
   };
   return (

components/molecules/CardRepoList/card-repo-list.tsx

@@ -36,6 +36,15 @@ const CardRepoList = ({
   const sanitizedRepoList = [...new Map(repoList.map((item) => [item["repoName"], item])).values()];
   const [selectedRepo, setSelectedRepo] = useState<string>("");
 
+  const handleClick = (repoOwner: any, repoName: string) => {
+    if (!selectedRepo) {
+      onSelect(`${repoOwner}/${repoName}`);
+      setSelectedRepo(`${repoOwner}/${repoName}`);
+    } else {
+      onSelect("");
+      setSelectedRepo("");
+    }
+  };
   return (
     <div className="flex gap-1 items-center max-w[175px] truncate flex-wrap text-xs text-light-slate-9">
       {repoList.length > 0 ? (
@@ -46,15 +55,15 @@ const CardRepoList = ({
               return (
                 <div
                   key={`repo_${index}`}
-                  onClick={() => {
-                    if (!selectedRepo) {
-                      onSelect(`${repoOwner}/${repoName}`);
-                      setSelectedRepo(`${repoOwner}/${repoName}`);
-                    } else {
-                      onSelect("");
-                      setSelectedRepo("");
+                  role="button"
+                  onClick={() => handleClick(repoOwner, repoName)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      handleClick(repoOwner, repoName);
                     }
                   }}
+                  tabIndex={0}
                 >
                   {repoName && repoIcon ? (
                     <Tooltip content={`${repoOwner}/${repoName}`}>
@@ -91,7 +100,7 @@ const CardRepoList = ({
                   )}
                 </div>
               );
-            })}
+            })}{" "}
           <div>{repoTotal > limit ? `+${repoTotal - limit}` : null}</div>
         </>
       ) : (

components/molecules/ContributorFilterDropdown/contributor-filter-dropdown.tsx

@@ -39,7 +39,7 @@ const ContributorFilterDropdown = () => {
 
   return (
     <div ref={ref} className="flex flex-col px-3 border rounded-lg shadow w-max">
-      <div
+      <button
         onClick={() => setOpen((prev) => !prev)}
         className="flex items-center justify-between text-sm font-normal cursor-pointer text-light-slate-9 w-44 "
       >
@@ -49,7 +49,7 @@ const ContributorFilterDropdown = () => {
           <BiChevronUp className="text-lg translate-y-1.5" />
           <BiChevronDown className="text-lg -translate-y-1.5" />
         </div>
-      </div>
+      </button>
 
       <div
         className={clsx(

components/molecules/ContributorHighlight/contributor-highlight-card.tsx

@@ -543,25 +543,25 @@ const ContributorHighlightCard = ({
                   <DropdownMenuItem
                     className={`rounded-md ${loggedInUser?.user_metadata?.user_name === user && "hidden"}`}
                   >
-                    <div
+                    <button
                       onClick={isError ? follow : unFollow}
                       className="flex gap-2.5 py-1 items-center pl-3 pr-7 cursor-pointer"
                     >
                       <FaUserPlus size={22} />
                       <span>
                         {!isError ? "Unfollow" : "Follow"} {user}
                       </span>
-                    </div>
+                    </button>
                   </DropdownMenuItem>
                 ) : (
                   <DropdownMenuItem className="rounded-md">
-                    <div
+                    <button
                       onClick={async () => signIn({ provider: "github" })}
                       className="flex gap-2.5 py-1  items-center pl-3 pr-7"
                     >
                       <FaUserPlus size={22} />
                       <span>Follow {user}</span>
-                    </div>
+                    </button>
                   </DropdownMenuItem>
                 )}
                 {loggedInUser && (

components/molecules/ContributorListTableRow/contributor-list-table-row.tsx

@@ -143,12 +143,12 @@ const ContributorListTableRow = ({
             </div>
           </div>
           <div>
-            <div
+            <button
               onClick={() => setTableOpen(!tableOpen)}
               className="items-center justify-between w-6 h-6 p-1 border rounded-md "
             >
               {tableOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
-            </div>
+            </button>
           </div>
         </div>
 

components/molecules/DevCard/dev-card.tsx

@@ -40,7 +40,7 @@ export default function DevCard(props: DevCardProps) {
     }
   }, [props.isInteractive, props.isFlipped]);
 
-  function handleCardClick(event: React.MouseEvent<HTMLElement, MouseEvent>) {
+  function handleCardClick(event: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) {
     if (!isInteractive) {
       return;
     }
@@ -103,7 +103,15 @@ export default function DevCard(props: DevCardProps) {
         width: "245px",
         height: "348px",
       }}
+      tabIndex={0}
+      role="button"
       onClick={handleCardClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          handleCardClick(e);
+        }
+      }}
     >
       <Tilt
         tiltEnable={isInteractive}

components/molecules/HighlightInput/highlight-input-form.tsx

@@ -754,14 +754,14 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
                                   }`}
                                 />
                               )}
-                              <p
+                              <a
                                 className="text-light-slate-11 truncate max-w-[14rem] xs:max-w-[16rem] text-xs xs:text-sm cursor-pointer hover:text-orange-600 transition"
-                                onClick={() => {
-                                  window.open(suggestion.url, "_blank");
-                                }}
+                                target="_blank"
+                                rel="noreferrer"
+                                href={suggestion.url}
                               >
                                 {suggestion.title}
-                              </p>
+                              </a>
                             </div>
                             <Tooltip className="text-xs modal-tooltip" direction="top" content="Fill content">
                               <button
@@ -1024,13 +1024,13 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
       )}
 
       <Fab className="md:hidden">
-        <div
+        <button
           onClick={() => setIsFormOpenMobile(true)}
           className="p-3 mb-10 -mr-4 text-white rounded-full shadow-lg bg-light-orange-10"
           id="mobile-highlight-create"
         >
           <RxPencil1 className="text-3xl" />
-        </div>
+        </button>
       </Fab>
     </>
   );

components/molecules/HighlightsFeedCard/highlights-filter-card.tsx

@@ -21,7 +21,7 @@ const HighlightsFilterCard = ({ repos, setSelected, selectedFilter }: Highlights
       <p className="mb-2 text-sm font-normal text-light-slate-11">Click to filter the highlights</p>
       <div className="flex flex-col gap-2 pt-4 border-t">
         {repos.map(({ repoName, repoIcon, full_name }) => (
-          <div
+          <button
             onClick={() => handleClick(full_name)}
             key={full_name as string}
             className={`${
@@ -30,7 +30,7 @@ const HighlightsFilterCard = ({ repos, setSelected, selectedFilter }: Highlights
           >
             <Icon IconImage={repoIcon} className="rounded-[4px] overflow-hidden" />
             <span className="max-w-[45px] md:max-w-[100px] truncate text-xs ">{repoName}</span>
-          </div>
+          </button>
         ))}
       </div>
     </aside>

components/molecules/InfoCard/info-card.tsx

@@ -9,7 +9,18 @@ export interface FavoriteRepoCardProps {
 
 const InfoCard = ({ icon, title, description, handleClick }: FavoriteRepoCardProps): JSX.Element => {
   return (
-    <div className="p-3 bg-white border-2 rounded-xl cursor-pointer" onClick={handleClick}>
+    <div
+      className="p-3 bg-white border-2 rounded-xl cursor-pointer"
+      onClick={handleClick}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          handleClick();
+        }
+      }}
+    >
       <div className="flex items-center gap-2.5">
         {/* Avatar */}
         {icon === "github" && <FiGithub size={24} className="text-orange-200" />}