From 733702efa3a959293e9a8483c82c0fb58be50750 Mon Sep 17 00:00:00 2001
From: Dunsin <jesudunsinfaiye@gmail.com>
Date: Sat, 12 Oct 2024 09:05:11 +0000
Subject: [PATCH 1/2] fix: use buttons for interactive elements

---
 .../HighlightInput/highlight-input-form.tsx          | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/molecules/HighlightInput/highlight-input-form.tsx b/components/molecules/HighlightInput/highlight-input-form.tsx
index b8698cd69..df47aed78 100644
--- a/components/molecules/HighlightInput/highlight-input-form.tsx
+++ b/components/molecules/HighlightInput/highlight-input-form.tsx
@@ -754,14 +754,14 @@ 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"
+                              <button
+                                className="outline-none bg-none 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");
                                 }}
                               >
                                 {suggestion.title}
-                              </p>
+                              </button>
                             </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"
+          className="outline-none 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>
     </>
   );

From e106cf4837f42948e33e42023cf24a05fa125aef Mon Sep 17 00:00:00 2001
From: Dunsin <jesudunsinfaiye@gmail.com>
Date: Tue, 15 Oct 2024 16:21:43 +0000
Subject: [PATCH 2/2] use the proper tags and add onclick prop to fab.tsx

---
 components/atoms/Fab/fab.tsx                  |  4 ++--
 .../HighlightInput/highlight-input-form.tsx   | 19 +++++++++----------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/components/atoms/Fab/fab.tsx b/components/atoms/Fab/fab.tsx
index 1d8880619..69887608d 100644
--- a/components/atoms/Fab/fab.tsx
+++ b/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>
   );
diff --git a/components/molecules/HighlightInput/highlight-input-form.tsx b/components/molecules/HighlightInput/highlight-input-form.tsx
index df47aed78..bd42d0517 100644
--- a/components/molecules/HighlightInput/highlight-input-form.tsx
+++ b/components/molecules/HighlightInput/highlight-input-form.tsx
@@ -754,14 +754,13 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
                                   }`}
                                 />
                               )}
-                              <button
-                                className="outline-none bg-none 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}
-                              </button>
+                              </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">
-        <button
-          onClick={() => setIsFormOpenMobile(true)}
+      <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" />
-        </button>
+        </span>
       </Fab>
     </>
   );