feat(switcher): automate max height, closes on bg click, update disabled tab index

packages/gatsby-theme-carbon/src/components/Container/Container.js

@@ -50,6 +50,9 @@ const Container = ({ children, homepage, theme }) => {
       />
       <main
         id="main-content"
+        role="presentation" // needed for jsx-a11y/no-noninteractive-element-interactions
+        onClick={closeNavs}
+        onKeyPress={closeNavs}
         aria-hidden={overlayVisible}
         className={containerClassNames}
       >

packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js

@@ -11,9 +11,12 @@ import LeftNavWrapper from './LeftNavWrapper';
 import { sideNavDark } from './LeftNav.module.scss';
 
 const LeftNav = (props) => {
-  const { leftNavIsOpen, leftNavScrollTop, setLeftNavScrollTop } = useContext(
-    NavContext
-  );
+  const {
+    leftNavIsOpen,
+    leftNavScrollTop,
+    setLeftNavScrollTop,
+    toggleNavState,
+  } = useContext(NavContext);
 
   const sideNavRef = useRef();
   const sideNavListRef = useRef();
@@ -36,9 +39,17 @@ const LeftNav = (props) => {
 
   const navItems = useNavItems();
 
+  const closeSwitcher = () => {
+    toggleNavState('switcherIsOpen', 'close');
+  };
+
   // TODO: replace old addon website styles with sass modules, move to wrapper
   return (
-    <LeftNavWrapper expanded={leftNavIsOpen}>
+    <LeftNavWrapper
+      expanded={leftNavIsOpen}
+      onClick={closeSwitcher}
+      onKeyPress={closeSwitcher}
+    >
       <SideNav
         ref={sideNavRef}
         expanded

packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js

@@ -1,19 +1,37 @@
-import React, { useContext } from 'react';
+import React, { useContext, useRef, useEffect, useState } from 'react';
 import cx from 'classnames';
+import useMedia from 'use-media';
 import NavContext from '../../util/context/NavContext';
 import { nav, open, divider, link, linkDisabled } from './Switcher.module.scss';
 
 const Switcher = ({ children }) => {
   const { switcherIsOpen } = useContext(NavContext);
 
+  const listRef = useRef(null);
+  const [height, setHeight] = useState(null);
+
+  // calculate and update height
+  useEffect(() => {
+    switcherIsOpen
+      ? setHeight(listRef.current.offsetHeight + 40)
+      : setHeight(0);
+  }, [listRef, switcherIsOpen]);
+
+  const lgBreakpoint = useMedia('min-width: 1056px');
+  const styles = {
+    /* eslint no-unused-expressions: [2, { allowShortCircuit: true, allowTernary: true }] */
+    maxHeight: !lgBreakpoint && switcherIsOpen ? '100%' : `${height}px`,
+  };
+
   return (
     <nav
       className={cx(nav, { [open]: switcherIsOpen })}
       aria-label="IBM Design ecosystem navigation"
       aria-expanded={switcherIsOpen}
       tabIndex="-1"
+      style={styles}
     >
-      <ul>{children}</ul>
+      <ul ref={listRef}>{children}</ul>
     </nav>
   );
 };
@@ -33,13 +51,14 @@ export const SwitcherLink = ({
   const href = disabled || !hrefProp ? undefined : hrefProp;
   const className = disabled ? linkDisabled : link;
   const { switcherIsOpen } = useContext(NavContext);
+  const openTabIndex = disabled ? '-1' : 0;
 
   return (
     <li>
       <a
         aria-disabled={disabled}
         role="button"
-        tabIndex={switcherIsOpen ? 0 : '-1'}
+        tabIndex={switcherIsOpen ? openTabIndex : '-1'}
         className={className}
         href={href}
         {...rest}

packages/gatsby-theme-carbon/src/components/Switcher/Switcher.module.scss

@@ -13,7 +13,6 @@
   transition: all $duration--fast-02 carbon--motion("exit");
   @include carbon--breakpoint("lg") {
     transform: translateX(0);
-    max-height: 0;
     height: auto;
   }
 }
@@ -36,7 +35,6 @@
     // https://css-tricks.com/using-css-transitions-auto-dimensions/
     // Tied to the height of the app switcher. Allows for animating up to auto.
     // Matching the height exactly is imperitive to keep the correct animation timing.
-    max-height: 538px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5); // header__menu shadow
   }
 }