add skip nav link

cypress/integration/multi-pdf/navigations.ts

@@ -35,7 +35,7 @@ describe('Multi PDF navigation', () => {
   it('should navigate forward and backwards with page buttons', () => {
     cy.findByText('Anthropology without Informants').should('be.visible');
     cy.findByRole('button', { name: 'Next Page' }).click();
-    cy.get('#iframe-wrapper')
+    cy.get('#mainContent')
       .find('div[class="react-pdf__Page__textContent"]')
       .children()
       .should('have.length', 0);

cypress/support/commands.ts

@@ -170,7 +170,7 @@ Cypress.Commands.add(
       },
     });
     cy.wait('@pdf', { timeout: 50000 });
-    cy.get('#iframe-wrapper')
+    cy.get('#mainContent')
       .find('div[class="react-pdf__Page__textContent"]', { timeout: 10000 })
       .should('have.attr', 'style');
   }

cypress/support/constants.ts

@@ -1,2 +1 @@
-export const IFRAME_SELECTOR = '#html-reader-iframe';
 export const SCALE_STEP = 0.1;

src/HtmlReader/index.tsx

@@ -10,6 +10,7 @@ import LoadingSkeleton from '../ui/LoadingSkeleton';
 import {
   DEFAULT_HEIGHT,
   DEFAULT_SHOULD_GROW_WHEN_SCROLLING,
+  MAIN_CONTENT_ID,
 } from '../constants';
 import {
   fetchAsTxt,
@@ -28,8 +29,6 @@ import useUpdateCSS from './useUpdateCSS';
 import useIframeLinkClick from './useIframeLinkClick';
 import useUpdateLocalStorage from '../utils/localstorage';
 
-export const IFRAME_ID_SELECTOR = 'html-reader-iframe';
-
 export default function useHtmlReader(args: ReaderArguments): ReaderReturn {
   const {
     webpubManifestUrl,
@@ -254,7 +253,7 @@ export default function useHtmlReader(args: ReaderArguments): ReaderReturn {
     content: (
       <>
         <iframe
-          id={IFRAME_ID_SELECTOR}
+          id={MAIN_CONTENT_ID}
           onLoad={() => dispatch({ type: 'IFRAME_LOADED' })}
           ref={setIframe}
           // as="iframe"

src/PdfReader/index.tsx

@@ -7,18 +7,13 @@ import ChakraPage from './ChakraPage';
 import ScrollPage from './ScrollPage';
 // Required CSS in order for links to be clickable in PDFs
 import './pdf.css';
-import { HEADER_HEIGHT, FOOTER_HEIGHT } from '../constants';
+import { HEADER_HEIGHT, FOOTER_HEIGHT, MAIN_CONTENT_ID } from '../constants';
 import {
   DEFAULT_HEIGHT,
   DEFAULT_SHOULD_GROW_WHEN_SCROLLING,
 } from '../constants';
 import LoadingSkeleton from '../ui/LoadingSkeleton';
-import {
-  getResourceUrl,
-  IFRAME_WRAPPER_ID,
-  loadResource,
-  SCALE_STEP,
-} from './lib';
+import { getResourceUrl, loadResource, SCALE_STEP } from './lib';
 import { makePdfReducer } from './reducer';
 
 /**
@@ -322,7 +317,7 @@ export default function usePdfReader(args: ReaderArguments): ReaderReturn {
         justifyContent="center"
         alignItems="center"
         tabIndex={-1}
-        id={IFRAME_WRAPPER_ID}
+        id={MAIN_CONTENT_ID}
         ref={containerRef}
         height={finalHeight}
       >

src/PdfReader/lib.ts

@@ -1,7 +1,6 @@
 import { WebpubManifest } from '../types';
 import { ReadiumLink } from '../WebpubManifestTypes/ReadiumLink';
 
-export const IFRAME_WRAPPER_ID = 'iframe-wrapper';
 export const SCALE_STEP = 0.1;
 export const START_QUERY = 'start';
 

src/constants.ts

@@ -50,3 +50,5 @@ export const FONT_DETAILS = {
 // local storage keys
 export const LOCAL_STORAGE_SETTINGS_KEY = 'web-reader-settings';
 export const LOCAL_STORAGE_LOCATIONS_KEY = 'web-reader-locations';
+
+export const MAIN_CONTENT_ID = 'mainContent';

src/ui/Header.tsx

@@ -8,6 +8,7 @@ import SettingsCard from './SettingsButton';
 import TableOfContent from './TableOfContent';
 import useColorModeValue from '../ui/hooks/useColorModeValue';
 import useFullscreen from './hooks/useFullScreen';
+import SkipNavigation from './SkipNavigation';
 
 export const DefaultHeaderLeft = (): React.ReactElement => {
   const linkColor = useColorModeValue('gray.700', 'gray.100', 'gray.700');
@@ -69,6 +70,7 @@ export default function Header(
 
   return (
     <HeaderWrapper bg={mainBgColor}>
+      <SkipNavigation />
       {headerLeft ?? <DefaultHeaderLeft />}
       <HStack ml="auto" spacing={0}>
         <TableOfContent

src/ui/SkipNavigation.tsx

@@ -0,0 +1,21 @@
+import { Box, Link, useStyleConfig } from '@chakra-ui/react';
+import React from 'react';
+
+/**
+ * SkipNavigation is a component that is used to provide a link
+ * used to skip to the main content of the page using the `#mainContent`
+ * id. This link is visually hidden but can be read by screenreaders.
+ */
+export const SkipNavigation = (): React.ReactElement => {
+  const styles = useStyleConfig('SkipNavigation');
+
+  return (
+    <Box as="nav" aria-label="Skip to Main Content" __css={styles}>
+      <Link href="#mainContent" textDecoration="none">
+        Skip to Main Content
+      </Link>
+    </Box>
+  );
+};
+
+export default SkipNavigation;

src/ui/theme/components/skipNavigation.ts

@@ -0,0 +1,25 @@
+const SkipNavigation = {
+  baseStyle: {
+    // Don't display links by default...
+    a: {
+      backgroundColor: 'ui.white',
+      height: '1px',
+      left: '-10000px',
+      overflow: 'hidden',
+      position: 'absolute',
+      top: 'auto',
+      width: '1px',
+      // Only display when the user focuses on the links.
+      _focus: {
+        height: 'auto',
+        left: '2',
+        paddingX: '2',
+        paddingY: '1',
+        top: '2',
+        width: 'auto',
+      },
+    },
+  },
+};
+
+export default SkipNavigation;

src/ui/theme/index.ts

@@ -1,6 +1,7 @@
 import { extendTheme } from '@chakra-ui/react';
 import Alert from './components/alert';
 import Text from './components/text';
+import SkipNavigation from './components/skipNavigation';
 import colors from './foundations/colors';
 import typography from './foundations/typography';
 import nyplTheme from '../nypl-base-theme';
@@ -31,6 +32,7 @@ export function getTheme(colorMode: ColorMode = 'day'): Dict<unknown> {
         Button: getButtonStyle(getColor(colorMode)),
         Text,
         Alert,
+        SkipNavigation,
       },
       currentColorMode: colorMode,
     },