fix(a11y): header navigation list

jwplayer · Apr 12, 2024 · 1d22ab0 · 1d22ab0
1 parent 051e46f
commit 1d22ab0
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 30 deletions.
diff --git a/packages/ui-react/src/components/Header/Header.module.scss b/packages/ui-react/src/components/Header/Header.module.scss
@@ -77,7 +77,17 @@
   flex: 1;
   align-items: center;
 
-  > a {
+  > ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+
+    li {
+      float: left;
+    }
+  }
+
+  a {
     height: 36px;
     min-height: 36px;
     margin: 0 6px;
@@ -177,6 +187,28 @@
   }
 }
 
+.navButton {
+  overflow: visible;
+
+  &::after {
+    position: absolute;
+    bottom: calc(((variables.$header-height - 36px) / 2) * -1);
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: variables.$white;
+    content: '';
+  }
+
+  body:global(.is-tabbing) & {
+    &:focus {
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+
 //
 // mediaQueries
 // --------------------------------

diff --git a/packages/ui-react/src/components/Header/Header.tsx b/packages/ui-react/src/components/Header/Header.tsx
@@ -25,6 +25,11 @@ import styles from './Header.module.scss';
 
 type TypeHeader = 'static' | 'fixed';
 
+type NavItem = {
+  label: string;
+  to: string;
+};
+
 type Props = {
   headerType?: TypeHeader;
   onMenuButtonClick: () => void;
@@ -52,6 +57,7 @@ type Props = {
   onLanguageClick: (code: string) => void;
   favoritesEnabled?: boolean;
   siteName?: string;
+  navItems?: NavItem[];
 
   profilesData?: {
     currentProfile: Profile | null;
@@ -90,6 +96,7 @@ const Header: React.FC<Props> = ({
   favoritesEnabled,
   siteName,
   profilesData: { currentProfile, profiles, profilesEnabled, selectProfile, isSelectingProfile } = {},
+  navItems = [],
 }) => {
   const { t } = useTranslation('menu');
   const [logoLoaded, setLogoLoaded] = useState(false);
@@ -197,6 +204,21 @@ const Header: React.FC<Props> = ({
     );
   };
 
+  const renderNav = () => {
+    if (navItems.length === 0) {
+      return children;
+    }
+    return (
+      <ul>
+        {navItems.map((item, index) => (
+          <li key={index}>
+            <Button activeClassname={styles.navButton} label={item.label} to={item.to} variant="text" />
+          </li>
+        ))}
+      </ul>
+    );
+  };
+
   return (
     <header className={headerClassName}>
       <div className={styles.container}>
@@ -220,7 +242,7 @@ const Header: React.FC<Props> = ({
             <Logo alt={t('logo_alt', { siteName })} src={logoSrc} onLoad={() => setLogoLoaded(true)} />
           </div>
         )}
-        <nav className={styles.nav}>{logoLoaded || !logoSrc ? children : null}</nav>
+        <nav className={styles.nav}>{logoLoaded || !logoSrc ? renderNav() : null}</nav>
         <div className={styles.actions}>
           {renderSearch()}
           {renderLanguageDropdown()}

diff --git a/packages/ui-react/src/containers/Layout/Layout.module.scss b/packages/ui-react/src/containers/Layout/Layout.module.scss
@@ -19,25 +19,3 @@
 .main {
   height: 100%;
 }
-
-.headerButton {
-    overflow: visible;
-
-    &::after {
-      position: absolute;
-      bottom: calc(((variables.$header-height - 36px) / 2) * -1);
-      left: 0;
-      width: 100%;
-      height: 2px;
-      background-color: variables.$white;
-      content: '';
-    }
-
-    body:global(.is-tabbing) & {
-      &:focus {
-        &::after {
-          display: none;
-        }
-      }
-    }
-}
diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -147,6 +147,8 @@ const Layout = () => {
     );
   };
 
+  const navItems = [{ label: t('home'), to: '/' }, ...menu.map((item) => ({ label: item.label, to: playlistURL(item.contentId) }))];
+
   const containerProps = { inert: sideBarOpen ? '' : undefined }; // inert is not yet officially supported in react
 
   return (
@@ -197,12 +199,8 @@ const Layout = () => {
             selectProfile: ({ avatarUrl, id }) => selectProfile.mutate({ id, avatarUrl }),
             isSelectingProfile: selectProfile.isLoading,
           }}
-        >
-          <Button activeClassname={styles.headerButton} label={t('home')} to="/" variant="text" />
-          {menu.map((item) => (
-            <Button activeClassname={styles.headerButton} key={item.contentId} label={item.label} to={playlistURL(item.contentId)} variant="text" />
-          ))}
-        </Header>
+          navItems={navItems}
+        />
         <main id="content" className={styles.main} tabIndex={-1}>
           <Outlet />
         </main>