Accessibility (a11y) clean up (#138)

* Add hidden skip to content for keyboard a11y

* update green.900 value

used for button background; increases contrast ratio

* adjusts light primary to green.700 for contrast

Improves contrast ratio when paired with yellow.50 and removes browser a11y warnings

* add aria-labels

* add lang to html element

* fix improperly ordered headers

We should not be using headers (h4/h5) for these aside navigations. Updated to remove browser warnings.

* add remaining aria-label

* add aria-label for mobile menu

src/components/UI/Header.tsx

@@ -19,13 +19,14 @@ export const Header: FC = () => {
       justifyContent='space-between'
       position='relative'
     >
-      <Stack
+      <Flex
         p={4}
-        justifyContent='center'
+        justifyContent='flex-start'
-        alignItems='flex-start'
+        alignItems='center'
         borderRight='2px'
         borderColor='primary'
-        flexGrow={2}
+        flex={1}
+        gap={6}
       >
         <NextLink href={'/'} passHref legacyBehavior>
           <Link _hover={{ textDecoration: 'none' }}>
@@ -34,7 +35,22 @@ export const Header: FC = () => {
             </Text>
           </Link>
         </NextLink>
-      </Stack>
+        <Box
+          as='a'
+          href='#main-content'
+          pointerEvents='none'
+          opacity={0}
+          transition='opacity 200ms ease-in-out'
+          _focus={{
+            opacity: 1,
+            transition: 'opacity 200ms ease-in-out'
+          }}
+        >
+          <Text textStyle='header-font' whiteSpace='nowrap' fontSize='xs'>
+            skip to content
+          </Text>
+        </Box>
+      </Flex>
 
       <Flex>
         {/* HEADER BUTTONS */}
@@ -58,6 +74,7 @@ export const Header: FC = () => {
             bg: 'primary',
             svg: { color: 'bg' }
           }}
+          aria-label={`Toggle ${isDark ? 'light' : 'dark'} mode`}
         >
           {isDark ? <SunIcon color='primary' /> : <MoonIcon color='primary' />}
         </Box>

src/components/UI/docs/DocsNav.tsx

@@ -24,7 +24,7 @@ export const DocsNav: FC<Props> = ({ navLinks }) => {
   }
 
   return (
-    <Stack w={{ base: '100%', lg: 72 }}>
+    <Stack w={{ base: '100%', lg: 72 }} as='aside'>
       <Stack display={{ base: 'none', lg: 'block' }}>
         <DocsLinks navLinks={navLinks} toggleMobileAccordion={toggleMobileAccordion} />
       </Stack>
@@ -49,7 +49,7 @@ export const DocsNav: FC<Props> = ({ navLinks }) => {
                 color: 'bg'
               }}
             >
-              <Text as='h4' textStyle='docs-nav-dropdown'>
+              <Text textStyle='docs-nav-dropdown' >
                 Documentation
               </Text>
               <AccordionIcon />

src/components/UI/docs/DocumentNav.tsx

@@ -20,8 +20,8 @@ export const DocumentNav: FC<Props> = ({ content }) => {
   const activeHash = useActiveHash(parsedHeadings.map(heading => heading!.headingId));
 
   return (
-    <Box position='sticky' top='4'>
+    <Box as='aside' position='sticky' top='4'>
-      <Text as='h5' textStyle='document-nav-title'>
+      <Text textStyle='document-nav-title'>
         on this page
       </Text>
       <Divider borderColor='primary' my={`4 !important`} />

src/components/UI/search/Search.tsx

@@ -49,6 +49,7 @@ export const Search: FC = () => {
               bg: 'primary',
               svg: { color: 'bg' }
             }}
+            aria-label="Search"
           >
             <LensIcon color={{ base: 'bg', md: 'primary' }} fontSize={{ base: '3xl', md: 'xl' }} />
           </Button>

src/components/layouts/Footer.tsx

@@ -80,7 +80,7 @@ export const Footer: FC = () => {
             _hover={hoverStyles}
           >
             <Link href={GETH_TWITTER_URL} isExternal p={4}>
-              <TwitterIcon w={8} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
+              <TwitterIcon w={8} height='22px' _groupHover={{ color: 'bg' }} color='primary' aria-label='Twitter' />
             </Link>
           </Center>
 
@@ -93,13 +93,13 @@ export const Footer: FC = () => {
             borderColor='primary'
           >
             <Link href={GETH_DISCORD_URL} isExternal p={4}>
-              <DiscordIcon w={8} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
+              <DiscordIcon w={8} height='22px' _groupHover={{ color: 'bg' }} color='primary' aria-label='Discord' />
             </Link>
           </Center>
 
           <Center data-group flex={1} _hover={hoverStyles}>
             <Link href={GETH_REPO_URL} isExternal p={4}>
-              <GitHubIcon w={7} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
+              <GitHubIcon w={7} height='22px' _groupHover={{ color: 'bg' }} color='primary' aria-label='GitHub' />
             </Link>
           </Center>
         </Flex>

src/components/layouts/MobileMenu.tsx

@@ -20,6 +20,7 @@ export const MobileMenu: React.FC = () => {
         color='primary'
         _hover={{ bg: 'primary', color: 'bg' }}
         onClick={onOpen}
+        aria-label="Open mobile menu"
       >
         <HamburgerIcon />
       </Box>

src/pages/[...slug].tsx

@@ -104,7 +104,7 @@ const DocPage: NextPage<Props> = ({ frontmatter, content, navLinks, lastModified
             <DocsNav navLinks={navLinks} />
           </Stack>
 
-          <Stack pb={4} width='100%'>
+          <Stack pb={4} width='100%' id="main-content">
             <Stack mb={16}>
               <Breadcrumbs />
               <Heading as='h1' mt='4 !important' mb={0} {...textStyles.header1}>

src/pages/_document.tsx

@@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from 'next/document';
 
 export default function Document() {
   return (
-    <Html>
+    <Html lang='en'>
       <Head>
         {/* fonts are being loaded here to enable optimization (https://nextjs.org/docs/basic-features/font-optimization) */}
         {/* JetBrains Mono */}

src/pages/downloads.tsx

@@ -298,7 +298,7 @@ const DownloadsPage: NextPage<Props> = ({ data }) => {
     <>
       <PageMetadata title={METADATA.DOWNLOADS_TITLE} description={METADATA.DOWNLOADS_DESCRIPTION} />
 
-      <main>
+      <main id="main-content">
         <Stack spacing={4}>
           <DownloadsHero
             currentBuild={LATEST_RELEASES_DATA.releaseName}

src/pages/index.tsx

@@ -28,7 +28,7 @@ const HomePage: NextPage = ({}) => {
     <>
       <PageMetadata title={METADATA.HOME_TITLE} description={METADATA.HOME_DESCRIPTION} />
 
-      <main>
+      <main id="main-content">
         <Stack spacing={4}>
           <HomeHero />
 
@@ -44,7 +44,7 @@ const HomePage: NextPage = ({}) => {
               >
                 <Text textStyle='quick-link-text'>
                   Geth (go-ethereum) is a{' '}
-                  <Link href={GO_URL} isExternal variant='light'>
+                  <Link href={GO_URL} isExternal variant='light' aria-label='Go lang'>
                     Go
                   </Link>{' '}
                   implementation of{' '}