chore(project): add anchor tags for better seo

src/components/Card/Card.test.tsx

@@ -11,23 +11,22 @@ const itemWithImage = { title: 'This is a movie', duration: 120, cardImage: 'htt
 
 describe('<Card>', () => {
   it('renders card with video title', () => {
-    const { getByText } = renderWithRouter(<Card item={item} onClick={() => ''} />);
+    const { getByText } = renderWithRouter(<Card item={item} url="https://test.dummy.jwplayer.com" />);
     expect(getByText(/aa/i)).toBeTruthy();
   });
 
   it('renders tag with correct duration', () => {
-    const { getByText } = renderWithRouter(<Card item={item} onClick={() => ''} />);
+    const { getByText } = renderWithRouter(<Card item={item} url="https://test.dummy.jwplayer.com" />);
     expect(getByText(/2/i)).toBeTruthy();
   });
 
   it('renders the image with the image prop when valid', () => {
-    const { getByAltText } = renderWithRouter(<Card item={itemWithImage} onClick={() => ''} />);
-
+    const { getByAltText } = renderWithRouter(<Card item={itemWithImage} url="https://test.dummy.jwplayer.com" />);
     expect(getByAltText('This is a movie')).toHaveAttribute('src', 'http://movie.jpg?width=320');
   });
 
   it('makes the image visible after load', () => {
-    const { getByAltText } = renderWithRouter(<Card item={itemWithImage} onClick={() => ''} />);
+    const { getByAltText } = renderWithRouter(<Card item={itemWithImage} url="https://test.dummy.jwplayer.com" />);
 
     expect(getByAltText('This is a movie')).toHaveAttribute('src', 'http://movie.jpg?width=320');
     expect(getByAltText('This is a movie')).toHaveStyle({ opacity: 0 });
@@ -36,4 +35,9 @@ describe('<Card>', () => {
 
     expect(getByAltText('This is a movie')).toHaveStyle({ opacity: 1 });
   });
+
+  it('should render anchor tag', () => {
+    const { container } = renderWithRouter(<Card item={itemWithImage} url="https://test.dummy.jwplayer.com" />);
+    expect(container).toMatchSnapshot();
+  });
 });

src/components/Card/Card.tsx

@@ -19,7 +19,6 @@ export type PosterAspectRatio = (typeof cardAspectRatios)[number];
 
 type CardProps = {
   item: PlaylistItem;
-  onClick?: () => void;
   onHover?: () => void;
   progress?: number;
   posterAspect?: PosterAspectRatio;
@@ -29,11 +28,10 @@ type CardProps = {
   isCurrent?: boolean;
   isLocked?: boolean;
   currentLabel?: string;
-  url?: string;
+  url: string;
 };
 
 function Card({
-  onClick,
   onHover,
   progress,
   item,
@@ -90,13 +88,12 @@ function Card({
 
   return (
     <Link
-      to={url ?? ''}
+      to={url}
       className={cardClassName}
-      onClick={onClick}
+      onClick={disabled ? (e) => e.preventDefault() : undefined}
       onMouseEnter={onHover}
       tabIndex={disabled ? -1 : 0}
-      onKeyDown={(event: KeyboardEvent) => (event.key === 'Enter' || event.key === ' ') && !disabled && onClick && onClick()}
-      role="button"
+      onKeyDown={(event: KeyboardEvent) => (event.key === 'Enter' || event.key === ' ') && !disabled}
       aria-label={title}
     >
       <div className={posterClassNames}>

src/components/Card/__snapshots__/Card.test.tsx.snap

@@ -0,0 +1,62 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Card> > should render anchor tag 1`] = `
+<div>
+  <a
+    aria-label="This is a movie"
+    class="_card_d75732"
+    href="/https://test.dummy.jwplayer.com"
+    tabindex="0"
+  >
+    <div
+      class="_poster_d75732 _aspect169_d75732"
+    >
+      <img
+        alt="This is a movie"
+        class="_posterImage_d75732 _image_4c41c3"
+        src="http://movie.jpg?width=320"
+      />
+      <div
+        class="_meta_d75732"
+      >
+        <div
+          class="_tags_d75732"
+        >
+          <div
+            aria-label="card_lock"
+            class="_tag_d75732 _lock_d75732"
+            role="status"
+          >
+            <svg
+              aria-hidden="true"
+              class="_icon_1e9999"
+              focusable="false"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+          <div
+            class="_tag_d75732"
+          >
+            2 min
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="_titleContainer_d75732"
+    >
+      <div
+        class="_title_d75732"
+      >
+        This is a movie
+      </div>
+    </div>
+  </a>
+</div>
+`;

src/components/CardGrid/CardGrid.test.tsx

@@ -10,15 +10,7 @@ describe('<CardGrid>', () => {
   it('renders and matches snapshot', () => {
     const playlist = playlistFixture as Playlist;
     const { container } = renderWithRouter(
-      <CardGrid
-        playlist={playlist}
-        onCardHover={vi.fn()}
-        onCardClick={vi.fn()}
-        isLoading={false}
-        accessModel={'SVOD'}
-        isLoggedIn={true}
-        hasSubscription={true}
-      />,
+      <CardGrid playlist={playlist} onCardHover={vi.fn()} isLoading={false} accessModel={'SVOD'} isLoggedIn={true} hasSubscription={true} />,
     );
 
     expect(container).toMatchSnapshot();

src/components/CardGrid/CardGrid.tsx

@@ -37,7 +37,6 @@ type CardGridProps = {
   hasLoadMore?: boolean;
   loadMore?: () => void;
   onCardHover?: (item: PlaylistItem) => void;
-  onCardClick: (item: PlaylistItem, playlistId?: string) => void;
 };
 
 function CardGrid({
@@ -52,7 +51,6 @@ function CardGrid({
   hasSubscription,
   hasLoadMore,
   loadMore,
-  onCardClick,
   onCardHover,
 }: CardGridProps) {
   const breakpoint: Breakpoint = useBreakpoint();
@@ -78,7 +76,6 @@ function CardGrid({
           <Card
             progress={watchHistory ? watchHistory[mediaid] : undefined}
             url={url}
-            onClick={() => onCardClick(playlistItem, playlistItem.feedid)}
             onHover={typeof onCardHover === 'function' ? () => onCardHover(playlistItem) : undefined}
             loading={isLoading}
             isCurrent={currentCardItem && currentCardItem.mediaid === mediaid}

src/components/CardGrid/__snapshots__/CardGrid.test.tsx.snap

@@ -18,7 +18,6 @@ exports[`<CardGrid> > renders and matches snapshot 1`] = `
             aria-label="Agent 327"
             class="_card_d75732"
             href="/m/uB8aRnu6/agent-327?r=dGSUzs9o"
-            role="button"
             tabindex="0"
           >
             <div
@@ -61,7 +60,6 @@ exports[`<CardGrid> > renders and matches snapshot 1`] = `
             aria-label="Big Buck Bunny"
             class="_card_d75732"
             href="/m/awWEFyPu/big-buck-bunny?r=dGSUzs9o"
-            role="button"
             tabindex="0"
           >
             <div
@@ -104,7 +102,6 @@ exports[`<CardGrid> > renders and matches snapshot 1`] = `
             aria-label="Elephants Dream"
             class="_card_d75732"
             href="/m/eFPH2tVG/elephants-dream?r=dGSUzs9o"
-            role="button"
             tabindex="0"
           >
             <div

src/components/Favorites/Favorites.test.tsx

@@ -15,7 +15,6 @@ describe('<Favorites>', () => {
             playlist={playlist}
             error={error}
             isLoading={isLoading}
-            onCardClick={() => null}
             onCardHover={() => null}
             onClearFavoritesClick={() => null}
             hasSubscription={true}

src/components/Favorites/Favorites.tsx

@@ -17,7 +17,6 @@ type Props = {
   isLoading: boolean;
   accessModel: AccessModel;
   hasSubscription: boolean;
-  onCardClick: (item: PlaylistItem) => void;
   onCardHover?: (item: PlaylistItem) => void;
   onClearFavoritesClick: () => void;
 };
@@ -30,7 +29,7 @@ const cols: Breakpoints = {
   [Breakpoint.xl]: 3,
 };
 
-const Favorites = ({ playlist, error, isLoading, accessModel, hasSubscription, onCardClick, onCardHover, onClearFavoritesClick }: Props): JSX.Element => {
+const Favorites = ({ playlist, error, isLoading, accessModel, hasSubscription, onCardHover, onClearFavoritesClick }: Props): JSX.Element => {
   const { t } = useTranslation('user');
 
   if (isLoading) return <LoadingOverlay />;
@@ -48,7 +47,6 @@ const Favorites = ({ playlist, error, isLoading, accessModel, hasSubscription, o
       {playlist.playlist.length > 0 ? (
         <CardGrid
           playlist={playlist}
-          onCardClick={onCardClick}
           onCardHover={onCardHover}
           cols={cols}
           isLoading={isLoading}

src/components/Shelf/Shelf.tsx

@@ -83,7 +83,7 @@ const Shelf = ({
           isLocked={isLocked(accessModel, isLoggedIn, hasSubscription, item)}
           posterAspect={posterAspect}
           item={item}
-          url={isInView ? url : undefined}
+          url={url}
         />
       );
     },

src/components/Shelf/__snapshots__/Shelf.test.tsx.snap

@@ -43,8 +43,7 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
             <a
               aria-label="Third movie"
               class="_card_d75732 _featured_d75732 _disabled_d75732"
-              href="/"
-              role="button"
+              href="/m/12332123/third-movie"
               tabindex="-1"
             >
               <div
@@ -67,8 +66,7 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
             <a
               aria-label="Last playlist item"
               class="_card_d75732 _featured_d75732 _disabled_d75732"
-              href="/"
-              role="button"
+              href="/m/ddeeddee/last-playlist-item"
               tabindex="-1"
             >
               <div
@@ -92,7 +90,6 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
               aria-label="Movie 1"
               class="_card_d75732 _featured_d75732"
               href="/m/1234abcd/movie-1"
-              role="button"
               tabindex="0"
             >
               <div
@@ -126,8 +123,7 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
             <a
               aria-label="Movie 2"
               class="_card_d75732 _featured_d75732 _disabled_d75732"
-              href="/"
-              role="button"
+              href="/m/aaaaaaaa/movie-2"
               tabindex="-1"
             >
               <div
@@ -150,8 +146,7 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
             <a
               aria-label="Third movie"
               class="_card_d75732 _featured_d75732 _disabled_d75732"
-              href="/"
-              role="button"
+              href="/m/12332123/third-movie"
               tabindex="-1"
             >
               <div
@@ -239,7 +234,6 @@ exports[`Shelf Component tests > Regular shelf 1`] = `
               aria-label="Movie 1"
               class="_card_d75732"
               href="/m/1234abcd/movie-1"
-              role="button"
               tabindex="0"
             >
               <div
@@ -278,7 +272,6 @@ exports[`Shelf Component tests > Regular shelf 1`] = `
               aria-label="Movie 2"
               class="_card_d75732"
               href="/m/aaaaaaaa/movie-2"
-              role="button"
               tabindex="0"
             >
               <div
@@ -317,7 +310,6 @@ exports[`Shelf Component tests > Regular shelf 1`] = `
               aria-label="Third movie"
               class="_card_d75732"
               href="/m/12332123/third-movie"
-              role="button"
               tabindex="0"
             >
               <div
@@ -356,7 +348,6 @@ exports[`Shelf Component tests > Regular shelf 1`] = `
               aria-label="Last playlist item"
               class="_card_d75732"
               href="/m/ddeeddee/last-playlist-item"
-              role="button"
               tabindex="0"
             >
               <div

src/components/VideoLayout/VideoLayout.tsx

@@ -123,7 +123,6 @@ const VideoLayout: React.FC<Props> = ({
         </div>
         <CardGrid
           playlist={playlist}
-          onCardClick={onItemClick}
           isLoading={isLoading}
           watchHistory={watchHistory}
           accessModel={accessModel}

src/pages/Home/__snapshots__/Home.test.tsx.snap

@@ -38,7 +38,6 @@ exports[`Home Component tests > Home test 1`] = `
                       aria-label="My video"
                       class="_card_d75732"
                       href="/m/abcddabc/my-video"
-                      role="button"
                       tabindex="0"
                     >
                       <div
@@ -95,7 +94,6 @@ exports[`Home Component tests > Home test 1`] = `
                       aria-label="Other Vids"
                       class="_card_d75732"
                       href="/m/zzzaaazz/other-vids"
-                      role="button"
                       tabindex="0"
                     >
                       <div
@@ -181,7 +179,6 @@ exports[`Home Component tests > Home test 1`] = `
                       aria-label="My video"
                       class="_card_d75732"
                       href="/m/abcddabc/my-video"
-                      role="button"
                       tabindex="0"
                     >
                       <div
@@ -238,7 +235,6 @@ exports[`Home Component tests > Home test 1`] = `
                       aria-label="Other Vids"
                       class="_card_d75732"
                       href="/m/zzzaaazz/other-vids"
-                      role="button"
                       tabindex="0"
                     >
                       <div