From 14c10afcc366ad6792a849a31b9a2d24bc4b62ae Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Wed, 26 May 2021 17:34:46 +0200
Subject: [PATCH] feat(project): make all accessible by keyboard

---
 src/components/Button/Button.module.scss      |  4 +++
 src/components/Card/Card.module.scss          |  5 +++-
 src/components/Card/Card.tsx                  | 14 +++++++++--
 src/components/Dropdown/Dropdown.module.scss  |  4 ++-
 src/components/Dropdown/Dropdown.tsx          |  4 +--
 .../Filter/__snapshots__/Filter.test.tsx.snap |  5 ++++
 .../__snapshots__/FilterModal.test.tsx.snap   |  1 +
 src/components/Header/Header.tsx              |  2 +-
 .../Header/__snapshots__/Header.test.tsx.snap |  1 +
 .../IconButton/IconButton.module.scss         |  1 +
 src/components/IconButton/IconButton.tsx      | 14 +++++++++--
 .../__snapshots__/IconButton.test.tsx.snap    |  1 +
 src/components/Layout/Layout.tsx              |  9 +++++--
 .../Layout/__snapshots__/Layout.test.tsx.snap |  4 +++
 .../MenuButton/MenuButton.module.scss         |  1 +
 src/components/MenuButton/MenuButton.tsx      |  7 +++---
 .../__snapshots__/MenuButton.test.tsx.snap    |  1 +
 .../Root/__snapshots__/Root.test.tsx.snap     |  4 +++
 src/components/Shelf/Shelf.module.scss        |  1 +
 src/components/Shelf/Shelf.tsx                | 25 +++++++++++--------
 src/components/Sidebar/Sidebar.tsx            |  8 +++---
 .../__snapshots__/SideBar.test.tsx.snap       |  3 +++
 src/components/TileDock/TileDock.tsx          |  3 +--
 .../VirtualizedGrid.module.scss               |  6 +++++
 .../VirtualizedGrid/VirtualizedGrid.scss      |  3 ---
 .../VirtualizedGrid/VirtualizedGrid.tsx       |  5 +++-
 26 files changed, 102 insertions(+), 34 deletions(-)
 create mode 100644 src/components/VirtualizedGrid/VirtualizedGrid.module.scss
 delete mode 100644 src/components/VirtualizedGrid/VirtualizedGrid.scss

diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
index 50b8384fb..5b3860412 100644
--- a/src/components/Button/Button.module.scss
+++ b/src/components/Button/Button.module.scss
@@ -30,6 +30,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     &:hover:not(.active),
+    &:focus:not(.active),
     &:active {
       z-index: 1;
       background-color: rgba(variables.$black, 0.8);
@@ -37,5 +38,8 @@
       transform: scale(1.1);
       opacity: 1;
     }
+    &:focus.active {
+      transform: scale(1.1);
+    }
   }
 }
diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
index 5c00157c5..df7fa75f3 100644
--- a/src/components/Card/Card.module.scss
+++ b/src/components/Card/Card.module.scss
@@ -6,8 +6,11 @@
   cursor: pointer;
   transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
 
