diff --git a/packages/gatsby-theme-carbon/src/components/Container/Container.js b/packages/gatsby-theme-carbon/src/components/Container/Container.js
index bab47c2fa..a03ca4dd2 100644
--- a/packages/gatsby-theme-carbon/src/components/Container/Container.js
+++ b/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}
       >
diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js
index f96a360c3..3c2a0a4ce 100644
--- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js
+++ b/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
diff --git a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js b/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js
index 9230eb60c..06df4d6b4 100644
--- a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js
+++ b/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js
@@ -1,10 +1,25 @@
-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 lgBreakpoint = useMedia('min-width: 1056px');
   const { switcherIsOpen } = useContext(NavContext);
+  const listRef = useRef(null);
+  const [height, setHeight] = useState(null);
+
+  // calculate and update height
+  useEffect(() => {
+    if (switcherIsOpen) {
+      setHeight(listRef.current.offsetHeight + 40);
+    } else {
+      setHeight(0);
+    }
+  }, [listRef, switcherIsOpen]);
+
+  const maxHeight = !lgBreakpoint && switcherIsOpen ? '100%' : `${height}px`;
 
   return (
     <nav
@@ -12,8 +27,9 @@ const Switcher = ({ children }) => {
       aria-label="IBM Design ecosystem navigation"
       aria-expanded={switcherIsOpen}
       tabIndex="-1"
+      style={{ maxHeight }}
     >
-      <ul>{children}</ul>
+      <ul ref={listRef}>{children}</ul>
     </nav>
   );
 };
@@ -33,13 +49,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}
diff --git a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.module.scss b/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.module.scss
index cda879f2f..c966a748d 100644
--- a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.module.scss
+++ b/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;
   }
 }
@@ -33,10 +32,6 @@
   border-bottom: 1px solid $inverse-02;
   box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.2);
   @include carbon--breakpoint("lg") {
-    // 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
   }
 }