a11y-mobile-toc

src/components/Layout/Layout.tsx

@@ -24,8 +24,10 @@ import {
 import { SpaceShip } from '@/components/SpaceShip';
 import { LEFT_NAV_LINKS, RIGHT_NAV_LINKS } from '@/utils/globalnav';
 import { LayoutProvider, LayoutHeader } from '@/components/Layout';
-import { TableOfContents } from '@/components/TableOfContents';
-import type { HeadingInterface } from '@/components/TableOfContents/TableOfContents';
+import {
+  TableOfContents,
+  type HeadingInterface
+} from '@/components/TableOfContents/TableOfContents';
 import { Breadcrumbs } from '@/components/Breadcrumbs';
 import { debounce } from '@/utils/debounce';
 import '@docsearch/css';
@@ -62,6 +64,7 @@ export const Layout = ({
   useCustomTitle?: boolean;
 }) => {
   const [menuOpen, toggleMenuOpen] = useState(false);
+  const [tocOpen, toggleTocOpen] = useState(false);
   const [colorMode, setColorMode] = useState<ColorMode>('system');
   const [tocHeadings, setTocHeadings] = useState<HeadingInterface[]>([]);
   const mainId = 'pageMain';
@@ -222,7 +225,9 @@ export const Layout = ({
         value={{
           colorMode,
           menuOpen,
+          tocOpen,
           toggleMenuOpen,
+          toggleTocOpen,
           handleColorModeChange
         }}
       >
@@ -257,6 +262,7 @@ export const Layout = ({
                   currentPlatform={currentPlatform}
                   pageType={pageType}
                   showLastUpdatedDate={showLastUpdatedDate}
+                  tocHeadings={tocHeadings}
                 ></LayoutHeader>
                 <View key={asPathWithNoHash} className="layout-main">
                   <Flex
@@ -281,7 +287,9 @@ export const Layout = ({
                     {children}
                     {showNextPrev && <NextPrevious />}
                   </Flex>
-                  {showTOC ? <TableOfContents headers={tocHeadings} /> : null}
+                  {showTOC ? (
+                    <TableOfContents headers={tocHeadings} forDesktop />
+                  ) : null}
                 </View>
                 <Footer hasTOC={showTOC} />
               </View>

src/components/Layout/LayoutHeader.tsx

@@ -8,7 +8,7 @@ import {
   ALGOLIA_INDEX_NAME,
   ALGOLIA_APP_ID
 } from '../../constants/algolia';
-import { IconMenu, IconDoubleChevron } from '@/components/Icons';
+import { IconTOC, IconDoubleChevron } from '@/components/Icons';
 import { Menu } from '@/components/Menu';
 import { LayoutContext } from '@/components/Layout';
 import { PlatformNavigator } from '@/components/PlatformNavigator';
@@ -19,23 +19,30 @@ import { PageLastUpdated } from '../PageLastUpdated';
 import Feedback from '../Feedback';
 import RepoActions from '../Menu/RepoActions';
 import { usePathWithoutHash } from '@/utils/usePathWithoutHash';
+import { TableOfContents } from '../TableOfContents';
+import { HeadingInterface } from '../TableOfContents/TableOfContents';
 
 export const LayoutHeader = ({
   currentPlatform,
   isGen1,
   pageType = 'inner',
   showLastUpdatedDate = true,
-  showTOC
+  showTOC,
+  tocHeadings
 }: {
   currentPlatform: Platform;
   isGen1: boolean;
   pageType?: 'home' | 'inner';
   showLastUpdatedDate: boolean;
   showTOC?: boolean;
+  tocHeadings: HeadingInterface[];
 }) => {
   const { menuOpen, toggleMenuOpen } = useContext(LayoutContext);
   const menuButtonRef = useRef<HTMLButtonElement>(null);
   const sidebarMenuButtonRef = useRef<HTMLButtonElement>(null);
+  const { tocOpen, toggleTocOpen } = useContext(LayoutContext);
+  const tocButtonRef = useRef<HTMLButtonElement>(null);
+  const sidebarTocButtonRef = useRef<HTMLButtonElement>(null);
   const router = useRouter();
   const asPathWithNoHash = usePathWithoutHash();
 
@@ -51,6 +58,18 @@ export const LayoutHeader = ({
     }
   };
 
+  const handleTocToggle = () => {
+    if (!tocOpen) {
+      toggleTocOpen(true);
+      // For keyboard navigators, move focus to the close menu button in the nav
+      setTimeout(() => sidebarTocButtonRef?.current?.focus(), 0);
+    } else {
+      toggleTocOpen(false);
+      // For keyboard navigators, move focus back to menu button in header
+      tocButtonRef?.current?.focus();
+    }
+  };
+
   // Search result transform function that will strip out the pageMain anchor tag
   // Algolia search results include the anchor tag where the content was found but since we
   // are aggregating records this ends up always being the pageMain anchor tag which is the
@@ -74,9 +93,20 @@ export const LayoutHeader = ({
           ref={menuButtonRef}
           className="search-menu-toggle mobile-toggle"
         >
-          <IconMenu aria-hidden="true" />
+          <IconTOC aria-hidden="true" />
           Menu
         </Button>
+        {showTOC ? (
+          <Button
+            onClick={() => handleTocToggle()}
+            size="small"
+            ref={tocButtonRef}
+            className="search-menu-toggle mobile-toggle"
+          >
+            <IconTOC aria-hidden="true" />
+            On this page
+          </Button>
+        ) : null}
 
         <View
           className={classNames(
@@ -149,6 +179,46 @@ export const LayoutHeader = ({
           </div>
         </View>
       </View>
+
+      {showTOC ? (
+        <View
+          className={classNames('layout-sidebar', 'right-menu', {
+            'layout-sidebar--expanded': tocOpen
+          })}
+        >
+          <View
+            className={classNames('layout-sidebar__backdrop', {
+              'layout-sidebar__backdrop--expanded': tocOpen
+            })}
+            onClick={() => toggleTocOpen(false)}
+          ></View>
+          <View
+            className={classNames('layout-sidebar__inner', 'right-menu', {
+              'layout-sidebar__inner--expanded-right': tocOpen
+            })}
+          >
+            <Button
+              size="small"
+              colorTheme="overlay"
+              className={classNames(
+                'layout-sidebar__mobile-toggle',
+                'right-menu',
+                {
+                  'layout-sidebar__mobile-toggle--open': tocOpen
+                }
+              )}
+              ref={sidebarTocButtonRef}
+              onClick={() => handleTocToggle()}
+            >
+              <IconDoubleChevron />
+              <VisuallyHidden>Close table of contents</VisuallyHidden>
+            </Button>
+            <div className="layout-sidebar-menu">
+              <TableOfContents headers={tocHeadings} forDesktop={false} />
+            </div>
+          </View>
+        </View>
+      ) : null}
     </View>
   );
 };

src/components/Layout/LayoutProvider.tsx

@@ -5,14 +5,18 @@ type LayoutContextType = {
   colorMode: ColorMode;
   handleColorModeChange: (value: ColorMode) => ColorMode;
   menuOpen: boolean;
+  tocOpen: boolean;
   toggleMenuOpen: Dispatch<SetStateAction<boolean>>;
+  toggleTocOpen: Dispatch<SetStateAction<boolean>>;
 };
 
 export const LayoutContext = createContext<LayoutContextType>({
   colorMode: 'system',
   handleColorModeChange: (value) => value,
   menuOpen: false,
-  toggleMenuOpen: () => {}
+  tocOpen: false,
+  toggleMenuOpen: () => {},
+  toggleTocOpen: () => {}
 });
 
 export function LayoutProvider({ value, children }) {

src/components/TableOfContents/TableOfContents.tsx

@@ -1,5 +1,6 @@
 import { Flex, View, Link, Heading } from '@aws-amplify/ui-react';
 import { IconTOC } from '@/components/Icons';
+
 export interface HeadingInterface {
   linkText: string;
   hash: string;
@@ -8,11 +9,18 @@ export interface HeadingInterface {
 }
 interface TableOfContents {
   headers?: HeadingInterface[];
+  forDesktop?: boolean;
 }
 
-export const TableOfContents = ({ headers }) => {
+export const TableOfContents = ({ headers, forDesktop }) => {
+  const hideOnMobile = forDesktop ? 'desktop-toc' : '';
+
   return (
-    <Flex as="nav" className="toc" aria-labelledby="tocHeader">
+    <Flex
+      as="nav"
+      className={`toc ${hideOnMobile}`}
+      aria-labelledby="tocHeader"
+    >
       {headers ? (
         <Heading level={2} id="tocHeader" className="toc-header">
           <IconTOC /> On this page

src/styles/footer.scss

@@ -47,7 +47,7 @@
   }
 }
 
-@media (min-width: $toc-min) {
+@media (min-width: $mq-mobile) {
   .footer {
     &--toc {
       margin-inline-end: var(--layout-toc-width);

src/styles/layout.scss

@@ -64,6 +64,11 @@
   gap: var(--amplify-space-small);
   padding: var(--amplify-space-medium);
   opacity: 0;
+  &.right-menu {
+    transform: rotate(180deg);
+    inset-inline-start: unset;
+    inset-inline-end: var(--layout-sidebar-width);
+  }
   &:focus {
     box-shadow: none;
   }
@@ -86,8 +91,22 @@
   display: grid;
   grid-template-rows: auto 1fr;
   overflow: visible;
+
+  &.right-menu {
+    position: fixed;
+    right: 0;
+    transform: translate(100%, 0);
+    border-right: none;
+    border-left: 1px solid var(--amplify-colors-neutral-20);
+  }
+
   &--expanded {
-    animation: menu 0.2s ease-out forwards;
+    animation: menuLeft 0.2s ease-out forwards;
+    animation-delay: 0.1s;
+  }
+
+  &--expanded-right {
+    animation: menuRight 0.2s ease-out forwards;
     animation-delay: 0.1s;
   }
 }
@@ -139,7 +158,7 @@
   z-index: 2;
 }
 
-@keyframes menu {
+@keyframes menuLeft {
   0% {
     transform: translate(-100%, 0);
   }
@@ -157,6 +176,15 @@
   }
 }
 
+@keyframes menuRight {
+  0% {
+    transform: translate(100%, 0);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
 @media (min-width: $mq-mobile) {
   .search-menu-toggle {
     display: none;
@@ -200,8 +228,11 @@
   }
 }
 
-@media (min-width: 1360px) {
+@media (min-width: $mq-mobile) {
   .main--toc {
     margin-inline-end: var(--layout-toc-width);
   }
+  .right-menu {
+    display: none;
+  }
 }

src/styles/search.scss

@@ -14,7 +14,7 @@
   }
 }
 
-@media (min-width: $toc-min) {
+@media (min-width: $mq-mobile) {
   .layout-search__search {
     &--toc {
       margin-inline-end: calc(

src/styles/toc.scss

@@ -3,6 +3,17 @@
   margin-top: var(--amplify-space-large);
   padding-block: var(--amplify-space-large);
   border-top: 1px solid var(--amplify-colors-neutral-20);
+
+  &.desktop-toc {
+    @media (max-width: $mq-mobile) {
+      display: none;
+    }
+  }
+
+  @media (min-width: $mq-mobile) {
+    margin-top: inherit;
+    border-top: inherit;
+  }
 }
 .toc-header {
   font-size: var(--amplify-font-sizes-medium);
@@ -12,6 +23,10 @@
   align-items: center;
   gap: var(--amplify-space-xxs);
   color: var(--amplify-colors-font-tertiary);
+
+  @media (max-width: $mq-mobile) {
+    padding: var(--amplify-space-xs) var(--amplify-space-large);
+  }
 }
 .toc-list {
   margin: 0;
@@ -27,6 +42,10 @@
     text-decoration: none;
     line-height: var(--amplify-line-heights-small);
     margin-block: var(--amplify-space-xs);
+
+    @media (max-width: $mq-mobile) {
+      padding: var(--amplify-space-xs) var(--amplify-space-large);
+    }
     &:visited {
       color: var(--amplify-colors-font-primary);
     }
@@ -40,7 +59,7 @@
   }
 }
 
-@media (min-width: $toc-min) {
+@media (min-width: $mq-mobile) {
   .toc {
     width: var(--layout-toc-width);
     background: var(--amplify-colors-background-primary);

src/styles/variables.scss

@@ -3,12 +3,6 @@
 /* $mq-mobile is the min-width we flip to 'desktop' layout */
 $mq-mobile: 1000px;
 
-/** 
- * $toc-min is the min-width we show the table of 
- * contents on the right 
-*/
-$toc-min: 1360px;
-
 :root {
   --content-max-width: 1000px;
   --docs-dev-center-nav: 4rem;