From 8e468ef2578325d93f4192efb0927c336990bdaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo@opencraft.com>
Date: Tue, 16 Apr 2024 10:59:39 -0300
Subject: [PATCH] fix: console warnings

---
 src/search-modal/SearchModal.scss | 12 ++++++
 src/search-modal/SearchResult.jsx | 66 +++++++++++++++++--------------
 src/search-modal/messages.js      |  5 +++
 3 files changed, 53 insertions(+), 30 deletions(-)

diff --git a/src/search-modal/SearchModal.scss b/src/search-modal/SearchModal.scss
index 45ee27e134..344b4ce8e7 100644
--- a/src/search-modal/SearchModal.scss
+++ b/src/search-modal/SearchModal.scss
@@ -67,4 +67,16 @@
   .fs-large {
     font-size: $font-size-base * 1.25;
   }
+
+  .search-result {
+    &:hover {
+      background-color: $gray-100;
+      cursor: pointer;
+    }
+
+    &:hover.text-muted {
+      cursor: unset;
+      background-color: unset;
+    }
+  }
 }
diff --git a/src/search-modal/SearchResult.jsx b/src/search-modal/SearchResult.jsx
index 17b8fcb3c1..3f87f92f5f 100644
--- a/src/search-modal/SearchResult.jsx
+++ b/src/search-modal/SearchResult.jsx
@@ -2,8 +2,8 @@
 // @ts-check
 import React, { useCallback, useMemo } from 'react';
 import { getConfig, getPath } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
-  Button,
   Icon,
   IconButton,
   Stack,
@@ -24,6 +24,7 @@ import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
 import { getStudioHomeData } from '../studio-home/data/selectors';
+import messages from './messages';
 
 /**
   * @typedef {import('instantsearch.js').Hit<{
@@ -70,6 +71,7 @@ const ItemIcon = {
  * @type {React.FC<{ hit: CustomHit, closeSearch?: () => void}>}
  */
 const SearchResult = ({ hit, closeSearch }) => {
+  const intl = useIntl();
   const navigate = useNavigate();
   const { libraryAuthoringMfeUrl, redirectToLibraryAuthoringMfe } = useSelector(getStudioHomeData);
 
@@ -119,7 +121,7 @@ const SearchResult = ({ hit, closeSearch }) => {
 
   /**
     * Navigates to the context of the hit
-    * @param {React.MouseEvent} e
+    * @param {(React.MouseEvent | React.KeyboardEvent)} e
     * @returns {void}
     * */
   const navigateToContext = (e) => {
@@ -129,6 +131,11 @@ const SearchResult = ({ hit, closeSearch }) => {
       return;
     }
 
+    // @ts-ignore Cannot use 'instanceof' with React.KeyboardEvent to narrow down the type
+    if (e.nativeEvent instanceof KeyboardEvent && e.key !== 'Enter' && e.key !== ' ') {
+      return;
+    }
+
     if (redirectUrl.startsWith('http')) {
       window.location.href = redirectUrl;
       return;
@@ -139,37 +146,36 @@ const SearchResult = ({ hit, closeSearch }) => {
   };
 
   return (
-    <Button
-      variant="tertiary w-100 text-left"
+    <Stack
+      className={`border-bottom search-result p-2 align-items-start ${!redirectUrl ? 'text-muted' : ''}`}
+      direction="horizontal"
+      gap={3}
       onClick={navigateToContext}
-      disabled={!redirectUrl}
+      onKeyDown={navigateToContext}
+      tabIndex={redirectUrl ? 0 : undefined}
+      role="button"
     >
-      <Stack
-        className="border-bottom search-result p-2 w-100 align-items-start"
-        direction="horizontal"
-        gap={3}
-      >
-        <Icon className="text-muted" src={ItemIcon[hit.block_type] || Article} />
-        <Stack>
-          <div className="hit-name small">
-            <CustomHighlight attribute="display_name" hit={hit} />
-          </div>
-          <div className="hit-description x-small text-truncate">
-            <Snippet attribute="content.html_content" hit={hit} highlightedTagName="b" />
-            <Snippet attribute="content.capa_content" hit={hit} highlightedTagName="b" />
-          </div>
-          <div className="text-muted x-small">
-            <CustomHighlight attribute="breadcrumbsNames" separator=" / " hit={hit} />
-          </div>
-        </Stack>
-        <IconButton
-          src={OpenInNew}
-          iconAs={Icon}
-          disabled={!newWindowUrl}
-          onClick={openContextInNewWindow}
-        />
+      <Icon className="text-muted" src={ItemIcon[hit.block_type] || Article} />
+      <Stack>
+        <div className="hit-name small">
+          <CustomHighlight attribute="display_name" hit={hit} />
+        </div>
+        <div className="hit-description x-small text-truncate">
+          <Snippet attribute="content.html_content" hit={hit} highlightedTagName="b" />
+          <Snippet attribute="content.capa_content" hit={hit} highlightedTagName="b" />
+        </div>
+        <div className="text-muted x-small">
+          <CustomHighlight attribute="breadcrumbsNames" separator=" / " hit={hit} />
+        </div>
       </Stack>
-    </Button>
+      <IconButton
+        src={OpenInNew}
+        iconAs={Icon}
+        disabled={!newWindowUrl}
+        onClick={openContextInNewWindow}
+        alt={intl.formatMessage(messages.openInNewWindow)}
+      />
+    </Stack>
   );
 };
 
diff --git a/src/search-modal/messages.js b/src/search-modal/messages.js
index 602c39a4cf..ad429af29d 100644
--- a/src/search-modal/messages.js
+++ b/src/search-modal/messages.js
@@ -140,6 +140,11 @@ const messages = defineMessages({
     defaultMessage: 'Show more results',
     description: 'Show more results button label',
   },
+  openInNewWindow: {
+    id: 'course-authoring.course-search.openInNewWindow',
+    defaultMessage: 'Open in new window',
+    description: 'Alt text for the button that opens the search result in a new window',
+  },
 });
 
 export default messages;