fix(suggested-tracks): row hover + full-row play click target (#14426)

Author: dylanjeffers

packages/web/src/components/suggested-tracks/SuggestedTracks.module.css

@@ -40,6 +40,22 @@
   justify-content: space-between;
   padding: var(--harmony-unit-4);
   gap: var(--harmony-unit-3);
+  cursor: pointer;
+  transition: background-color var(--harmony-quick);
+}
+
+.suggestedTrack:hover,
+.suggestedTrack:focus-visible {
+  background-color: var(--harmony-n-50);
+}
+
+.suggestedTrack:focus {
+  outline: none;
+}
+
+.suggestedTrack:focus-visible {
+  outline: 2px solid var(--harmony-focus, var(--harmony-secondary));
+  outline-offset: -2px;
 }
 
 .trackDetails {
@@ -55,10 +71,8 @@
   border: 0.5px solid var(--harmony-n-100);
 }
 
-.artworkButton {
-  all: unset;
+.artworkWrapper {
   position: relative;
-  cursor: pointer;
   height: var(--harmony-unit-10);
   width: var(--harmony-unit-10);
   flex-shrink: 0;
@@ -74,14 +88,19 @@
   background: rgba(0, 0, 0, 0.4);
   opacity: 0;
   transition: opacity var(--harmony-quick);
+  pointer-events: none;
 }
 
-.artworkButton:hover .playOverlay,
-.artworkButton:focus-visible .playOverlay,
+.suggestedTrack:hover .playOverlay,
+.suggestedTrack:focus-visible .playOverlay,
 .playOverlay.isPlaying {
   opacity: 1;
 }
 
+.userLinkWrapper {
+  display: inline-flex;
+}
+
 .trackInfo {
   display: flex;
   flex-direction: column;
@@ -139,4 +158,9 @@
 .suggestedTrackSkeleton {
   composes: suggestedTrack;
   height: 72px;
+  cursor: default;
+}
+
+.suggestedTrackSkeleton:hover {
+  background-color: transparent;
 }

packages/web/src/components/suggested-tracks/SuggestedTracks.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react'
+import { KeyboardEvent, MouseEvent, useCallback, useMemo } from 'react'
 
 import {
   SUGGESTED_TRACK_COUNT,
@@ -79,38 +79,65 @@ const SuggestedTrackRow = (props: SuggestedTrackProps) => {
     onAddTrack(track_id)
   }, [onAddTrack, track_id])
 
+  const handleRowKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        togglePlay()
+      }
+    },
+    [togglePlay]
+  )
+
+  const handleAddClick = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation()
+      handleAddTrack()
+    },
+    [handleAddTrack]
+  )
+
   return (
-    <div className={styles.suggestedTrack}>
+    <div
+      className={styles.suggestedTrack}
+      role='button'
+      tabIndex={0}
+      aria-label={isTrackPlaying ? `Pause ${title}` : `Play ${title}`}
+      onClick={togglePlay}
+      onKeyDown={handleRowKeyDown}
+    >
       <div className={styles.trackDetails}>
-        <button
-          type='button'
-          className={styles.artworkButton}
-          onClick={togglePlay}
-          onMouseDown={(e) => e.preventDefault()}
-          aria-label={isTrackPlaying ? `Pause ${title}` : `Play ${title}`}
-        >
+        <div className={styles.artworkWrapper}>
           <Image className={styles.trackArtwork} src={image} />
           <span
             className={cn(styles.playOverlay, {
               [styles.isPlaying]: isTrackPlaying
             })}
+            aria-hidden='true'
           >
             {isTrackPlaying ? (
               <IconPause size='s' color='staticWhite' />
             ) : (
               <IconPlay size='s' color='staticWhite' />
             )}
           </span>
-        </button>
+        </div>
         <div className={styles.trackInfo}>
           <p className={styles.trackName}>{title}</p>
-          {user ? <UserLink userId={user.user_id} size='s' /> : null}
+          {user ? (
+            <span
+              className={styles.userLinkWrapper}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <UserLink userId={user.user_id} size='s' />
+            </span>
+          ) : null}
         </div>
       </div>
       <Button
         variant='secondary'
         size='small'
-        onClick={handleAddTrack}
+        onClick={handleAddClick}
         onMouseDown={(e) => e.preventDefault()}
         disabled={trackIsInCollection}
       >