Merge pull request #454 from NYPL/SFR-1799_update-page-titles

SFR-1799/1800: Update page titles for accessibility
NYPL · Nov 1, 2023 · 8482801 · 8482801 · vercel · Nov 1, 2023
2 parents 314c191 + 38e2fb3
commit 8482801
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 (
     <Layout>
+      <Head>
+        <title>
+          {`${truncateStringOnWhitespace(
+            collectionResult.metadata.title,
+            MAX_PAGE_TITLE_LENGTH
+          )} | ${documentTitles.collection}`}
+        </title>
+      </Head>
       <Collection
         collectionResult={collectionResult}
         collectionQuery={collectionQuery}

diff --git a/src/pages/edition/[editionId].tsx b/src/pages/edition/[editionId].tsx
@@ -1,10 +1,13 @@
 import React from "react";
-
 import Layout from "~/src/components/Layout/Layout";
 import Edition from "~/src/components/EditionDetail/Edition";
 import { editionFetcher } from "~/src/lib/api/SearchApi";
 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_PAGE_TITLE_LENGTH } from "~/src/constants/editioncard";
+import { truncateStringOnWhitespace } from "~/src/util/Util";
 
 export async function getServerSideProps(context: any) {
   const editionQuery: EditionQuery = {
@@ -26,6 +29,14 @@ export async function getServerSideProps(context: any) {
 const WorkResults: React.FC<any> = (props) => {
   return (
     <Layout>
+      <Head>
+        <title>
+          {`${truncateStringOnWhitespace(
+            props.editionResult.data.title,
+            MAX_PAGE_TITLE_LENGTH
+          )} | ${documentTitles.editionItem}`}
+        </title>
+      </Head>
       <Edition editionResult={props.editionResult} backUrl={props.backUrl} />
     </Layout>
   );

diff --git 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<any> = (props) => {
   return (
     <Layout>
+      <Head>
+        <title>
+          {`${truncateStringOnWhitespace(
+            props.workResult.data.title,
+            MAX_PAGE_TITLE_LENGTH
+          )} | ${documentTitles.workItem}`}
+        </title>
+      </Head>
       <WorkDetail workResult={props.workResult} backUrl={props.backUrl} />
     </Layout>
   );