Merge pull request #1569 from NYPL/development

Release v3.0.1

CHANGELOG.md

@@ -6,6 +6,21 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 Currently, this repo is in Prerelease. When it is released, this project will adhere to [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
 ========
 
+## Prerelease
+
+## 3.0.1 (March 28, 2024)
+
+### Adds
+
+- Adds the `"editorMode"` option (pencil) to the `Icon` component.
+- Updates the `ul` bullet color in the `List` component.
+- Adds the `Errors` page to the `Accessibility Guide` section of Storybook.
+
+### Updates
+
+- Updates default heading size to `heading4` on `Modal` component.
+- Updates mobile styles for the `SocialMediaLinks` component
+
 ## 3.0.0 (March 14, 2024) React 18 / Chakra 2.8
 
 ### Adds

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",

src/components/AccessibilityGuide/Errors.mdx

@@ -0,0 +1,99 @@
+import { Meta, Source } from "@storybook/blocks";
+
+import Link from "../Link/Link";
+
+<Meta title="Accessibility Guide/Errors" />
+
+# Error Messages
+
+## Table of Contents
+
+- {<Link href="#general-information" target="_self">General Information</Link>}
+- {<Link href="#making-errors-explicit-and-providing-instructions" target="_self">Making Errors Explicit and Providing Instructions</Link>}
+- {<Link href="#avoiding-reliance-on-color" target="_self">Avoiding Reliance on Color</Link>}
+- {<Link href="#programmatic-indicator-of-error" target="_self">Programmatic Indicator of Error</Link>}
+- {<Link href="#associating-inline-errors-with-their-field" target="_self">Associating Inline Errors with their Fields</Link>}
+- {<Link href="#shifting-focus-to-errors" target="_self">Shifting Focus to Errors</Link>}
+- {<Link href="#NYPL-patterns" target="_self">NYPL Patterns</Link>}
+- {<Link href="#resources" target="_self">Resources</Link>}
+
+## General Information
+
+Accessible error handling ensures errors are easily perceived, understood, and
+corrected by a wide range of users both with and without using assistive technology.
+Some core features of accessible errors include:
+
+- Explicit statements of error and instructions for correction
+- Avoiding reliance on color alone to indicate the error state
+- Using a programmatic indicator of error
+- Associating inline error messages programmatically with their respective fields
+- Shifting focus to either the error summary (if provided) or the first field in error
+  if form submission failed
+
+## Making Errors Explicit and Providing Instructions
+
+Avoid merely reiterating the requirement as the error, for example “First Name
+is required”. Instead, include either the word error (or another clear word or
+phrase indicating an error state) or an error icon that has a text equivalent
+(such as `alt=”error”` or off-screen text, etc.)
+
+Example: “Error: First Name is required”
+
+Whenever possible, provide as much instruction for resolving the error as
+feasible. For example, if the user enters a password that does not meet the
+minimum requirements, have the error message include details about which
+requirements were not met. (Such requirements should also always be explicitly
+provided on the page so users can avoid making errors in the first place.)
+
+## Avoiding Reliance on Color
+
+Ensure errors are not solely indicated through color, such as outlining a text
+field in red. This does not mean that color cannot be used, but that there must
+also be a secondary visual indication, such as an icon or the word “error” such
+as described in the previous section.
+
+## Programmatic Indicator of Error
+
+Errors can also be indicated programmatically by setting `aria-invalid=”true”` on
+the input element. This should not be set until after the form is submitted or
+validation occurs and an error state is triggered. It may be confusing to have
+inputs set to an invalid state before a user even starts to fill out a form.
+
+## Associating Inline Errors with their Fields
+
+When a text error is added inline with a field, the error should be programmatically
+associated with the field. The most common way of doing this is by adding the
+`aria-describedby` attribute to the input and having that reference the `id` of the
+element containing the error. Another technique is to add the error into the form
+label itself dynamically.
+
+`aria-describedby` example:
+
+<Source
+  code={`
+<label for=”fname”>First Name (required)</label>
+<input type=”text” id=”fname” aria-describedby=”fnameerror”>
+<span id=”fnameerror”>Error: Please enter your first name</span>
+`}
+  language="html"
+/>
+
+## Shifting Focus to Errors
+
+When a form is submitted and errors are added, focus should move either to the list
+of errors (if provided) or to the first field in error if using inline validation. If
+you submit a form, and an error message is added in its place, then focus should be
+placed on the error message. See more about [how to manage focus](https://nypl.github.io/nypl-design-system/reservoir/v3/?path=/docs/accessibility-guide-managing-focus--docs#how-to-manage-focus).
+
+## NYPL Patterns
+
+NYPL will use a formal tone when writing error messages.
+
+### Form Inputs
+
+Error messages applied to form input fields should be prepended with "There was a problem."
+The remainder of the error message should give details about the "problem."
+
+## Resources
+
+- {<Link href="https://webaim.org/techniques/formvalidation/">Usable and Accessible Form Validation and Recovery</Link>}

src/components/Icons/Icon.mdx

@@ -12,7 +12,7 @@ import Link from "../Link/Link";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `2.1.5`    |
+| Latest            | `3.0.1`    |
 
 ## Table of Contents
 

src/components/Icons/IconSvgs.tsx

@@ -32,6 +32,7 @@ import { ReactComponent as decorativeEnvelope } from "../../../icons/svg/decorat
 import { ReactComponent as decorativeLibraryCard } from "../../../icons/svg/decorative-library-card.svg";
 import { ReactComponent as decorativeShoppingBag } from "../../../icons/svg/decorative-shopping-bag.svg";
 import { ReactComponent as download } from "../../../icons/svg/download.svg";
+import { ReactComponent as editorMode } from "../../../icons/svg/editor-mode.svg";
 import { ReactComponent as errorFilled } from "../../../icons/svg/error-filled.svg";
 import { ReactComponent as errorOutline } from "../../../icons/svg/error-outline.svg";
 import { ReactComponent as fileTypeAudio } from "../../../icons/svg/file-type-audio.svg";
@@ -106,6 +107,7 @@ export default {
   decorativeLibraryCard,
   decorativeShoppingBag,
   download,
+  editorMode,
   errorFilled,
   errorOutline,
   fileTypeAudio,

src/components/Icons/iconChangelogData.ts

@@ -9,6 +9,13 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "2024-03-28",
+    version: "3.0.1",
+    type: "Update",
+    affects: ["Documentation", "Functionality"],
+    notes: ["Added the editorMode (pencil) icon."],
+  },
   {
     date: "2024-03-14",
     version: "3.0.0",
@@ -24,8 +31,8 @@ export const changelogData: ChangelogData[] = [
     notes: ["Added the navigationMoreVert (vertical ellipsis) icon."],
   },
   {
-    date: "Prerelease",
-    version: "Prerelease",
+    date: "2024-01-24",
+    version: "2.1.4",
     type: "Update",
     affects: ["Documentation", "Functionality"],
     notes: [

src/components/Icons/iconVariables.ts

@@ -141,6 +141,7 @@ export const iconNamesArray = [
   "decorativeLibraryCard",
   "decorativeShoppingBag",
   "download",
+  "editorMode",
   "errorFilled",
   "errorOutline",
   "fileTypeAudio",

src/components/List/List.mdx

@@ -12,7 +12,7 @@ import { changelogData } from "./listChangelogData";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.7.0`    |
-| Latest            | `3.0.0`    |
+| Latest            | `3.0.1`    |
 
 ## Table of Contents
 

src/components/List/listChangelogData.ts

@@ -9,6 +9,13 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "2024-03-28",
+    version: "3.0.1",
+    type: "Update",
+    affects: ["Styles", "Accessibility"],
+    notes: ["List <ul> bullet color updated."],
+  },
   {
     date: "2024-03-14",
     version: "3.0.0",

src/components/Modal/Modal.mdx

@@ -13,7 +13,7 @@ import Link from "../Link/Link";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.1.0`    |
-| Latest            | `3.0.0`    |
+| Latest            | `3.0.1`    |
 
 ## Table of Contents
 
@@ -25,6 +25,7 @@ import Link from "../Link/Link";
 - {<Link href="#modaltrigger-component-props" target="_self">ModalTrigger Component Props</Link>}
 - {<Link href="#usemodal" target="_self">useModal</Link>}
 - {<Link href="#usemodal-component-props" target="_self">useModal Component Props</Link>}
+- {<Link href="#default-heading-text" target="_self">Default Heading Text</Link>}
 - {<Link href="#custom-heading-text" target="_self">Custom Heading Text</Link>}
 - {<Link href="#content-window-scrolling" target="_self">Content Window Scrolling</Link>}
 - {<Link href="#changelog" target="_self">Changelog</Link>}
@@ -222,10 +223,17 @@ export const ModalStory = (args) => {
 
 <ArgTypes of={ModalStories.useModalStory} />
 
+## Default Heading Text
+
+By default, the `Modal` component will render a DS level `h2` and size
+`heading4` `Heading` component when a string is passed to the `headingText`
+prop.
+
+<Canvas of={ModalStories.DefaultHeading} />
+
 ## Custom Heading Text
 
-By default, the `Modal` component will render a DS h2 `Heading` component when
-a string is passed to the `headingText` prop. However, a custom heading can be
+However, a custom heading can be
 passed to the `headingText` property. This can be useful when you want to add
 additional elements to the heading, such as an icon, or to set the level to
 something other than an `h2`.

src/components/Modal/Modal.stories.tsx

@@ -218,6 +218,27 @@ const scrollModalProps = {
   headingText: "Modal Heading Text",
 };
 
+const defaultHeadingModalProps = {
+  bodyContent: (
+    <p>
+      The heading of this modal is level "h2" and size "heading4", since no
+      custom heading element has been passed in.
+    </p>
+  ),
+  closeButtonLabel: "Close Button",
+  headingText: "Default Heading",
+};
+
+export const DefaultHeading: Story = {
+  render: () => (
+    <ModalTrigger
+      buttonText="Button Text"
+      id="modal-scrolling"
+      modalProps={defaultHeadingModalProps}
+    />
+  ),
+};
+
 export const ContentWindowScrolling: Story = {
   render: () => (
     <ModalTrigger

src/components/Modal/Modal.test.tsx

@@ -103,7 +103,7 @@ describe("ModalTrigger", () => {
         modalProps={{
           bodyContent: "body text",
           closeButtonLabel: "Close Button",
-          headingText: <Heading level="h4">Modal Heading Text</Heading>,
+          headingText: <Heading level="h3">Modal Heading Text</Heading>,
           onClose: () => {
             console.log("custom close");
           },
@@ -114,11 +114,36 @@ describe("ModalTrigger", () => {
     const openButton = screen.getByText("Button Text");
     openButton.click();
 
-    expect(screen.getByRole("heading", { level: 4 })).toHaveTextContent(
+    expect(screen.getByRole("heading", { level: 3 })).toHaveTextContent(
       "Modal Heading Text"
     );
   });
 
+  it("renders default heading with expected size", () => {
+    render(
+      <ModalTrigger
+        buttonText="Button Text"
+        id="modal-trigger"
+        modalProps={{
+          bodyContent: "body text",
+          closeButtonLabel: "Close Button",
+          headingText: "Modal Heading Text",
+          onClose: () => {
+            console.log("custom close");
+          },
+        }}
+      />
+    );
+
+    const openButton = screen.getByText("Button Text");
+    openButton.click();
+
+    expect(screen.getByRole("heading", { level: 2 })).toHaveStyle(
+      //var(--nypl-fontSizes-mobile-heading-heading4) = 1.5em
+      "font-size: 1.5em"
+    );
+  });
+
   it("renders the UI snapshot correctly", () => {
     const basic = renderer.create(modalTrigger()).toJSON();
 

src/components/Modal/Modal.tsx

@@ -67,6 +67,7 @@ export const BaseModal: ChakraComponent<
     const finalTitle = useDSHeading({
       title: headingText,
       id,
+      headingSize: "heading4",
     });
 
     return (

src/components/Modal/modalChangelogData.ts

@@ -9,6 +9,13 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "2024-03-28",
+    version: "3.0.1",
+    type: "Update",
+    affects: ["Styles"],
+    notes: ["Sets default heading size to 'heading4' for `Modal` header."],
+  },
   {
     date: "2024-03-14",
     version: "3.0.0",

src/components/SearchBar/searchBarChangelogData.ts

@@ -16,13 +16,6 @@ export const changelogData: ChangelogData[] = [
     affects: ["Styles"],
     notes: ["Chakra 2.8 update."],
   },
-  {
-    date: "Prerelease",
-    version: "Prerelease",
-    type: "Bug Fix",
-    affects: ["Styles"],
-    notes: [],
-  },
   {
     date: "2023-12-07",
     version: "2.1.3",