Merge pull request #60 from Videodock/feat/accessibility

Feat / accessibility
jwplayer · Jun 18, 2021 · 8e661fe · 8e661fe
2 parents c5f1a23 + 566fe72
commit 8e661fe
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 39 deletions.
diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
@@ -6,7 +6,10 @@
   cursor: pointer;
   transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
 
-  // @media (hover: hover) and (pointer: fine) {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
   &:focus,
   &:hover {
     z-index: 1;

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -66,13 +66,15 @@ function Card({
       <div className={posterClassNames} style={{ backgroundImage: posterSource ? `url(${posterSource})` : '' }}>
         {!loading && (
           <div className={styles.meta}>
-            {featured && <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>}
-            {metaData()}
+            {featured && !disabled && (
+              <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>
+            )}
+            {!disabled && metaData()}
           </div>
         )}
         {isCurrent && <div className={styles.currentLabel}>{currentLabel}</div>}
       </div>
-      {!featured && (
+      {!featured && !disabled && (
         <div className={styles.titleContainer}>
           <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>
         </div>

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
@@ -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}

diff --git 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,

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/containers/Playlist/PlaylistContainer.tsx b/src/containers/Playlist/PlaylistContainer.tsx
@@ -42,7 +42,9 @@ const PlaylistContainer = ({ playlistId, relatedItem, onPlaylistUpdate, children
   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;
+  }
 
   if (relatedItem && !playlist.playlist.some(({ mediaid }) => mediaid === relatedItem.mediaid)) {
     playlist.playlist.unshift(relatedItem);

diff --git a/src/screens/Home/Home.tsx b/src/screens/Home/Home.tsx
@@ -59,25 +59,28 @@ 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 }) => (
-            <ShelfComponent
-              loading={isLoading}
-              error={error}
-              playlist={playlist}
-              onCardClick={onCardClick}
-              onCardHover={onCardHover}
-              title={playlist.title}
-              featured={contentItem.featured === true}
-            />
-          )}
-        </PlaylistContainer>
-      </div>
+      <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 })}
+          >
+            <div role="cell">
+              <ShelfComponent
+                loading={isLoading}
+                error={error}
+                playlist={playlist}
+                onCardClick={onCardClick}
+                onCardHover={onCardHover}
+                title={playlist.title}
+                featured={contentItem.featured === true}
+              />
+            </div>
+          </div>
+        )}
+      </PlaylistContainer>
     );
   };