feat(project): make all accessible by keyboard

jwplayer · May 26, 2021 · 14c10af · 14c10af
1 parent 8fab1dd
commit 14c10af
Show file tree

Hide file tree

Showing 26 changed files with 102 additions and 34 deletions.
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
@@ -30,12 +30,16 @@
 
   @media (hover: hover) and (pointer: fine) {
     &:hover:not(.active),
+    &:focus:not(.active),
     &:active {
       z-index: 1;
       background-color: rgba(variables.$black, 0.8);
       border-color: var(--highlight-color, white);
       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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -12,6 +12,7 @@ exports[`<Filter> renders Filter 1`] = `
         aria-label="close menu"
         class="iconButton"
         role="button"
+        tabindex="0"
       >
         <svg
           aria-hidden="true"
@@ -43,27 +44,31 @@ exports[`<Filter> renders Filter 1`] = `
     >
       <div
         class="menuButton"
+        tabindex="0"
       >
         <span>
           x
         </span>
       </div>
       <div
         class="menuButton"
+        tabindex="0"
       >
         <span>
           y
         </span>
       </div>
       <div
         class="menuButton"
+        tabindex="0"
       >
         <span>
           z
         </span>
       </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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>