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/__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" })); 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/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..26e50acf 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_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"; +import { truncateStringOnWhitespace } from "~/src/util/Util"; export const getServerSideProps: GetServerSideProps = async (context) => { const collectionQuery: CollectionQuery = { @@ -31,6 +35,14 @@ const CollectionResults: React.FC<{ }> = ({ collectionResult, collectionQuery }) => { return ( + + + {`${truncateStringOnWhitespace( + collectionResult.metadata.title, + MAX_PAGE_TITLE_LENGTH + )} | ${documentTitles.collection}`} + + = (props) => { return ( + + + {`${truncateStringOnWhitespace( + props.editionResult.data.title, + MAX_PAGE_TITLE_LENGTH + )} | ${documentTitles.editionItem}`} + + ); diff --git a/src/pages/work/[workId].tsx b/src/pages/work/[workId].tsx index a779bab8..4fa69fce 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_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"; import { getBackToSearchUrl } from "~/src/util/LinkUtils"; +import { truncateStringOnWhitespace } from "~/src/util/Util"; export async function getServerSideProps(context: any) { //TODO: Default query @@ -27,6 +30,14 @@ export async function getServerSideProps(context: any) { const WorkResults: React.FC = (props) => { return ( + + + {`${truncateStringOnWhitespace( + props.workResult.data.title, + MAX_PAGE_TITLE_LENGTH + )} | ${documentTitles.workItem}`} + + );