fix: accessibility fixes for page title, nav drawer, version menu and mobile search

gatsby-browser.js

@@ -3,6 +3,29 @@ import {SKIP_TO_SEARCH_ID} from './src/constants'
 export {default as wrapPageElement} from './src/page'
 export {default as wrapRootElement} from './src/root'
 
+const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml'
+
+const toHtmlNamespace = node => {
+  const element = document.createElement(node.nodeName.toLowerCase())
+  for (const {name, value} of node.attributes) {
+    element.setAttribute(name, value)
+  }
+  element.textContent = node.textContent
+  return element
+}
+
+const fixHeadNamespaces = () => {
+  for (const node of document.head.querySelectorAll('[data-gatsby-head]')) {
+    if (node.namespaceURI !== HTML_NAMESPACE) {
+      node.replaceWith(toHtmlNamespace(node))
+    }
+  }
+}
+
+export const onClientEntry = () => {
+  new MutationObserver(fixHeadNamespaces).observe(document.head, {childList: true})
+}
+
 export const shouldUpdateScroll = ({routerProps}) => {
   const {scrollUpdate = true} = routerProps.location.state ?? {}
   return scrollUpdate

src/components/nav-drawer.module.css

@@ -19,16 +19,16 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  background: #333333;
+  background: var(--bgColor-default, #ffffff);
   overflow: auto;
 }
 
 .Box_3 {
   display: flex;
   flex-direction: column;
   flex: 1 0 auto;
-  color: #e1e4e8;
-  background: #333333;
+  color: var(--fgColor-default, #1f2328);
+  background: var(--bgColor-default, #ffffff);
 }
 
 .Box_4 {

src/components/nav-items.js

@@ -10,16 +10,18 @@ import useSiteMetadata from '../hooks/use-site-metadata'
 
 import * as styles from './nav-items.module.css'
 
-const NavItem = ({item, path, depth}) => {
+const NavItem = ({item, path, depth, position, total}) => {
   const isCurrent = getNav.isActiveUrl(path, item.url)
   const items = getNav.getHierarchy(item, item.url, {hideVariants: true})
+  const positionLabel = items ? {} : {'aria-label': `${item.title}, ${position} of ${total}`, 'aria-labelledby': null}
 
   return (
     <NavList.Item
       as={Link}
       to={item.url}
       defaultOpen={items && isCurrent}
       aria-current={isCurrent ? 'page' : null}
+      {...positionLabel}
       className={depth === 1 ? styles.NavList_Item_depth1 : styles.NavList_Item_depth2}
     >
       {item.title}
@@ -34,11 +36,11 @@ const NavItem = ({item, path, depth}) => {
 
 const NavItems = ({items, path, depth = 1}) => (
   <>
-    {items.map(item =>
+    {items.map((item, index) =>
       React.createElement(
         depth === 1 ? NavList.Group : React.Fragment,
         {key: item.title},
-        <NavItem item={item} path={path} depth={depth} />,
+        <NavItem item={item} path={path} depth={depth} position={index + 1} total={items.length} />,
       ),
     )}
   </>

src/components/search.module.css

@@ -42,6 +42,13 @@
   flex-direction: column;
 }
 
+.Box_6 > [data-color-mode] {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
 .Box_7 {
   display: flex;
   color: #1f2328;

src/components/table-of-contents.js

@@ -48,7 +48,7 @@ export const Mobile = withTableOfContents(({items}) => {
       <Details {...getDetailsProps()} className={styles.Details}>
         <Button
           as="summary"
-          leadingIcon={open ? ChevronDownIcon : ChevronRightIcon}
+          leadingVisual={open ? ChevronDownIcon : ChevronRightIcon}
           className={`${styles.Button} ${open ? styles.buttonOpen : styles.buttonClosed}`}
         >
           Table of contents

src/components/variant-select.js

@@ -18,9 +18,16 @@ const StyledOverlay = styled(ActionMenu.Overlay)`
 
 const VariantItem = ({title, shortName, url, active}) => {
   return (
-    <ActionList.Item state={{scrollUpdate: false}} id={shortName} active={active} tabIndex={null}>
-      <LinkNoUnderline to={url}>{title}</LinkNoUnderline>
-    </ActionList.Item>
+    <ActionList.LinkItem
+      as={LinkNoUnderline}
+      to={url}
+      state={{scrollUpdate: false}}
+      id={shortName}
+      active={active}
+      className={styles.variantItem}
+    >
+      {title}
+    </ActionList.LinkItem>
   )
 }
 

src/components/variant-select.module.css

@@ -11,6 +11,10 @@
   width: 100%;
 }
 
+.variantItem a {
+  color: var(--fgColor-default, #1f2328);
+}
+
 .menuButton:focus-visible {
   outline: 2px solid;
   outline-color: -webkit-focus-ring-color;

src/mdx/nav-hierarchy.js

@@ -5,12 +5,12 @@ import usePage from '../hooks/use-page'
 
 import * as styles from './nav-hierarchy.module.css'
 
-const HierarchyItem = ({item, maxDepth, depth, hideVariants}) => {
+const HierarchyItem = ({item, maxDepth, depth, hideVariants, position, total}) => {
   const hierarchy = getNav.getHierarchy(item, null, {hideVariants})
 
   return (
     <li key={item.url}>
-      <Link key={item.title} to={item.url}>
+      <Link key={item.title} to={item.url} aria-label={`${item.title}, ${position} of ${total}`}>
         {item.title}
       </Link>
       {item.description ? <div className={styles.Box}>{item.description}</div> : null}
@@ -28,8 +28,16 @@ const Hierarchy = ({items, maxDepth, depth, hideVariants}) => {
 
   return (
     <ul>
-      {items.map(item => (
-        <HierarchyItem key={item.url} item={item} maxDepth={maxDepth} depth={depth} hideVariants={hideVariants} />
+      {items.map((item, index) => (
+        <HierarchyItem
+          key={item.url}
+          item={item}
+          maxDepth={maxDepth}
+          depth={depth}
+          hideVariants={hideVariants}
+          position={index + 1}
+          total={items.length}
+        />
       ))}
     </ul>
   )

src/page.js

@@ -17,6 +17,7 @@ import {
 
 import {PageProvider} from './hooks/use-page'
 import Layout from './layout'
+import {ThemeProvider} from './theme'
 
 import * as styles from './page.module.css'
 
@@ -44,24 +45,26 @@ const PageElement = ({element, props}) => {
     slugger: new Slugger(),
   }
   return (
-    <BaseStyles>
-      <GlobalStyles />
-      <SkipBox>
-        <SkipLink href={`#${SKIP_TO_SEARCH_ID}`}>Skip to search</SkipLink>
-        <SkipLink href={`#${SKIP_TO_CONTENT_ID}`}>Skip to content</SkipLink>
-      </SkipBox>
-      <PageProvider value={page}>
-        <div className={styles.Box}>
-          <Header />
-          <div className={styles.Box_1}>
-            <div className={styles.sidebarContainer}>
-              <Sidebar />
+    <ThemeProvider>
+      <BaseStyles>
+        <GlobalStyles />
+        <SkipBox>
+          <SkipLink href={`#${SKIP_TO_SEARCH_ID}`}>Skip to search</SkipLink>
+          <SkipLink href={`#${SKIP_TO_CONTENT_ID}`}>Skip to content</SkipLink>
+        </SkipBox>
+        <PageProvider value={page}>
+          <div className={styles.Box}>
+            <Header />
+            <div className={styles.Box_1}>
+              <div className={styles.sidebarContainer}>
+                <Sidebar />
+              </div>
+              <Layout>{element}</Layout>
             </div>
-            <Layout>{element}</Layout>
           </div>
-        </div>
-      </PageProvider>
-    </BaseStyles>
+        </PageProvider>
+      </BaseStyles>
+    </ThemeProvider>
   )
 }
 

src/root.js

@@ -1,12 +1,7 @@
 import React from 'react'
 import {MDXProvider} from '@mdx-js/react'
-import {ThemeProvider} from './theme'
 import * as components from './mdx'
 
-const RootElement = ({element}) => (
-  <MDXProvider components={components}>
-    <ThemeProvider>{element}</ThemeProvider>
-  </MDXProvider>
-)
+const RootElement = ({element}) => <MDXProvider components={components}>{element}</MDXProvider>
 
 export default RootElement