+  // @media (hover: hover) and (pointer: fine) {
+  &:focus,
   &:hover {
-    z-index: 10;
+    z-index: 1;
+    outline: none;
     transform: scale(1.05);
 
     & .poster {
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 35281af58..ed9222574 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { KeyboardEvent, memo } from 'react';
 import classNames from 'classnames';
 
 import { formatDurationTag } from '../../utils/formatting';
@@ -39,7 +39,17 @@ function Card({
   };
 
   return (
-    <div className={cardClassName} onClick={onClick} onMouseEnter={onHover} role="button" aria-label={`Play ${title}`}>
+    <div
+      className={cardClassName}
+      onClick={onClick}
+      onMouseEnter={onHover}
+      tabIndex={disabled ? -1 : 0}
+      onKeyDown={(event: KeyboardEvent) =>
+        (event.key === 'Enter' || event.key === ' ') && !disabled && onClick && onClick()
+      }
+      role="button"
+      aria-label={`Play ${title}`}
+    >
       <div className={posterClassNames} style={{ backgroundImage: posterSource ? `url(${posterSource})` : '' }}>
         <div className={styles.meta}>
           <div className={styles.title}>{featured ? title : ''}</div>
diff --git a/src/components/Dropdown/Dropdown.module.scss b/src/components/Dropdown/Dropdown.module.scss
index 760630ac1..7cbe92222 100644
--- a/src/components/Dropdown/Dropdown.module.scss
+++ b/src/components/Dropdown/Dropdown.module.scss
@@ -65,7 +65,9 @@ $select-focus: theme.$primary-color;
     background-image: linear-gradient(to top, #ddd, #eee 33%);
     cursor: not-allowed;
   }
-  &:hover {
+  &:hover,
+  &:focus {
+    outline: none;
     border-color: $select-focus;
   }
 
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 45c3e6e3f..309aaafdc 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -15,8 +15,8 @@ type Props = {
 
 const Dropdown: React.FC<Props> = ({ name, value, defaultLabel, options, onClick, onChange, optionsStyle }: Props) => {
   return (
-    <div className={styles.dropdown}>
-      <select className={styles.select} name={name} value={value} onClick={onClick} onChange={onChange}>
+    <div className={styles.dropdown} tabIndex={0}>
+      <select className={styles.select} name={name} value={value} onClick={onClick} onChange={onChange} tabIndex={-1}>
         <option className={classNames(styles.option, optionsStyle)} value="">
           {defaultLabel}
         </option>
diff --git a/src/components/Filter/__snapshots__/Filter.test.tsx.snap b/src/components/Filter/__snapshots__/Filter.test.tsx.snap
index d88059edf..fe2c69da4 100644
--- a/src/components/Filter/__snapshots__/Filter.test.tsx.snap
+++ b/src/components/Filter/__snapshots__/Filter.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`<Filter> renders Filter 1`] = `
         aria-label="close menu"
         class="iconButton"
         role="button"
+        tabindex="0"
       >
         <svg
           aria-hidden="true"
@@ -43,6 +44,7 @@ exports[`<Filter> renders Filter 1`] = `
     >
       <div
         class="menuButton"
+        tabindex="0"
       >
         <span>
           x
@@ -50,6 +52,7 @@ exports[`<Filter> renders Filter 1`] = `
       </div>
       <div
         class="menuButton"
+        tabindex="0"
       >
         <span>
           y
@@ -57,6 +60,7 @@ exports[`<Filter> renders Filter 1`] = `
       </div>
       <div
         class="menuButton"
+        tabindex="0"
       >
         <span>
           z
@@ -64,6 +68,7 @@ exports[`<Filter> renders Filter 1`] = `
       </div>
       <div
         class="menuButton"
+        tabindex="0"
       >
         <span>
           bb
diff --git a/src/components/FilterModal/__snapshots__/FilterModal.test.tsx.snap b/src/components/FilterModal/__snapshots__/FilterModal.test.tsx.snap
index 45788dc25..ef93415dc 100644
--- a/src/components/FilterModal/__snapshots__/FilterModal.test.tsx.snap
+++ b/src/components/FilterModal/__snapshots__/FilterModal.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`<FilterModal> renders and matches snapshot 1`] = `
         aria-label="close menu"
         class="iconButton"
         role="button"
+        tabindex="0"
       >
         <svg
           aria-hidden="true"
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index c6f66e0b2..bdf4cafab 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -4,9 +4,9 @@ import classNames from 'classnames';
 import ButtonLink from '../ButtonLink/ButtonLink';
 import Logo from '../Logo/Logo';
 import Menu from '../../icons/Menu';
+import IconButton from '../../components/IconButton/IconButton';
 
 import styles from './Header.module.scss';
-import IconButton from '../../components/IconButton/IconButton';
 
 type TypeHeader = 'static' | 'fixed';
 
diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap
index 5cf0b9a3d..7635ccf18 100644
--- a/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`<Header /> renders header 1`] = `
           aria-label="open menu"
           class="iconButton"
           role="button"
+          tabindex="0"
         >
           <svg
             aria-hidden="true"
diff --git a/src/components/IconButton/IconButton.module.scss b/src/components/IconButton/IconButton.module.scss
index 772a0ad59..61ab48bb7 100644
--- a/src/components/IconButton/IconButton.module.scss
+++ b/src/components/IconButton/IconButton.module.scss
@@ -11,6 +11,7 @@
   cursor: pointer;
   opacity: 0.7;
   transition: transform 0.1s ease;
+  outline-color: var(--highlight-color, white);
 
   &:hover {
     transform: scale(1.1);
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
index 02658efb5..20f93ef70 100644
--- a/src/components/IconButton/IconButton.tsx
+++ b/src/components/IconButton/IconButton.tsx
@@ -6,11 +6,21 @@ type Props = {
   onClick?: () => void;
   children: JSX.Element;
   'aria-label': string;
+  tabIndex?: number;
 };
 
-const IconButton: React.FC<Props> = ({ children, onClick, 'aria-label': ariaLabel }: Props) => {
+const IconButton: React.FC<Props> = ({ children, onClick, 'aria-label': ariaLabel, tabIndex = 0 }: Props) => {
   return (
-    <div className={styles.iconButton} onClick={onClick} aria-label={ariaLabel} role="button">
+    <div
+      className={styles.iconButton}
+      onClick={onClick}
+      aria-label={ariaLabel}
+      role="button"
+      tabIndex={tabIndex}
+      onKeyDown={(event: React.KeyboardEvent) =>
+        (event.key === 'Enter' || event.key === ' ') && tabIndex >= 0 && onClick && onClick()
+      }
+    >
       {children}
     </div>
   );
diff --git a/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap b/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
index 86a187abf..d1aec7a3d 100644
--- a/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
+++ b/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`<IconButton> renders and matches snapshot 1`] = `
     aria-label="Icon button"
     class="iconButton"
     role="button"
+    tabindex="0"
   >
     <svg
       aria-hidden="true"
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index a9dcff8e3..e985a459b 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -6,9 +6,9 @@ import Sidebar from '../Sidebar/Sidebar';
 import DynamicBlur from '../DynamicBlur/DynamicBlur';
 import { ConfigContext } from '../../providers/ConfigProvider';
 import { UIStateContext } from '../../providers/uiStateProvider';
+import MenuButton from '../../components/MenuButton/MenuButton';
 
 import styles from './Layout.module.scss';
-import MenuButton from '../../components/MenuButton/MenuButton';
 
 type LayoutProps = {
   children?: ReactNode;
@@ -34,7 +34,12 @@ const Layout: FC<LayoutProps> = ({ children }) => {
         isOpen={sideBarOpen}
         onClose={() => setSideBarOpen(false)}
         playlistMenuItems={menu.map((item) => (
-          <MenuButton key={item.playlistId} label={item.label} to={`/p/${item.playlistId}`} />
+          <MenuButton
+            key={item.playlistId}
+            label={item.label}
+            to={`/p/${item.playlistId}`}
+            tabIndex={sideBarOpen ? 0 : -1}
+          />
         ))}
       />
       {children}
diff --git a/src/components/Layout/__snapshots__/Layout.test.tsx.snap b/src/components/Layout/__snapshots__/Layout.test.tsx.snap
index c9b27ca90..077800b59 100644
--- a/src/components/Layout/__snapshots__/Layout.test.tsx.snap
+++ b/src/components/Layout/__snapshots__/Layout.test.tsx.snap
@@ -16,6 +16,7 @@ exports[`<Layout /> renders layout 1`] = `
             aria-label="open menu"
             class="iconButton"
             role="button"
+            tabindex="0"
           >
             <svg
               aria-hidden="true"
@@ -76,6 +77,7 @@ exports[`<Layout /> renders layout 1`] = `
           aria-label="close menu"
           class="iconButton"
           role="button"
+          tabindex="-1"
         >
           <svg
             aria-hidden="true"
@@ -103,6 +105,7 @@ exports[`<Layout /> renders layout 1`] = `
           aria-current="page"
           class="menuButton active"
           href="/"
+          tabindex="-1"
         >
           <span>
             Home
@@ -114,6 +117,7 @@ exports[`<Layout /> renders layout 1`] = `
         <a
           class="menuButton"
           href="/u"
+          tabindex="-1"
         >
           <span>
             Settings
diff --git a/src/components/MenuButton/MenuButton.module.scss b/src/components/MenuButton/MenuButton.module.scss
index a332f25bb..77e9f597a 100644
--- a/src/components/MenuButton/MenuButton.module.scss
+++ b/src/components/MenuButton/MenuButton.module.scss
@@ -24,6 +24,7 @@
   cursor: pointer;
   opacity: 0.7;
   transition: background 0.1s ease;
+  outline-color: var(--highlight-color, white);
 
   @media (hover: hover) and (pointer: fine) {
     &:hover,
diff --git a/src/components/MenuButton/MenuButton.tsx b/src/components/MenuButton/MenuButton.tsx
index 7c49b19dc..865bfe5bb 100644
--- a/src/components/MenuButton/MenuButton.tsx
+++ b/src/components/MenuButton/MenuButton.tsx
@@ -8,20 +8,21 @@ type Props = {
   label?: string;
   to?: string;
   onClick?: () => void;
+  tabIndex?: number;
   active?: boolean;
 };
 
-const MenuButton: React.FC<Props> = ({ label, to, onClick, active = false }: Props) => {
+const MenuButton: React.FC<Props> = ({ label, to, onClick, tabIndex = 0, active = false }: Props) => {
   if (to) {
     return (
-      <NavLink className={styles.menuButton} activeClassName={styles.active} to={to} exact>
+      <NavLink className={styles.menuButton} activeClassName={styles.active} to={to} tabIndex={tabIndex} exact>
         <span className={styles.label}>{label}</span>
       </NavLink>
     );
   }
 
   return (
-    <div className={classNames(styles.menuButton, { [styles.active]: active })} onClick={onClick}>
+    <div className={classNames(styles.menuButton, { [styles.active]: active })} onClick={onClick} tabIndex={tabIndex}>
       <span className={styles.label}>{label}</span>
     </div>
   );
diff --git a/src/components/MenuButton/__snapshots__/MenuButton.test.tsx.snap b/src/components/MenuButton/__snapshots__/MenuButton.test.tsx.snap
index aa13c1d6a..f85bcf058 100644
--- a/src/components/MenuButton/__snapshots__/MenuButton.test.tsx.snap
+++ b/src/components/MenuButton/__snapshots__/MenuButton.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`<MenuButton> renders and matches snapshot 1`] = `
 <div>
   <div
     class="menuButton"
+    tabindex="0"
   >
     <span>
       Label
diff --git a/src/components/Root/__snapshots__/Root.test.tsx.snap b/src/components/Root/__snapshots__/Root.test.tsx.snap
index 05361c298..c6349cb63 100644
--- a/src/components/Root/__snapshots__/Root.test.tsx.snap
+++ b/src/components/Root/__snapshots__/Root.test.tsx.snap
@@ -16,6 +16,7 @@ exports[`<Root /> renders and matches snapshot 1`] = `
             aria-label="open menu"
             class="iconButton"
             role="button"
+            tabindex="0"
           >
             <svg
               aria-hidden="true"
@@ -75,6 +76,7 @@ exports[`<Root /> renders and matches snapshot 1`] = `
           aria-label="close menu"
           class="iconButton"
           role="button"
+          tabindex="-1"
         >
           <svg
             aria-hidden="true"
@@ -101,6 +103,7 @@ exports[`<Root /> renders and matches snapshot 1`] = `
         <a
           class="menuButton"
           href="/"
+          tabindex="-1"
         >
           <span>
             Home
@@ -112,6 +115,7 @@ exports[`<Root /> renders and matches snapshot 1`] = `
         <a
           class="menuButton"
           href="/u"
+          tabindex="-1"
         >
           <span>
             Settings
diff --git a/src/components/Shelf/Shelf.module.scss b/src/components/Shelf/Shelf.module.scss
index e3400e1f8..6ea86f499 100644
--- a/src/components/Shelf/Shelf.module.scss
+++ b/src/components/Shelf/Shelf.module.scss
@@ -32,6 +32,7 @@
 
 .arrow {
   cursor: pointer;
+  outline-color: var(--highlight-color, white);
   transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
   > svg {
     width: 30px;
diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
index 388caab5e..5ef7c0ffb 100644
--- a/src/components/Shelf/Shelf.tsx
+++ b/src/components/Shelf/Shelf.tsx
@@ -50,6 +50,11 @@ const Shelf: React.FC<ShelfProps> = ({
   const isLargeScreen = breakpoint >= Breakpoint.md;
   const imageSourceWidth = (featured ? 640 : 320) * (window.devicePixelRatio > 1 || isLargeScreen ? 2 : 1);
 
+  const handleSlide = (doSlide: () => void): void => {
+    setDidSlideBefore(true);
+    doSlide();
+  };
+
   if (!playlist) return null;
 
   return (
@@ -62,30 +67,30 @@ const Shelf: React.FC<ShelfProps> = ({
         showControls={!matchMedia('(hover: none)').matches}
         transitionTime={loading ? '0s' : '0.3s'}
         spacing={12}
-        renderLeftControl={(handleClick) => (
+        renderLeftControl={(doSlide) => (
           <div
             className={didSlideBefore ? styles.arrow : styles.arrowDisabled}
             role="button"
             tabIndex={didSlideBefore ? 0 : -1}
             aria-label="Slide left"
-            onClick={() => {
-              setDidSlideBefore(true);
-              handleClick();
-            }}
+            onKeyDown={(event: React.KeyboardEvent) =>
+              (event.key === 'Enter' || event.key === ' ') && handleSlide(doSlide)
+            }
+            onClick={() => handleSlide(doSlide)}
           >
             <ArrowLeft />
           </div>
         )}
-        renderRightControl={(handleClick) => (
+        renderRightControl={(doSlide) => (
           <div
             className={styles.arrow}
             role="button"
             tabIndex={0}
             aria-label="Slide right"
-            onClick={() => {
-              setDidSlideBefore(true);
-              handleClick();
-            }}
+            onKeyDown={(event: React.KeyboardEvent) =>
+              (event.key === 'Enter' || event.key === ' ') && handleSlide(doSlide)
+            }
+            onClick={() => handleSlide(doSlide)}
           >
             <ArrowRight />
           </div>
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 9e287490e..ada1b21ed 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -1,8 +1,8 @@
 import React, { Fragment } from 'react';
 import classNames from 'classnames';
+
 import MenuButton from '../../components/MenuButton/MenuButton';
 import IconButton from '../../components/IconButton/IconButton';
-
 import Close from '../../icons/Close';
 
 import styles from './Sidebar.module.scss';
@@ -28,15 +28,15 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onClose, playlistMenuItems })
         })}
       >
         <div className={styles.heading}>
-          <IconButton onClick={onClose} aria-label="close menu">
+          <IconButton onClick={onClose} aria-label="close menu" tabIndex={isOpen ? 0 : -1}>
             <Close />
           </IconButton>
         </div>
         <nav className={styles.group} onClick={onClose}>
-          <MenuButton label="Home" to="/" />
+          <MenuButton label="Home" to="/" tabIndex={isOpen ? 0 : -1} />
           {playlistMenuItems}
           <hr className={styles.divider} />
-          <MenuButton label="Settings" to="/u" />
+          <MenuButton label="Settings" to="/u" tabIndex={isOpen ? 0 : -1} />
         </nav>
       </div>
     </Fragment>
diff --git a/src/components/Sidebar/__snapshots__/SideBar.test.tsx.snap b/src/components/Sidebar/__snapshots__/SideBar.test.tsx.snap
index b0a911211..f0962c8d8 100644
--- a/src/components/Sidebar/__snapshots__/SideBar.test.tsx.snap
+++ b/src/components/Sidebar/__snapshots__/SideBar.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`<SideBar /> renders sideBar 1`] = `
         aria-label="close menu"
         class="iconButton"
         role="button"
+        tabindex="0"
       >
         <svg
           aria-hidden="true"
@@ -42,6 +43,7 @@ exports[`<SideBar /> renders sideBar 1`] = `
         aria-current="page"
         class="menuButton active"
         href="/"
+        tabindex="0"
       >
         <span>
           Home
@@ -62,6 +64,7 @@ exports[`<SideBar /> renders sideBar 1`] = `
       <a
         class="menuButton"
         href="/u"
+        tabindex="0"
       >
         <span>
           Settings
diff --git a/src/components/TileDock/TileDock.tsx b/src/components/TileDock/TileDock.tsx
index 67944c790..c58c09fa7 100644
--- a/src/components/TileDock/TileDock.tsx
+++ b/src/components/TileDock/TileDock.tsx
@@ -167,7 +167,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,
@@ -196,7 +196,6 @@ const TileDock = <T extends unknown>({
           return (
             <li
               key={tile.key}
-              tabIndex={isInView ? 0 : -1}
               style={{
                 width: `${tileWidth}%`,
                 paddingLeft: spacing / 2,
diff --git a/src/components/VirtualizedGrid/VirtualizedGrid.module.scss b/src/components/VirtualizedGrid/VirtualizedGrid.module.scss
new file mode 100644
index 000000000..4eaee9501
--- /dev/null
+++ b/src/components/VirtualizedGrid/VirtualizedGrid.module.scss
@@ -0,0 +1,6 @@
+.grid {
+  overflow: visible !important;
+  > div {
+    overflow: visible !important;
+  }
+}
diff --git a/src/components/VirtualizedGrid/VirtualizedGrid.scss b/src/components/VirtualizedGrid/VirtualizedGrid.scss
deleted file mode 100644
index ed03b0397..000000000
--- a/src/components/VirtualizedGrid/VirtualizedGrid.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.ReactVirtualized__Grid {
-  overflow: visible !important;
-}
diff --git a/src/components/VirtualizedGrid/VirtualizedGrid.tsx b/src/components/VirtualizedGrid/VirtualizedGrid.tsx
index c52d268c8..fa2688fe9 100644
--- a/src/components/VirtualizedGrid/VirtualizedGrid.tsx
+++ b/src/components/VirtualizedGrid/VirtualizedGrid.tsx
@@ -3,7 +3,8 @@ import { Grid, WindowScroller, AutoSizer, GridCellRenderer } from 'react-virtual
 
 import scrollbarSize from '../../utils/domHelpers';
 import useBreakpoint, { Breakpoint, Breakpoints } from '../../hooks/useBreakpoint';
-import './VirtualizedGrid.scss';
+
+import styles from './VirtualizedGrid.module.scss';
 
 type Props = {
   cellRenderer: GridCellRenderer;
@@ -27,6 +28,8 @@ const VirtualizedGrid = ({ cellRenderer, rowCount, cols, spacing }: Props) => {
         <AutoSizer disableHeight>
           {({ width }) => (
             <Grid
+              className={styles.grid}
+              tabIndex={-1}
               autoHeight
               cellRenderer={cellRenderer}
               onScroll={onChildScroll}