From f8bfe6d07e279981a4fc13105cd0a1d28464e837 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Thu, 17 Jun 2021 16:07:01 +0200
Subject: [PATCH] feat(home): fix roles tree for accessibility

---
 src/components/Shelf/Shelf.tsx                | 28 +++++++++++--------
 src/components/TileDock/TileDock.tsx          |  4 ++-
 src/containers/Playlist/PlaylistContainer.tsx |  4 ++-
 src/screens/Home/Home.tsx                     | 21 +++++++-------
 4 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
index 7a3437b03..befcc50e1 100644
--- a/src/components/Shelf/Shelf.tsx
+++ b/src/components/Shelf/Shelf.tsx
@@ -63,7 +63,9 @@ const Shelf: React.FC<ShelfProps> = ({
 
   return (
     <div className={classNames(styles.shelf, { [styles.featured]: featured })} data-mediaid={playlist.feedid}>
-      {!featured && <h2 className={classNames(styles.title, { [styles.loading]: loading })}>{title || playlist.title}</h2>}
+      {!featured && (
+        <h2 className={classNames(styles.title, { [styles.loading]: loading })}>{title || playlist.title}</h2>
+      )}
       <TileDock<PlaylistItem>
         items={playlist.playlist}
         tilesToShow={tilesToShow}
@@ -102,17 +104,19 @@ const Shelf: React.FC<ShelfProps> = ({
           </div>
         )}
         renderTile={(item, isInView) => (
-          <Card
-            title={item.title}
-            duration={item.duration}
-            posterSource={findPlaylistImageForWidth(item, imageSourceWidth)}
-            seriesId={item.seriesId}
-            onClick={isInView ? () => onCardClick(item) : undefined}
-            onHover={typeof onCardHover === 'function' ? () => onCardHover(item) : undefined}
-            featured={featured}
-            disabled={!isInView}
-            loading={loading}
-          />
+          <div role="cell">
+            <Card
+              title={item.title}
+              duration={item.duration}
+              posterSource={findPlaylistImageForWidth(item, imageSourceWidth)}
+              seriesId={item.seriesId}
+              onClick={isInView ? () => onCardClick(item) : undefined}
+              onHover={typeof onCardHover === 'function' ? () => onCardHover(item) : undefined}
+              featured={featured}
+              disabled={!isInView}
+              loading={loading}
+            />
+          </div>
         )}
       />
     </div>
diff --git a/src/components/TileDock/TileDock.tsx b/src/components/TileDock/TileDock.tsx
index fd8a61d9c..738ae5970 100644
--- a/src/components/TileDock/TileDock.tsx
+++ b/src/components/TileDock/TileDock.tsx
@@ -168,7 +168,7 @@ const TileDock = <T extends unknown>({
   const ulStyle = {
     transform: `translate3d(${transformWithOffset}%, 0, 0)`,
     // prettier-ignore
-    WebkitTransform: `translate3d(${transformWithOffset}%, 0, 0)`,
+    webkitTransform: `translate3d(${transformWithOffset}%, 0, 0)`,
     transition: transitionBasis,
     marginLeft: -spacing / 2,
     marginRight: -spacing / 2,
@@ -187,6 +187,7 @@ const TileDock = <T extends unknown>({
         onTouchStart={handleTouchStart}
         onTouchEnd={handleTouchEnd}
         onTransitionEnd={handleTransitionEnd}
+        role="none"
       >
         {tileList.map((tile: Tile<T>, listIndex) => {
           // Todo:
@@ -197,6 +198,7 @@ const TileDock = <T extends unknown>({
           return (
             <li
               key={tile.key}
+              role="none"
               style={{
                 width: `${tileWidth}%`,
                 paddingLeft: spacing / 2,
diff --git a/src/containers/Playlist/PlaylistContainer.tsx b/src/containers/Playlist/PlaylistContainer.tsx
index e6e544db3..28696ba71 100644
--- a/src/containers/Playlist/PlaylistContainer.tsx
+++ b/src/containers/Playlist/PlaylistContainer.tsx
@@ -42,7 +42,9 @@ const PlaylistContainer = ({ playlistId, relatedMediaId, onPlaylistUpdate, child
   if (playlistId === PersonalShelf.ContinueWatching) playlist = watchHistoryPlayist;
 
   if (!playlistId) return <p>No playlist id</p>;
-  if (!playlist.playlist.length) return null;
+  if (!playlist.playlist.length) {
+    return null;
+  }
 
   return children({ playlist, isLoading, error });
 };
diff --git a/src/screens/Home/Home.tsx b/src/screens/Home/Home.tsx
index 9df64614e..647ce9afd 100644
--- a/src/screens/Home/Home.tsx
+++ b/src/screens/Home/Home.tsx
@@ -57,13 +57,14 @@ const Home = (): JSX.Element => {
     const onCardHover = (playlistItem: PlaylistItem) => updateBlurImage(playlistItem.image);
 
     return (
-      <div
-        key={key}
-        style={style}
-        className={classNames(styles.shelfContainer, { [styles.featured]: contentItem.featured })}
-      >
-        <PlaylistContainer key={contentItem.playlistId} playlistId={contentItem.playlistId}>
-          {({ playlist, error, isLoading }) => (
+      <PlaylistContainer key={contentItem.playlistId} playlistId={contentItem.playlistId}>
+        {({ playlist, error, isLoading }) => (
+          <div
+            key={key}
+            style={style}
+            role="row"
+            className={classNames(styles.shelfContainer, { [styles.featured]: contentItem.featured })}
+          >
             <ShelfComponent
               loading={isLoading}
               error={error}
@@ -73,9 +74,9 @@ const Home = (): JSX.Element => {
               title={playlist.title}
               featured={contentItem.featured === true}
             />
-          )}
-        </PlaylistContainer>
-      </div>
+          </div>
+        )}
+      </PlaylistContainer>
     );
   };