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

…eractions (#4169) Co-authored-by: Nick Taylor <[email protected]> Co-authored-by: Brandon Roberts <[email protected]>
open-sauced · Oct 31, 2024 · f86e76b · f86e76b
1 parent 31b8486
commit f86e76b
Show file tree

Hide file tree

Showing 21 changed files with 76 additions and 73 deletions.
diff --git a/components/atoms/PillSelector/pill-selector.tsx b/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>
 

diff --git a/components/atoms/Radio/radio.tsx b/components/atoms/Radio/radio.tsx
@@ -14,12 +14,12 @@ interface RadioProps {
 
 const Radio = ({ className, withLabel, id, children, value, checked = false, onClick }: RadioProps): JSX.Element => {
   return (
-    <div
+    <button
       onClick={onClick}
       className={
         `${
           checked && "!bg-light-orange-3"
-        }  px-2 py-1.5 text-sm text-slate-600   group  rounded-md  hover:bg-light-orange-3 hover:text-slate-800 focus:outline-none focus-visible:border-orange-500 focus-visible:ring focus-visible:ring-orange-200 transition` +
+        }  w-full px-2 py-1.5 text-sm text-slate-600   group  rounded-md  hover:bg-light-orange-3 hover:text-slate-800 focus:outline-none focus-visible:border-orange-500 focus-visible:ring focus-visible:ring-orange-200 transition` +
         `${className}`
       }
     >
@@ -49,7 +49,7 @@ const Radio = ({ className, withLabel, id, children, value, checked = false, onC
           </span>
         )}
       </label>
-    </div>
+    </button>
   );
 };
 

diff --git a/components/atoms/RadioCheck/radio-check.tsx b/components/atoms/RadioCheck/radio-check.tsx
@@ -12,10 +12,10 @@ interface RadioCheckProps {
 
 const RadioCheck = ({ className, id, children, value, checked = false, onClick }: RadioCheckProps): JSX.Element => {
   return (
-    <div
+    <button
       onClick={onClick}
       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" +
+        "w-full 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}`
       }
     >
@@ -36,7 +36,7 @@ const RadioCheck = ({ className, id, children, value, checked = false, onClick }
         )}
         <span className="ml-3 leading-none my-auto">{children}</span>
       </label>
-    </div>
+    </button>
   );
 };
 

