Merge pull request #1442 from NYPL/development

Release v2.1.0

CHANGELOG.md

@@ -8,9 +8,25 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
-## Updates
+## 2.1.0 (October 18, 2023)
+
+- Adds the `ComponentChangelogTable` component.
+- Adds a changelog to the story pages for the `DatePicker`, `FeedbackBox`, `Hero`, `Slider`, and `TextInput` components.
+- Adds the `FeaturedContent` component.
+- Adds the `NewsletterSignup` component.
+
+### Updates
 
 - Temporarily renaming `FilterBar`, `MultiSelect`, `MultiSelectGroup`, `useMultiSelect`, and `useFilterBar` Storybook page files so they don't show up in the Storybook sidebar.
+- Updates the `Slider` component to use appropriate `aria-label` values for the slider thumbs and text input fields.
+- Updates `TextInput` so it no longer incorrectly overwrites the `aria-describedby` value to undefined when part of the `DatePicker` component.
+- Updates `DatePicker` so that focus remains on input after value is changed.
+- Updates the `FeedbackBox` component to remove the underline on the component's `Privacy Policy` link.
+- Updates `DatePicker` to pass a `additionalHelperTextIds` to its `TextInput` if needed so that the `aria-describedby` value can be associated with all relevant `helperText`s.
+
+### Fixes
+
+- Fixes an issue with `backgroundColor` and `foregroundColor` props not prioritizing the passed design token values for the `Hero` component.
 
 ## 2.0.1 (September 28, 2023)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -52,6 +52,9 @@
     "singleQuote": false,
     "trailingComma": "es5"
   },
