fix(home): make tiles and arrows tabable

jwplayer · May 10, 2021 · 2ab122f · 2ab122f
1 parent 03dcc0d
commit 2ab122f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
@@ -60,6 +60,9 @@ const Shelf: React.FC<ShelfProps> = ({
         renderLeftControl={(handleClick) => (
           <div
             className={isInitState ? styles.arrowDisabled : styles.arrow}
+            role="button"
+            tabIndex={isInitState ? -1 : 0}
+            aria-label="Slide left"
             onClick={() => {
               setIsInitState(false);
               handleClick();
@@ -71,6 +74,9 @@ const Shelf: React.FC<ShelfProps> = ({
         renderRightControl={(handleClick) => (
           <div
             className={styles.arrow}
+            role="button"
+            tabIndex={0}
+            aria-label="Slide right"
             onClick={() => {
               setIsInitState(false);
               handleClick();

diff --git a/src/components/TileDock/TileDock.tsx b/src/components/TileDock/TileDock.tsx
@@ -196,6 +196,7 @@ const TileDock = <T extends unknown>({
           return (
             <li
               key={tile.key}
+              tabIndex={isInView ? 0 : -1}
               style={{
                 width: `${tileWidth}%`,
                 paddingLeft: spacing / 2,