From a411e24550fd35c05f6c99cfd2df6e59efca9db2 Mon Sep 17 00:00:00 2001 From: Jackie Quach Date: Thu, 26 Oct 2023 14:17:05 -0400 Subject: [PATCH 1/4] update page titles for accessibility --- CHANGELOG.md | 1 + src/constants/labels.ts | 2 +- src/pages/collection/[collectionId].tsx | 14 ++++++++++++++ src/pages/edition/[editionId].tsx | 15 ++++++++++++++- src/pages/work/[workId].tsx | 15 ++++++++++++++- 5 files changed, 44 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a419169f..edeb7410 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ - Feedback button test PW - SFR-1797: Remove Playwright tests with clicks on header and footer links - Update README with C4 diagrams and epub-to-webpub info +- Update Collection, Edition, and Work page titles for accessibility ## [0.17.4] diff --git a/src/constants/labels.ts b/src/constants/labels.ts index f4c26f52..3c37571e 100644 --- a/src/constants/labels.ts +++ b/src/constants/labels.ts @@ -57,7 +57,7 @@ export const documentTitles = { home: "Digital Research Books Beta | NYPL", advancedSearch: "Advanced Search | Digital Research Books Beta | NYPL", search: "Search Results | Digital Research Books Beta | NYPL", - workItem: "Item Details | Digital Research Books Beta | NYPL", + workItem: "Work Details | Digital Research Books Beta | NYPL", editionItem: "Edition Details | Digital Research Books Beta | NYPL", readItem: "Read Online | Digital Research Books Beta | NYPL", collection: "Collection | Digital Research Books Beta | NYPL", diff --git a/src/pages/collection/[collectionId].tsx b/src/pages/collection/[collectionId].tsx index 11bca22c..13714902 100644 --- a/src/pages/collection/[collectionId].tsx +++ b/src/pages/collection/[collectionId].tsx @@ -1,10 +1,14 @@ import { GetServerSideProps } from "next"; +import Head from "next/head"; import React from "react"; import Collection from "~/src/components/Collection/Collection"; import Layout from "~/src/components/Layout/Layout"; +import { MAX_TITLE_LENGTH } from "~/src/constants/editioncard"; +import { documentTitles } from "~/src/constants/labels"; import { collectionFetcher } from "~/src/lib/api/CollectionApi"; import { CollectionQuery, CollectionResult } from "~/src/types/CollectionQuery"; +import { truncateStringOnWhitespace } from "~/src/util/Util"; export const getServerSideProps: GetServerSideProps = async (context) => { const collectionQuery: CollectionQuery = { @@ -31,6 +35,16 @@ const CollectionResults: React.FC<{ }> = ({ collectionResult, collectionQuery }) => { return ( + + + {truncateStringOnWhitespace( + collectionResult.metadata.title, + MAX_TITLE_LENGTH + ) + + " | " + + documentTitles.collection} + + = (props) => { return ( + + + {truncateStringOnWhitespace( + props.editionResult.data.title, + MAX_TITLE_LENGTH + ) + + " | " + + documentTitles.editionItem} + + ); diff --git a/src/pages/work/[workId].tsx b/src/pages/work/[workId].tsx index a779bab8..0ca08c4e 100644 --- a/src/pages/work/[workId].tsx +++ b/src/pages/work/[workId].tsx @@ -1,10 +1,13 @@ +import Head from "next/head"; import React from "react"; - import Layout from "~/src/components/Layout/Layout"; import WorkDetail from "~/src/components/Work/Work"; +import { MAX_TITLE_LENGTH } from "~/src/constants/editioncard"; +import { documentTitles } from "~/src/constants/labels"; import { workFetcher } from "~/src/lib/api/SearchApi"; import { WorkQuery, WorkResult } from "~/src/types/WorkQuery"; import { getBackToSearchUrl } from "~/src/util/LinkUtils"; +import { truncateStringOnWhitespace } from "~/src/util/Util"; export async function getServerSideProps(context: any) { //TODO: Default query @@ -27,6 +30,16 @@ export async function getServerSideProps(context: any) { const WorkResults: React.FC = (props) => { return ( + + + {truncateStringOnWhitespace( + props.workResult.data.title, + MAX_TITLE_LENGTH + ) + + " | " + + documentTitles.workItem} + + ); From ecfcba0e104071f191e2e68c65ab04213c3ec2d3 Mon Sep 17 00:00:00 2001 From: Jackie Quach Date: Mon, 30 Oct 2023 11:03:49 -0400 Subject: [PATCH 2/4] use template literals --- src/pages/collection/[collectionId].tsx | 6 ++---- src/pages/edition/[editionId].tsx | 6 ++---- src/pages/work/[workId].tsx | 6 ++---- 3 files changed, 6 insertions(+), 12 deletions(-) diff --git a/src/pages/collection/[collectionId].tsx b/src/pages/collection/[collectionId].tsx index 13714902..795bc909 100644 --- a/src/pages/collection/[collectionId].tsx +++ b/src/pages/collection/[collectionId].tsx @@ -37,12 +37,10 @@ const CollectionResults: React.FC<{ - {truncateStringOnWhitespace( + {`${truncateStringOnWhitespace( collectionResult.metadata.title, MAX_TITLE_LENGTH - ) + - " | " + - documentTitles.collection} + )} | ${documentTitles.collection}`} = (props) => { - {truncateStringOnWhitespace( + {`${truncateStringOnWhitespace( props.editionResult.data.title, MAX_TITLE_LENGTH - ) + - " | " + - documentTitles.editionItem} + )} | ${documentTitles.editionItem}`} diff --git a/src/pages/work/[workId].tsx b/src/pages/work/[workId].tsx index 0ca08c4e..9dc202fa 100644 --- a/src/pages/work/[workId].tsx +++ b/src/pages/work/[workId].tsx @@ -32,12 +32,10 @@ const WorkResults: React.FC = (props) => { - {truncateStringOnWhitespace( + {`${truncateStringOnWhitespace( props.workResult.data.title, MAX_TITLE_LENGTH - ) + - " | " + - documentTitles.workItem} + )} | ${documentTitles.workItem}`} From eded5817435ae94bdeb505ab1af2f945e1699257 Mon Sep 17 00:00:00 2001 From: Jackie Quach Date: Wed, 1 Nov 2023 11:13:26 -0400 Subject: [PATCH 3/4] update page title truncation --- src/constants/editioncard.ts | 1 + src/pages/collection/[collectionId].tsx | 4 ++-- src/pages/edition/[editionId].tsx | 4 ++-- src/pages/work/[workId].tsx | 4 ++-- 4 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/constants/editioncard.ts b/src/constants/editioncard.ts index f635f3dd..779f6091 100644 --- a/src/constants/editioncard.ts +++ b/src/constants/editioncard.ts @@ -5,3 +5,4 @@ export const MAX_PUBLISHER_NAME_LENGTH = 80; export const MAX_PLACE_LENGTH = 80; export const PLACEHOLDER_COVER_LINK = "https://test-sfr-covers.s3.amazonaws.com/default/defaultCover.png"; +export const MAX_PAGE_TITLE_LENGTH = 45; diff --git a/src/pages/collection/[collectionId].tsx b/src/pages/collection/[collectionId].tsx index 795bc909..26e50acf 100644 --- a/src/pages/collection/[collectionId].tsx +++ b/src/pages/collection/[collectionId].tsx @@ -4,7 +4,7 @@ import React from "react"; import Collection from "~/src/components/Collection/Collection"; import Layout from "~/src/components/Layout/Layout"; -import { MAX_TITLE_LENGTH } from "~/src/constants/editioncard"; +import { MAX_PAGE_TITLE_LENGTH } from "~/src/constants/editioncard"; import { documentTitles } from "~/src/constants/labels"; import { collectionFetcher } from "~/src/lib/api/CollectionApi"; import { CollectionQuery, CollectionResult } from "~/src/types/CollectionQuery"; @@ -39,7 +39,7 @@ const CollectionResults: React.FC<{ {`${truncateStringOnWhitespace( collectionResult.metadata.title, - MAX_TITLE_LENGTH + MAX_PAGE_TITLE_LENGTH )} | ${documentTitles.collection}`} diff --git a/src/pages/edition/[editionId].tsx b/src/pages/edition/[editionId].tsx index 119d5187..25920d18 100644 --- a/src/pages/edition/[editionId].tsx +++ b/src/pages/edition/[editionId].tsx @@ -6,7 +6,7 @@ import { EditionQuery, EditionResult } from "~/src/types/EditionQuery"; import { getBackToSearchUrl } from "~/src/util/LinkUtils"; import { documentTitles } from "~/src/constants/labels"; import Head from "next/head"; -import { MAX_TITLE_LENGTH } from "~/src/constants/editioncard"; +import { MAX_PAGE_TITLE_LENGTH } from "~/src/constants/editioncard"; import { truncateStringOnWhitespace } from "~/src/util/Util"; export async function getServerSideProps(context: any) { @@ -33,7 +33,7 @@ const WorkResults: React.FC = (props) => { {`${truncateStringOnWhitespace( props.editionResult.data.title, - MAX_TITLE_LENGTH + MAX_PAGE_TITLE_LENGTH )} | ${documentTitles.editionItem}`} diff --git a/src/pages/work/[workId].tsx b/src/pages/work/[workId].tsx index 9dc202fa..4fa69fce 100644 --- a/src/pages/work/[workId].tsx +++ b/src/pages/work/[workId].tsx @@ -2,7 +2,7 @@ import Head from "next/head"; import React from "react"; import Layout from "~/src/components/Layout/Layout"; import WorkDetail from "~/src/components/Work/Work"; -import { MAX_TITLE_LENGTH } from "~/src/constants/editioncard"; +import { MAX_PAGE_TITLE_LENGTH } from "~/src/constants/editioncard"; import { documentTitles } from "~/src/constants/labels"; import { workFetcher } from "~/src/lib/api/SearchApi"; import { WorkQuery, WorkResult } from "~/src/types/WorkQuery"; @@ -34,7 +34,7 @@ const WorkResults: React.FC = (props) => { {`${truncateStringOnWhitespace( props.workResult.data.title, - MAX_TITLE_LENGTH + MAX_PAGE_TITLE_LENGTH )} | ${documentTitles.workItem}`} From 38e2fb3c1e76f52a5739ae9f1944d846a482db26 Mon Sep 17 00:00:00 2001 From: Jackie Quach Date: Wed, 1 Nov 2023 13:53:28 -0400 Subject: [PATCH 4/4] fix failing test --- src/__tests__/AdvancedSearch.test.tsx | 36 +++++++++++++++++++-------- 1 file changed, 25 insertions(+), 11 deletions(-) diff --git a/src/__tests__/AdvancedSearch.test.tsx b/src/__tests__/AdvancedSearch.test.tsx index ded97d3c..52aaf9eb 100644 --- a/src/__tests__/AdvancedSearch.test.tsx +++ b/src/__tests__/AdvancedSearch.test.tsx @@ -183,12 +183,19 @@ describe("Advanced Search clear", () => { }; await userEvent.click(screen.getByRole("checkbox", { name: "english" })); - inputTerms.forEach(async (val) => { - await userEvent.type( - screen.getByLabelText(val.text), - inputValues[val.text] - ); - }); + await userEvent.type( + screen.getByLabelText("Keyword"), + inputValues["Keyword"] + ); + await userEvent.type( + screen.getByLabelText("Author"), + inputValues["Author"] + ); + await userEvent.type( + screen.getByLabelText("Subject"), + inputValues["Subject"] + ); + await userEvent.type(screen.getByLabelText("Title"), inputValues["Title"]); await userEvent.clear( await screen.findByRole("spinbutton", { name: "From" }) ); @@ -215,11 +222,18 @@ describe("Advanced Search clear", () => { screen.getByLabelText("Show only US government documents") ).toBeChecked(); - inputTerms.forEach(async (val) => { - expect(await screen.findByRole(val.text)).toHaveValue( - inputValues[val.text] - ); - }); + expect(await screen.findByRole("textbox", { name: "Keyword" })).toHaveValue( + inputValues["Keyword"] + ); + expect(await screen.findByRole("textbox", { name: "Author" })).toHaveValue( + inputValues["Author"] + ); + expect(await screen.findByRole("textbox", { name: "Subject" })).toHaveValue( + inputValues["Subject"] + ); + expect(await screen.findByRole("textbox", { name: "Title" })).toHaveValue( + inputValues["Title"] + ); await userEvent.click(screen.getByRole("button", { name: "Clear" }));