diff --git a/components/atoms/SVGIcon/svg-icon.tsx b/components/atoms/SVGIcon/svg-icon.tsx
@@ -11,7 +11,7 @@ interface IconProps {
 
 const SVGIcon: React.FC<IconProps> = ({ onClick, className, IconImage, size = 16 }) => {
   return (
-    <div className={clsx(`inline-flex`, className)} onClick={onClick}>
+    <button className={clsx(`inline-flex`, className)} onClick={onClick}>
       <svg>
         <use
           href={IconImage}
@@ -21,7 +21,7 @@ const SVGIcon: React.FC<IconProps> = ({ onClick, className, IconImage, size = 16
           style={{ stroke: "currentcolor", maxWidth: "100%", height: "auto" }}
         />
       </svg>
-    </div>
+    </button>
   );
 };
 

diff --git a/components/atoms/Search/search.tsx b/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}
@@ -141,7 +140,7 @@ const Search = ({
           <ScrollArea type="auto" className="h-60">
             {suggestionsLabel && suggestions.length > 0 ? <div className="pl-5 pt-4">{suggestionsLabel}</div> : null}
             {suggestions.map((suggestion, index) => (
-              <div
+              <button
                 className={clsx(
                   cursor === index && "_cursorActive bg-slate-100",
                   "px-4 py-2 hover:bg-light-slate-2",
@@ -162,7 +161,7 @@ const Search = ({
                 ) : (
                   suggestion.node
                 )}
-              </div>
+              </button>
             ))}
           </ScrollArea>
         </div>

diff --git a/components/atoms/TextInput/text-input.tsx b/components/atoms/TextInput/text-input.tsx
@@ -77,12 +77,12 @@ 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}>
+                <button title="Clear input" className="flex items-center ml-1" onClick={handleResetInput}>
                   <XCircleFillIcon
                     className={clsx(state === "invalid" && errorMsg ? "text-light-red-11" : "", "cursor-pointer")}
                     size={12}
                   />
-                </span>
+                </button>
               ) : (
                 ""
               )}

diff --git a/components/atoms/ToggleOption/toggle-option.tsx b/components/atoms/ToggleOption/toggle-option.tsx
@@ -8,7 +8,7 @@ interface ToogleOptionProps {
 }
 const ToggleOption = ({ optionText, withIcon, checked, handleToggle }: ToogleOptionProps): JSX.Element => {
   return (
-    <div
+    <button
       onClick={handleToggle}
       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"
     >
@@ -20,7 +20,7 @@ const ToggleOption = ({ optionText, withIcon, checked, handleToggle }: ToogleOpt
           className="text-light-slate-9"
         />
       )}
-    </div>
+    </button>
   );
 };
 export default ToggleOption;
diff --git a/components/molecules/AuthSection/auth-section.tsx b/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 (

diff --git a/components/molecules/CardRepoList/card-repo-list.tsx b/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 ? (
@@ -44,18 +53,7 @@ const CardRepoList = ({
             .filter((_, arrCount) => arrCount < limit)
             .map(({ repoOwner, repoName, repoIcon }, index) => {
               return (
-                <div
-                  key={`repo_${index}`}
-                  onClick={() => {
-                    if (!selectedRepo) {
-                      onSelect(`${repoOwner}/${repoName}`);
-                      setSelectedRepo(`${repoOwner}/${repoName}`);
-                    } else {
-                      onSelect("");
-                      setSelectedRepo("");
-                    }
-                  }}
-                >
+                <button key={`repo_${index}`} onClick={() => handleClick(repoOwner, repoName)}>
                   {repoName && repoIcon ? (
                     <Tooltip content={`${repoOwner}/${repoName}`}>
                       <div
@@ -89,7 +87,7 @@ const CardRepoList = ({
                   ) : (
                     ""
                   )}
-                </div>
+                </button>
               );
             })}
           <div>{repoTotal > limit ? `+${repoTotal - limit}` : null}</div>

diff --git a/components/molecules/ContributorFilterDropdown/contributor-filter-dropdown.tsx b/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(

diff --git a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx b/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 && (

diff --git a/components/molecules/ContributorListTableRow/contributor-list-table-row.tsx b/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>
 

diff --git a/components/molecules/DevCard/dev-card.tsx b/components/molecules/DevCard/dev-card.tsx
@@ -97,7 +97,7 @@ export default function DevCard(props: DevCardProps) {
       <div style={{ ...faceStyle }} className="DevCard-card relative rounded-xl w-full h-full border border-gray-400" />
     </animated.div>
   ) : (
-    <div
+    <button
       className="DevCard select-none"
       style={{
         width: "245px",
@@ -238,7 +238,7 @@ export default function DevCard(props: DevCardProps) {
           </div>
         </div>
       </Tilt>
-    </div>
+    </button>
   );
 }
 

diff --git a/components/molecules/HighlightInput/highlight-input-form.tsx b/components/molecules/HighlightInput/highlight-input-form.tsx
@@ -755,9 +755,10 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
                                 />
                               )}
                               <a
-                                href={suggestion.url}
+                                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"
                                 target="_blank"
-                                className="truncate max-w-[14rem] xs:max-w-[16rem] text-xs xs:text-sm"
+                                rel="noreferrer"
+                                href={suggestion.url}
                               >
                                 {suggestion.title}
                               </a>
@@ -846,7 +847,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
           className="fixed left-0 right-0 z-30 h-screen py-4 transition bg-white top-24 md:hidden"
         >
           <div className="flex items-center justify-between w-full px-2">
-            <button onClick={() => setIsFormOpenMobile(false)} type="button">
+            <button onClick={() => setIsFormOpenMobile(false)}>
               <IoClose className="text-2xl text-light-slate-10" />
             </button>
             <Button
@@ -1022,14 +1023,15 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
         </form>
       )}
 
-      <Fab className="md:hidden" onClick={() => setIsFormOpenMobile(true)}>
-        <span
-          className="outline-none p-3 mb-10 -mr-4 text-white rounded-full shadow-lg bg-light-orange-10"
+      <Fab className="md:hidden">
+        <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"
         >
           <span className="sr-only">Create a highlight</span>
           <RxPencil1 className="text-3xl" />
-        </span>
+        </button>
       </Fab>
     </>
   );

diff --git a/components/molecules/HighlightsFeedCard/highlights-filter-card.tsx b/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>

diff --git a/components/molecules/InfoCard/info-card.tsx b/components/molecules/InfoCard/info-card.tsx
@@ -9,7 +9,7 @@ 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}>
+    <button className="p-3 bg-white border-2 rounded-xl cursor-pointer" onClick={handleClick}>
       <div className="flex items-center gap-2.5">
         {/* Avatar */}
         {icon === "github" && <FiGithub size={24} className="text-orange-200" />}
@@ -21,7 +21,7 @@ const InfoCard = ({ icon, title, description, handleClick }: FavoriteRepoCardPro
           <div className="text-sm text-gray-400 tracking-tight -mt-0.5">{description}</div>
         </div>
       </div>
-    </div>
+    </button>
   );
 };
 

diff --git a/components/molecules/RepoRow/repo-row.tsx b/components/molecules/RepoRow/repo-row.tsx
@@ -169,12 +169,12 @@ const RepoRow = ({ repo, topic, userPage, selected, handleOnSelectRepo }: RepoPr
             )}
           </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>
 
@@ -225,9 +225,9 @@ const RepoRow = ({ repo, topic, userPage, selected, handleOnSelectRepo }: RepoPr
             </div>
           </div>
 
-          <div onClick={() => setTableOpen(!tableOpen)} className="py-1 mt-3 text-center border rounded-lg">
+          <button onClick={() => setTableOpen(!tableOpen)} className="py-1 mt-3 text-center border rounded-lg">
             Hide details
-          </div>
+          </button>
         </div>
       </div>
       <div className={`${classNames.row} `}>