Rollback reportCard link changes

responsible-ai-collaborative · May 23, 2024 · 9b94928 · 9b94928
1 parent 0fd7827
commit 9b94928
Showing 1 changed file with 16 additions and 7 deletions.
diff --git a/site/gatsby-site/src/components/reports/ReportCard.js b/site/gatsby-site/src/components/reports/ReportCard.js
@@ -14,7 +14,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
 import { hasVariantData } from 'utils/variants';
 import { format, fromUnixTime } from 'date-fns';
-import { Link } from 'gatsby';
 
 const ReportCard = ({
   item,
@@ -47,6 +46,12 @@ const ReportCard = ({
     }
   };
 
+  const toggleReadMoreKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      toggleReadMore();
+    }
+  };
+
   const [isBottomReached, setIsBottomReached] = useState(false);
 
   useEffect(() => {
@@ -138,19 +143,23 @@ const ReportCard = ({
         </div>
         <div className="mt-0 cursor-default select-text">
           <div className="flex">
-            <Link to={`/reports/${item.report_number}`} className="hover:no-underline">
-              {reportTitle ? (
-                <>{reportTitle}</>
-              ) : (
+            {reportTitle ? (
+              <>{reportTitle}</>
+            ) : (
+              <button
+                className="w-3/4 text-left"
+                onClick={toggleReadMore}
+                onKeyDown={toggleReadMoreKeyDown}
+              >
                 <h5
                   className={`max-w-full text-xl font-bold tracking-tight text-gray-900 dark:text-white w-full ${
                     !alwaysExpanded ? 'cursor-pointer hover:text-primary-blue' : 'cursor-default'
                   }`}
                 >
                   <Trans ns="landing">{item.title}</Trans>
                 </h5>
-              )}
-            </Link>
+              </button>
+            )}
           </div>
           <div className="flex justify-between flex-wrap">
             <WebArchiveLink url={item.url} className="text-dark-gray">