+  "overrides": {
+    "types-ramda": "0.29.4"
+  },
   "dependencies": {
     "@chakra-ui/focus-lock": ">=1.2.6 <2.0.0",
     "@chakra-ui/react": ">=1.8.5 <=1.8.8",
@@ -103,7 +106,7 @@
     "@types/jest-axe": "3.5.3",
     "@types/node": "18.13.0",
     "@types/react": "16.9.41",
-    "@types/testing-library__jest-dom": "^5.14.1",
+    "@types/testing-library__jest-dom": "5.14.1",
     "@typescript-eslint/eslint-plugin": "5.57.0",
     "@typescript-eslint/parser": "5.57.0",
     "@vitejs/plugin-react": "3.1.0",

src/components/DatePicker/DatePicker.mdx

@@ -1,7 +1,10 @@
 import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks";
 
+import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 import * as DatePickerStories from "./DatePicker.stories";
+import { changelogData } from "./datePickerChangelogData";
 import Link from "../Link/Link";
+import Table from "../Table/Table";
 
 <Meta of={DatePickerStories} />
 
@@ -10,7 +13,7 @@ import Link from "../Link/Link";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `2.0.0`    |
+| Latest            | `2.1.0`    |
 
 ## Table of Contents
 
@@ -22,6 +25,7 @@ import Link from "../Link/Link";
 - {<Link href="#other-states" target="_self">Other States</Link>}
 - {<Link href="#date-inputs-and-output" target="_self">Date Inputs and Output</Link>}
 - {<Link href="#getting-date-input-values" target="_self">Getting Date Input Values</Link>}
+- {<Link href="#changelog" target="_self">Changelog</Link>}
 
 ## Overview
 
@@ -42,13 +46,23 @@ also be added through props.
 The Reservoir `DatePicker` component implements the `react-datepicker` npm package.
 This package exports a component that is used internally to display the popup
 calendar, manage its data, and associate the `<label>` element with its corresponding
-`<input>` element. This component is accessible through keyboard navigation.
+`<input>` element.
+
+This component is accessible through keyboard navigation. When keyboard users tab to
+the input, the calendar automatically opens. Tabbing again moves focus into the
+calendar. Dates can be navigated to using the arrow keys. The enter key selects the
+date in focus and closes the calendar. Focus then returns to the input.
 
 The Reservoir `DatePicker` handles the grouping of the two `<input>` elements in
 the "date range" mode by wrapping the elements in a `<fieldset>` element with
 its own `<legend>` label for the group. Note that this is in addition to the two
 labels that each `<input>` element is associated with.
 
+`helperText` is also associated with the `<input>` elements via the `aria-describedby`
+attribute. If a `helperTextFrom` or `helperTextTo` is passed in addition to a general
+`helperText` for the entire `DatePicker`, then the `aria-describedby` attribute of the
+`<input>` element will be "[general-helperText-id] [input-helperText-id]".
+
 When `showLabel` is set to false, the single `<input>` element's `aria-label`
 attribute is set to the required `labelText` value. In the "date range" mode,
 when `showLabel` is set to false, the `<fieldset>`'s `<legend>` will have the
@@ -57,6 +71,7 @@ when `showLabel` is set to false, the `<fieldset>`'s `<legend>` will have the
 Resources:
 
 - [react-datepicker Accessibility](https://github.com/Hacker0x01/react-datepicker#accessibility)
+- [Apex 4x Technical Style Guide: Aria Date Picker](https://whatsock.com/Templates/Datepickers/Basic,%20Auto%20Open/index.htm)
 
 ## Date Range
 
@@ -246,3 +261,7 @@ const onSubmit = () => {
 `}
   language="jsx"
 />
+
+## Changelog
+
+<ComponentChangelogTable changelogData={changelogData} />

src/components/DatePicker/DatePicker.test.tsx

@@ -216,13 +216,18 @@ describe("DatePicker", () => {
         />
       );
 
-      // When not errored, we expect only the helper text to appear.
-      expect(
-        screen.getByLabelText(/Select the date you want to visit NYPL/i)
-      ).toBeInTheDocument();
       expect(
         screen.getByText("Note that the Library may be closed on Sundays.")
       ).toBeInTheDocument();
+
+      // The input should be associated with the helper text via aria-describedby.
+      const input = screen.getByRole("textbox");
+      expect(input).toHaveAttribute(
+        "aria-describedby",
+        "datePicker-start-helperText"
+      );
+
+      // When not errored, we expect only the helper text to appear.
       expect(
         screen.queryByText("Please select a valid date.")
       ).not.toBeInTheDocument();
@@ -243,6 +248,13 @@ describe("DatePicker", () => {
       expect(
         screen.getByText("Please select a valid date.")
       ).toBeInTheDocument();
+
+      // The input should be associated with the error text via aria-describedby.
+      // The error text replaces the original helper text.
+      expect(input).toHaveAttribute(
+        "aria-describedby",
+        "datePicker-start-helperText"
+      );
     });
 
     it("should not render the helper text or invalid text when 'showHelperInvalidText' is false", () => {
@@ -569,6 +581,7 @@ describe("DatePicker", () => {
           isDateRange
         />
       );
+
       // There are two labels for each input.
       expect(screen.getByText("From")).toBeInTheDocument();
       expect(screen.getByText("To")).toBeInTheDocument();
@@ -582,6 +595,24 @@ describe("DatePicker", () => {
       ).toBeInTheDocument();
       // Helper text for the "To" input
       expect(screen.getByText(/Note for the 'to' field./i)).toBeInTheDocument();
+
+      const fromInput = screen.getByRole("textbox", { name: "From" });
+      const toInput = screen.getByRole("textbox", { name: "To" });
+
+      // The `fromInput` should have an `aria-describedby` value of both the id of
+      // the `helperText` and the id of the `helperTextFrom` in that order - from
+      // more general to more specific.
+      expect(fromInput).toHaveAttribute(
+        "aria-describedby",
+        "datePicker-helper-text datePicker-start-helperText"
+      );
+      // The `toInput` should have an `aria-describedby` value of both the id of
+      // the `helperText` and the id of the `helperTextTo` in that order - from
+      // more general to more specific.
+      expect(toInput).toHaveAttribute(
+        "aria-describedby",
+        "datePicker-helper-text datePicker-end-helperText"
+      );
     });
 
     it("should render different states based on respective props", () => {

src/components/DatePicker/DatePicker.tsx

@@ -1,5 +1,5 @@
-import { chakra, useMultiStyleConfig } from "@chakra-ui/react";
-import React, { useState, forwardRef } from "react";
+import { chakra, useMergeRefs, useMultiStyleConfig } from "@chakra-ui/react";
+import React, { useState, forwardRef, useRef } from "react";
 import ReactDatePicker from "react-datepicker";
 
 import Fieldset from "../Fieldset/Fieldset";
@@ -276,6 +276,17 @@ export const DatePicker = chakra(
     const finalStyles = isDateRange ? styles : {};
     const initStartDate = initialDate ? new Date(initialDate) : new Date();
     const initEndDate = initialDateTo ? new Date(initialDateTo) : new Date();
+    const startDateInputRef = useRef(null);
+    const endDateInputRef = useRef(null);
+
+    const inputRefs = {
+      startDate: startDateInputRef,
+      endDate: endDateInputRef,
+    };
+
+    const mergedStartDateRefs = useMergeRefs(startDateInputRef, ref);
+    const mergedEndDateRefs = useMergeRefs(endDateInputRef, refTo);
+
     let initFullDate: FullDateType = { startDate: initStartDate };
     // Only include the `endDate` key for date ranges.
     if (isDateRange) {
@@ -288,6 +299,8 @@ export const DatePicker = chakra(
     const onChangeDefault = (date: Date, value: string) => {
       setFullDate({ ...fullDate, [value]: date });
       onChange && onChange({ ...fullDate, [value]: date });
+
+      inputRefs[value].current.focus();
     };
     // How many years to display in the "year" option.
     const yearsToDisplay = 12;
@@ -372,6 +385,7 @@ export const DatePicker = chakra(
         ...baseCustomTextInputAttrs,
         helperText: helperTextTo,
       };
+
       // These props are used to follow the pattern recommended by
       // the react-datepicker plugin.
       startDatePickerAttrs = {
@@ -392,8 +406,14 @@ export const DatePicker = chakra(
         <ReactDatePicker
           customInput={
             <CustomTextInput
-              dsRef={refTo}
+              dsRef={mergedEndDateRefs}
               labelText="To"
+              // `additionalHelperTextIds` is passed when both `helperTextTo`
+              // and `helperText` are displayed. It tells `TextInput` to associate
+              // with both helper texts using `aria-describedby`.
+              {...(helperTextTo && helperText
+                ? { additionalHelperTextIds: `${id}-helper-text` }
+                : {})}
               {...endCustomTextInputAttrs}
             />
           }
@@ -405,12 +425,19 @@ export const DatePicker = chakra(
         />
       );
     }
+
     const startDatePickerElement = (
       <ReactDatePicker
         customInput={
           <CustomTextInput
-            dsRef={ref}
+            dsRef={mergedStartDateRefs}
             labelText={startLabelText}
+            // `additionalHelperTextIds` is passed when both `helperTextFrom`
+            // and `helperText` are displayed and tells `TextInput` to associate
+            // with both helper texts using `aria-describedby`.
+            {...(isDateRange && helperTextFrom && helperText
+              ? { additionalHelperTextIds: `${id}-helper-text` }
+              : {})}
             {...baseCustomTextInputAttrs}
           />
         }

src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap

@@ -445,6 +445,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
                 className="css-79elbk"
               >
                 <input
+                  aria-describedby="invalid-start-helperText"
                   aria-invalid={true}
                   className="chakra-input css-0"
                   disabled={false}
@@ -514,6 +515,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
                 className="css-79elbk"
               >
                 <input
+                  aria-describedby="invalid-end-helperText"
                   aria-invalid={true}
                   className="chakra-input css-0"
                   disabled={false}
@@ -945,6 +947,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 4`] = `
             className="css-79elbk"
           >
             <input
+              aria-describedby="invalid-start-helperText"
               aria-invalid={true}
               className="chakra-input css-0"
               disabled={false}
@@ -1029,6 +1032,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 5`] = `
             className="css-79elbk"
           >
             <input
+              aria-describedby="disabled-start-helperText"
               className="chakra-input css-0"
               disabled={true}
               id="disabled-start"
@@ -1112,6 +1116,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 6`] = `
             className="css-79elbk"
           >
             <input
+              aria-describedby="chakra-start-helperText"
               className="chakra-input css-0"
               disabled={false}
               id="chakra-start"
@@ -1196,6 +1201,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 7`] = `
             className="css-79elbk"
           >
             <input
+              aria-describedby="props-start-helperText"
               className="chakra-input css-0"
               disabled={false}
               id="props-start"

src/components/DatePicker/datePickerChangelogData.ts

@@ -0,0 +1,31 @@
+/** This data is used to populate the ComponentChangelogTable component.
+ *
+ * date: string (when adding new entry during development, set value as "Prerelease")
+ * version: string (when adding new entry during development, set value as "Prerelease")
+ * type: "Bug Fix" | "New Feature" | "Update";
+ * affects: array["Accessibility" | "Documentation" | "Functionality" | "Styles"];
+ * notes: array (will render as a bulleted list, add one array element for each list element)
+ */
+import { ChangelogData } from "../../utils/ComponentChangelogTable";
+
+export const changelogData: ChangelogData[] = [
+  {
+    date: "2023-10-18",
+    version: "2.1.0",
+    type: "Update",
+    affects: ["Accessibility"],
+    notes: [
+      "Updates to pass a secondaryHelperTextId to its TextInput if needed so that the aria-describedby value can be associated with all relevant helperTexts.",
+      "Updates so that focus remains on input after value is changed.",
+    ],
+  },
+  {
+    date: "2023-9-28",
+    version: "2.0.0",
+    type: "Update",
+    affects: ["Styles"],
+    notes: [
+      "Applied Typo2023 styles, including font size, font color, and text link patterns.",
+    ],
+  },
+];