Merge pull request #263 from NYPL/feature/DR-3323/fix-copy-sort-menu

update label text on sort menu for all collections page
NYPL · Dec 20, 2024 · 440f2a7 · 440f2a7
2 parents 742dfbe + eab0c58
commit 440f2a7
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added `/healthcheck` endpoint (DR-3304)
 
 ### Updated
+- Update copy of sort menu for the all collections page (DR-3323)
 - Update `/collections` page to fetch data from Repo API and meet designs (DR-3100)
 - Update `/collections/lane/:slug` page to fetch data from Repo API (DR-3701)
 - Refactored implementation of default featured item & updated default number of digitized items (DR-3305)

diff --git a/app/src/components/pageLayout/pageLayout.tsx b/app/src/components/pageLayout/pageLayout.tsx
@@ -62,6 +62,7 @@ const PageLayout = ({
               <Breadcrumbs
                 breadcrumbsType="digitalCollections"
                 breadcrumbsData={breadcrumbs || []}
+                aria-label={activePage}
               />
               {/* TODO: Move to TemplateAppContainer once spacing is more flexible.  --> */}
               <Box

diff --git a/app/src/components/pages/collectionsPage/collectionsPage.tsx b/app/src/components/pages/collectionsPage/collectionsPage.tsx
@@ -28,6 +28,7 @@ import {
   DEFAULT_PAGE_NUM,
   DEFAULT_COLLECTION_SORT,
   DEFAULT_SEARCH_TERM,
+  COLLECTION_SORT_LABELS,
 } from "@/src/config/constants";
 
 export function CollectionsPage({ data, params, renderCollections }) {
@@ -159,11 +160,12 @@ export function CollectionsPage({ data, params, renderCollections }) {
             onChange: (e) => handleSearchChange(e),
           }}
           onSubmit={handleSearchSubmit}
-          labelText={""}
+          labelText="Search Collections by title"
+          aria-label="Search collections by title"
         />
       </Box>
       <HorizontalRule sx={{ marginTop: "xxl", marginBottom: "xxl" }} />
-      <Flex>
+      <Flex sx={{ alignItems: "center" }}>
         <Heading
           size="heading5"
           sx={{
@@ -190,15 +192,10 @@ export function CollectionsPage({ data, params, renderCollections }) {
             marginBottom: "l",
           }}
         >
-          <Text sx={{ fontWeight: "500", marginBottom: 0, marginTop: "xs" }}>
-            {" "}
-            Sort by{" "}
-          </Text>{" "}
           <Menu
-            showSelectionAsLabel
             showLabel
             selectedItem={currentSort}
-            labelText={"Sort By"}
+            labelText={`Sort by: ${COLLECTION_SORT_LABELS[currentSort]}`}
             listItemsData={[
               {
                 id: "date-desc",

diff --git a/app/src/config/constants.ts b/app/src/config/constants.ts
@@ -17,9 +17,16 @@ export const CARDS_PER_PAGE = 48;
 export const DEFAULT_PAGE_NUM = "1";
 export const DEFAULT_COLLECTION_SORT = "date-desc";
 export const DEFAULT_SEARCH_TERM = "";
+
 export const COLLECTION_SORT_OPTIONS = {
   "date-desc": "date DESC",
   "date-asc": "date ASC",
   "title-desc": "title DESC",
   "title-asc": "title ASC",
 };
+export const COLLECTION_SORT_LABELS = {
+  "date-desc": "Newest to oldest",
+  "date-asc": "Oldest to newest",
+  "title-desc": "Title A to Z",
+  "title-asc": "Title Z to A",
+};
diff --git a/public/CHANGELOG.md b/public/CHANGELOG.md
@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added `/healthcheck` endpoint (DR-3304)
 
 ### Updated
+- Update copy of sort menu for the all collections page (DR-3323)
 - Update `/collections` page to fetch data from Repo API and meet designs (DR-3100)
 - Update `/collections/lane/:slug` page to fetch data from Repo API (DR-3701)
 - Refactored implementation of default featured item & updated default number of digitized items (DR-3305)