Tab index improvements. (#6427)

docs/components/Header.tsx

@@ -1,12 +1,20 @@
 /** @jsx jsx  */
-import { createContext, useContext, useEffect, useState, useRef, ReactNode } from 'react';
+import {
+  createContext,
+  useContext,
+  useCallback,
+  useEffect,
+  useState,
+  useRef,
+  ReactNode,
+} from 'react';
 import { useRouter } from 'next/router';
 import { jsx } from '@emotion/react';
 import Link from 'next/link';
+import debounce from 'lodash.debounce';
 
-import { useCallback } from 'react';
+import { BREAK_POINTS } from '../lib/media';
 import { useMediaQuery } from '../lib/media';
-
 import { SearchField } from './primitives/SearchField';
 import { Highlight } from './primitives/Highlight';
 import { Wrapper } from './primitives/Wrapper';
@@ -20,8 +28,11 @@ import { GitHub } from './icons/GitHub';
 // TODO: Add in search for mobile via this button
 // import { Search } from './icons/Search';
 
-type HeaderContextType = { mobileNavIsOpen: boolean };
-const HeaderContext = createContext<HeaderContextType>({ mobileNavIsOpen: false });
+type HeaderContextType = { mobileNavIsOpen: boolean; desktopOpenState: number };
+const HeaderContext = createContext<HeaderContextType>({
+  mobileNavIsOpen: false,
+  desktopOpenState: -1,
+});
 export const useHeaderContext = () => useContext(HeaderContext);
 
 function Logo() {
@@ -94,6 +105,7 @@ function LinkItem({ children, href }: { children: ReactNode; href: string }) {
     <span css={mq({ display: ['none', 'inline'], fontWeight: 600 })}>
       <NavItem
         isActive={isActive}
+        alwaysVisible
         href={href}
         css={{
           padding: '0 !important',
@@ -108,10 +120,37 @@ function LinkItem({ children, href }: { children: ReactNode; href: string }) {
 export function Header() {
   const mq = useMediaQuery();
   const router = useRouter();
-  const [mobileNavIsOpen, setMobileNavIsOpen] = useState(false);
+
   const menuRef = useRef<HTMLDivElement>(null);
   const headerRef = useRef<HTMLElement>(null);
 
+  const [mobileNavIsOpen, setMobileNavIsOpen] = useState(false);
+  const [desktopOpenState, setDesktopOpenState] = useState(-1);
+
+  useEffect(() => {
+    const listener = () => {
+      setMobileNavIsOpen(false);
+      setDesktopOpenState(-1);
+      const width = Math.max(
+        document.body.scrollWidth,
+        document.documentElement.scrollWidth,
+        document.body.offsetWidth,
+        document.documentElement.offsetWidth,
+        document.documentElement.clientWidth
+      );
+      if (width > BREAK_POINTS.sm) {
+        setDesktopOpenState(-1);
+      } else {
+        setDesktopOpenState(-1);
+      }
+    };
+    window.addEventListener('resize', debounce(listener, 130));
+
+    return () => {
+      window.removeEventListener('resize', debounce(listener, 130));
+    };
+  }, [setDesktopOpenState]);
+
   useEffect(() => {
     document.body.style.overflow = 'auto';
     // search - init field
@@ -270,7 +309,7 @@ export function Header() {
         >
           <GitHub css={{ height: '1.5em' }} />
         </a>
-        <HeaderContext.Provider value={{ mobileNavIsOpen }}>
+        <HeaderContext.Provider value={{ mobileNavIsOpen, desktopOpenState }}>
           <div
             ref={menuRef}
             css={mq({

docs/components/docs/Navigation.tsx

@@ -42,19 +42,27 @@ type NavItemProps = {
   href: string;
   isActive?: boolean;
   isPlaceholder?: boolean;
+  alwaysVisible?: boolean;
 } & AnchorHTMLAttributes<HTMLAnchorElement>;
 
-export function NavItem({ href, isActive: _isActive, isPlaceholder, ...props }: NavItemProps) {
+export function NavItem({
+  href,
+  isActive: _isActive,
+  isPlaceholder,
+  alwaysVisible,
+  ...props
+}: NavItemProps) {
   const { pathname } = useRouter();
   const mq = useMediaQuery();
-  let isActive = _isActive || pathname === href;
+  const isActive = _isActive || pathname === href;
   const ctx = useHeaderContext();
-  const isOpen = ctx ? ctx.mobileNavIsOpen : true;
+  const isMobileNavOpen = ctx ? ctx.mobileNavIsOpen : true;
+  const desktopOpenState = ctx ? ctx.desktopOpenState : -1;
 
   return (
     <Link href={href} passHref>
       <a
-        tabIndex={isOpen ? 0 : -1}
+        {...(alwaysVisible ? {} : { tabIndex: isMobileNavOpen ? 0 : desktopOpenState })}
         css={mq({
           display: 'block',
           textDecoration: 'none',
@@ -84,14 +92,15 @@ type PrimaryNavItemProps = {
 
 export function PrimaryNavItem({ href, children }: PrimaryNavItemProps) {
   const { pathname } = useRouter();
-  let isActive = pathname === href;
+  const isActive = pathname === href;
   const ctx = useHeaderContext();
-  const isOpen = ctx ? ctx.mobileNavIsOpen : true;
+  const isMobileNavOpen = ctx ? ctx.mobileNavIsOpen : true;
+  const desktopOpenState = ctx ? ctx.desktopOpenState : -1;
 
   return (
     <Link href={href} passHref>
       <a
-        tabIndex={isOpen ? 0 : -1}
+        tabIndex={isMobileNavOpen ? 0 : desktopOpenState}
         css={{
           display: 'block',
           fontSize: '1rem',

docs/package.json

@@ -34,6 +34,7 @@
     "cypress": "^5.6.0",
     "date-fns": "^2.23.0",
     "facepaint": "^1.2.1",
+    "lodash.debounce": "^4.0.8",
     "next": "npm:next@^11.1.0",
     "next-compose-plugins": "^2.2.1",
     "prism-react-renderer": "^1.2.1",
@@ -45,6 +46,7 @@
     "remark-hint": "^1.0.10"
   },
   "devDependencies": {
+    "@types/lodash.debounce": "^4.0.6",
     "next-sitemap": "^1.6.157",
     "start-server-and-test": "^1.13.1",
     "typescript": "^4.3.5"

yarn.lock

@@ -2879,7 +2879,14 @@
     "@types/koa-compose" "*"
     "@types/node" "*"
 
-"@types/lodash@^4.14.149":
+"@types/lodash.debounce@^4.0.6":
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.6.tgz#c5a2326cd3efc46566c47e4c0aa248dc0ee57d60"
+  integrity sha512-4WTmnnhCfDvvuLMaF3KV4Qfki93KebocUF45msxhYyjMttZDQYzHkO639ohhk8+oco2cluAFL3t5+Jn4mleylQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*", "@types/lodash@^4.14.149":
   version "4.14.172"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.172.tgz#aad774c28e7bfd7a67de25408e03ee5a8c3d028a"
   integrity sha512-/BHF5HAx3em7/KkzVKm3LrsD6HZAXuXO1AJZQ3cRRBZj4oHZDviWPYu0aEplAqDFNHZPW6d3G7KN+ONcCCC7pw==