feature: adds skip to content button

resources/version.txt

@@ -1 +1 @@
-7.15.4
+7.16.0

src/client/Nevergreen.test.tsx

@@ -100,3 +100,11 @@ it('should show menus when any key is pressed, allowing the user to navigate to
 
   expect(showMenus).toHaveBeenCalledTimes(2)
 })
+
+it('should have a skip to content button', async () => {
+  render(<Nevergreen />)
+  await waitForLoadingToFinish()
+  expect(
+    screen.getByRole('button', { name: 'Skip to content' }),
+  ).toBeInTheDocument()
+})

src/client/Nevergreen.tsx

@@ -21,6 +21,7 @@ import { useNavigationShortcuts } from './NavigationShortcutsHook'
 import { Outlet, useOutletContext } from 'react-router-dom'
 import { useAppSelector } from './configuration/Hooks'
 import styles from './nevergreen.scss'
+import { PrimaryButton } from './common/forms/Button'
 
 interface AppState {
   readonly menusHidden: boolean
@@ -75,6 +76,14 @@ export function Nevergreen(): ReactElement {
           onKeyDown={showMenus}
           {...showMenusOn}
         >
+          <PrimaryButton
+            onClick={() => {
+              document.getElementsByTagName('h1').item(0)?.focus()
+            }}
+            className={styles.skipButton}
+          >
+            Skip to content
+          </PrimaryButton>
           <Header hide={menusHidden} />
           <Banner
             message={bannerMessage}

src/client/nevergreen.scss

@@ -1,4 +1,5 @@
 @use 'common/colours';
+@use 'common/accessibility';
 @import 'defaults';
 
 .nevergreen {
@@ -11,6 +12,17 @@
   }
 }
 
+.skipButton {
+  &:not(:focus) {
+    @include accessibility.visually-hidden;
+  }
+
+  &:enabled:focus {
+    margin: 0;
+    position: absolute;
+  }
+}
+
 .main {
   background-color: colours.$black;
   display: flex;