feat(playlist): fix roles for accessibility

jwplayer · Jun 17, 2021 · 566fe72 · 566fe72
1 parent f8bfe6d
commit 566fe72
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 37 deletions.
diff --git a/src/components/CardGrid/CardGrid.tsx b/src/components/CardGrid/CardGrid.tsx
@@ -48,19 +48,21 @@ function CardGrid({
     const { mediaid, title, duration, seriesId } = playlistItem;
 
     return (
-      <div className={styles.cell} style={style} key={mediaid}>
-        <Card
-          key={mediaid}
-          title={title}
-          duration={duration}
-          posterSource={findPlaylistImageForWidth(playlistItem, imageSourceWidth)}
-          seriesId={seriesId}
-          onClick={() => onCardClick(playlistItem)}
-          onHover={typeof onCardHover === 'function' ? () => onCardHover(playlistItem) : undefined}
-          loading={isLoading}
-          isCurrent={currentCardItem && currentCardItem.mediaid === mediaid}
-          currentLabel={currentCardLabel}
-        />
+      <div className={styles.cell} style={style} key={mediaid} role="row">
+        <div role="cell">
+          <Card
+            key={mediaid}
+            title={title}
+            duration={duration}
+            posterSource={findPlaylistImageForWidth(playlistItem, imageSourceWidth)}
+            seriesId={seriesId}
+            onClick={() => onCardClick(playlistItem)}
+            onHover={typeof onCardHover === 'function' ? () => onCardHover(playlistItem) : undefined}
+            loading={isLoading}
+            isCurrent={currentCardItem && currentCardItem.mediaid === mediaid}
+            currentLabel={currentCardLabel}
+          />
+        </div>
       </div>
     );
   };

diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
@@ -104,19 +104,17 @@ const Shelf: React.FC<ShelfProps> = ({
           </div>
         )}
         renderTile={(item, isInView) => (
-          <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>
+          <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>

diff --git a/src/components/TileDock/TileDock.tsx b/src/components/TileDock/TileDock.tsx
@@ -187,7 +187,6 @@ const TileDock = <T extends unknown>({
         onTouchStart={handleTouchStart}
         onTouchEnd={handleTouchEnd}
         onTransitionEnd={handleTransitionEnd}
-        role="none"
       >
         {tileList.map((tile: Tile<T>, listIndex) => {
           // Todo:
@@ -198,7 +197,6 @@ const TileDock = <T extends unknown>({
           return (
             <li
               key={tile.key}
-              role="none"
               style={{
                 width: `${tileWidth}%`,
                 paddingLeft: spacing / 2,

diff --git a/src/components/VirtualizedGrid/VirtualizedGrid.tsx b/src/components/VirtualizedGrid/VirtualizedGrid.tsx
@@ -28,6 +28,7 @@ const VirtualizedGrid = ({ cellRenderer, rowCount, cols, spacing }: Props) => {
         <AutoSizer disableHeight>
           {({ width }) => (
             <Grid
+              role="grid"
               className={styles.grid}
               tabIndex={-1}
               autoHeight

diff --git a/src/screens/Home/Home.tsx b/src/screens/Home/Home.tsx
@@ -65,15 +65,17 @@ const Home = (): JSX.Element => {
             role="row"
             className={classNames(styles.shelfContainer, { [styles.featured]: contentItem.featured })}
           >
-            <ShelfComponent
-              loading={isLoading}
-              error={error}
-              playlist={playlist}
-              onCardClick={onCardClick}
-              onCardHover={onCardHover}
-              title={playlist.title}
-              featured={contentItem.featured === true}
-            />
+            <div role="cell">
+              <ShelfComponent
+                loading={isLoading}
+                error={error}
+                playlist={playlist}
+                onCardClick={onCardClick}
+                onCardHover={onCardHover}
+                title={playlist.title}
+                featured={contentItem.featured === true}
+              />
+            </div>
           </div>
         )}
       </PlaylistContainer>