Help keyboard users get to the results quicker

Refs #1712, alphagov/govuk-design-system-backlog#66 (comment)
PREreview · May 28, 2024 · 6071542 · 6071542
1 parent 824a432
commit 6071542
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/src/response.ts b/src/response.ts
@@ -38,6 +38,7 @@ export interface PageResponse {
   readonly nav?: Html
   readonly main: Html
   readonly skipToLabel: 'form' | 'main' | 'prereview'
+  readonly extraSkipLink?: [Html, string]
   readonly js: Required<Page>['js']
 }
 
@@ -188,6 +189,7 @@ export const handlePageResponse = ({
               .exhaustive(),
             `#${response.skipToLabel}`,
           ],
+          ...(response._tag === 'PageResponse' && response.extraSkipLink ? [response.extraSkipLink] : []),
         ],
         current: response.current,
         js: response.js.concat(...(message ? (['notification-banner.js'] as const) : [])),

diff --git a/src/review-requests-page/review-requests-page.ts b/src/review-requests-page/review-requests-page.ts
@@ -20,12 +20,13 @@ import type { ReviewRequests } from './review-requests'
 export const createPage = ({ currentPage, totalPages, language, field, reviewRequests }: ReviewRequests) =>
   PageResponse({
     title: title({ currentPage, field, language }),
+    extraSkipLink: [html`Skip to results`, '#results'],
     main: html`
       <h1>Recent review requests</h1>
 
       ${form({ field, language })}
 
-      <ol class="cards">
+      <ol class="cards" id="results">
         ${reviewRequests.map(
           (request, index) => html`
             <li>
@@ -118,12 +119,13 @@ export const createPage = ({ currentPage, totalPages, language, field, reviewReq
 export const createEmptyPage = ({ field, language }: Pick<ReviewRequests, 'field' | 'language'>) =>
   PageResponse({
     title: title({ currentPage: 1, field, language }),
+    extraSkipLink: [html`Skip to results`, '#results'],
     main: html`
       <h1>Recent review requests</h1>
 
       ${form({ field, language })}
 
-      <div class="inset">
+      <div class="inset" id="results">
         <p>No review requests have been published yet.</p>
 
         <p>When they do, they’ll appear here.</p>

diff --git a/test/review-requests-page/review-requests.test.ts b/test/review-requests-page/review-requests.test.ts
@@ -3,6 +3,7 @@ import { describe, expect, jest } from '@jest/globals'
 import { format } from 'fp-ts-routing'
 import * as TE from 'fp-ts/TaskEither'
 import { Status } from 'hyper-ts'
+import { html } from '../../src/html'
 import * as _ from '../../src/review-requests-page'
 import { reviewRequestsMatch } from '../../src/routes'
 import * as fc from '../fc'
@@ -43,6 +44,7 @@ describe('reviewRequests', () => {
       title: expect.stringContaining('requests'),
       main: expect.stringContaining('requests'),
       skipToLabel: 'main',
+      extraSkipLink: [html`Skip to results`, '#results'],
       js: [],
     })
   })
@@ -86,6 +88,7 @@ describe('reviewRequests', () => {
         title: expect.stringContaining('requests'),
         main: expect.stringContaining('requests'),
         skipToLabel: 'main',
+        extraSkipLink: [html`Skip to results`, '#results'],
         js: [],
       })
       expect(getReviewRequests).toHaveBeenCalledWith({ field, language, page: 1 })