fix: a11y rule "no-noninteractive-element-interactions" (#4163)

Author: Dun-sin

components/atoms/Fab/fab.tsx

@@ -5,7 +5,7 @@ interface FabProps extends React.HTMLAttributes<HTMLButtonElement> {
   position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
   onClick?: () => void;
 }
-const Fab = ({ position, children, className }: FabProps) => {
+const Fab = ({ position, children, className, onClick }: FabProps) => {
   const getFabPositionStyles = () => {
     switch (position) {
       case "top-left":
@@ -21,7 +21,7 @@ const Fab = ({ position, children, className }: FabProps) => {
     }
   };
   return (
-    <button type="button" className={clsx("fixed", getFabPositionStyles(), className)}>
+    <button type="button" onClick={onClick} className={clsx("fixed", getFabPositionStyles(), className)}>
       {children}
     </button>
   );

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

@@ -754,14 +754,13 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
                                   }`}
                                 />
                               )}
-                              <p
-                                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");
-                                }}
+                              <a
+                                href={suggestion.url}
+                                target="_blank"
+                                className="truncate max-w-[14rem] xs:max-w-[16rem] text-xs xs:text-sm"
                               >
                                 {suggestion.title}
-                              </p>
+                              </a>
                             </div>
                             <Tooltip className="text-xs modal-tooltip" direction="top" content="Fill content">
                               <button
@@ -1023,14 +1022,14 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
         </form>
       )}
 
-      <Fab className="md:hidden">
-        <div
-          onClick={() => setIsFormOpenMobile(true)}
-          className="p-3 mb-10 -mr-4 text-white rounded-full shadow-lg bg-light-orange-10"
+      <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"
           id="mobile-highlight-create"
         >
+          <span className="sr-only">Create a highlight</span>
           <RxPencil1 className="text-3xl" />
-        </div>
+        </span>
       </Fab>
     </>
   );