Merge branch 'development' into DSD-1603/component-changelogs

CHANGELOG.md

@@ -15,8 +15,10 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 - 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
 

src/components/DatePicker/DatePicker.mdx

@@ -58,6 +58,11 @@ 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

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

@@ -385,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 = {
@@ -407,6 +408,12 @@ export const DatePicker = chakra(
             <CustomTextInput
               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}
             />
           }
@@ -425,6 +432,12 @@ export const DatePicker = chakra(
           <CustomTextInput
             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/TextInput/TextInput.mdx

@@ -7,10 +7,10 @@ import Link from "../Link/Link";
 
 # TextInput
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.22.0`   |
-| Latest            | `2.0.0`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `0.22.0`     |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 

src/components/TextInput/TextInput.stories.tsx

@@ -46,6 +46,7 @@ type Story = StoryObj<typeof TextInput>;
  */
 export const WithControls: Story = {
   args: {
+    additionalHelperTextIds: undefined,
     className: undefined,
     defaultValue: undefined,
     helperText: "Choose wisely.",
@@ -255,6 +256,7 @@ export const HTMLHelperText: Story = {
 
 export const Textarea: Story = {
   args: {
+    additionalHelperTextIds: undefined,
     className: undefined,
     defaultValue: undefined,
     helperText: "Let it all out.",

src/components/TextInput/TextInput.tsx

@@ -44,6 +44,9 @@ export const TextInputFormats = {
 export type TextInputVariants = "default" | "searchBar" | "searchBarSelect";
 
 export interface InputProps {
+  /** FOR INTERNAL DS USE ONLY: additional helper text id(s) to be used for the input's `aria-describedby` value.
+   * If more than one, separate each with a space */
+  additionalHelperTextIds?: string;
   /** A class name for the TextInput parent div. */
   className?: string;
   /** The starting value of the input field. */
@@ -126,6 +129,7 @@ export const TextInput = chakra(
   forwardRef<TextInputRefType, InputProps>(
     (props, ref: React.Ref<TextInputRefType>) => {
       const {
+        additionalHelperTextIds,
         className,
         defaultValue,
         helperText,
@@ -200,6 +204,7 @@ export const TextInput = chakra(
         id,
         labelText,
         name: "TextInput",
+        additionalHelperTextIds,
         showLabel,
       });
 
@@ -256,8 +261,8 @@ export const TextInput = chakra(
             ref: finalRef,
             // The `step` attribute is useful for the number type.
             step: type === "number" ? step : null,
-            ...ariaAttributes,
             ...rest,
+            ...ariaAttributes,
           };
       // For `input` and `textarea`, all attributes are the same but `input`
       // also needs `type` and `value` to render correctly.

src/utils/utils.ts

@@ -52,6 +52,7 @@ interface GetAriaAttrsProps {
   id: string;
   labelText: HelperErrorTextType;
   name: string;
+  additionalHelperTextIds?: string;
   showLabel: boolean;
 }
 /**
@@ -63,6 +64,7 @@ export const getAriaAttrs = ({
   id,
   labelText,
   name,
+  additionalHelperTextIds,
   showLabel,
 }: GetAriaAttrsProps): AriaAttributes => {
   let ariaAttributes: AriaAttributes = {};
@@ -78,9 +80,10 @@ export const getAriaAttrs = ({
         ? `${labelText} - ${footnote}`
         : (labelText as string);
   } else if (footnote) {
-    ariaAttributes["aria-describedby"] = `${id}-helperText`;
+    ariaAttributes["aria-describedby"] = `${
+      additionalHelperTextIds ? additionalHelperTextIds + " " : ""
+    }${id}-helperText`;
   }
-
   return ariaAttributes;
 };