Merge pull request #1807 from NYPL/DSD-1901/remove-role-search

DSD-1901: Remove `role="search"` from `Searchbar`

Author: 7emansell

CHANGELOG.md

@@ -38,6 +38,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
   - `StatusBadge`'s "low", "medium", "high" values from `statusBadgeTypeArray`
   - `StatusBadge`'s `level` prop
   - `StyledList`'s "tag", "mini" values in `textSizesArray`
+- Removes `role="search"` from `Searchbar` wrapper.
 
 ## Prerelease
 

src/components/Banner/Banner.mdx

@@ -21,7 +21,7 @@ import { changelogData } from "./bannerChangelogData";
 
 ## Table of Contents
 
-- {<Link href="#overiew" target="_self">Overview</Link>}
+- {<Link href="#overview" target="_self">Overview</Link>}
 - {<Link href="#component-props" target="_self">Component Props</Link>}
 - {<Link href="#accessibility" target="_self">Accessibility</Link>}
 - {<Link href="#variants" target="_self">Variants</Link>}

src/components/SearchBar/SearchBar.mdx

@@ -1,18 +1,22 @@
 import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks";
 import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
+import ComponentDocsHeader from "../../utils/components/ComponentDocsHeader";
 import { changelogData } from "./searchBarChangelogData";
 
 import * as SearchBarStories from "./SearchBar.stories";
 import Link from "../Link/Link";
 
 <Meta of={SearchBarStories} />
 
-# SearchBar
+<ComponentDocsHeader
+  category="Form element"
+  componentName="SearchBar"
+  summary="A form container with text input and button that submits a search query"
+  versionAdded="0.0.4"
+  versionLatest="Prerelease"
+/>
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.0.4`    |
-| Latest            | `3.6.1`    |
+<Canvas of={SearchBarStories.WithControls} />
 
 ## Table of Contents
 
@@ -54,8 +58,9 @@ aria-labels are used to make these children components accessible.
 The `SearchBar` component is implemented with Reservoir `Select`, `TextInput`,
 and `Button` accessible components. This a "complete" component that renders an
 HTML `<form>` element that is submitted with a `<button>` element of `type="submit"`.
-The `<form>` element also has a `role="search"` attribute that allows
-screenreaders to pick up this entire search form.
+
+The `Searchbar`, along with any other search/filter functionality, must be wrapped in a container with role="search", for a screenreader to recognize it correctly.
+See [search in "ARIA Landmarks"](../?path=/docs/accessibility-guide-aria-landmarks--docs#search).
 
 Resources:
 

src/components/SearchBar/SearchBar.test.tsx

@@ -101,8 +101,8 @@ describe("SearchBar", () => {
         textInputProps={textInputProps}
       />
     );
-    expect(screen.getByRole("search")).toBeInTheDocument();
-    expect(screen.getByRole("search")).toHaveAttribute(
+    expect(screen.getByRole("form")).toBeInTheDocument();
+    expect(screen.getByRole("form")).toHaveAttribute(
       "aria-label",
       `${labelText} - ${helperText}`
     );

src/components/SearchBar/SearchBar.tsx

@@ -242,7 +242,6 @@ export const SearchBar: ChakraComponent<
           as="form"
           id={`searchbar-form-${id}`}
           className={className}
-          role="search"
           aria-label={finalAriaLabel}
           onSubmit={onSubmit}
           method={method}

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

@@ -10,7 +10,6 @@ exports[`SearchBar renders the UI snapshot correctly 1`] = `
     className="css-1xdhyk6"
     id="searchbar-form-basic"
     onSubmit={[MockFunction]}
-    role="search"
   >
     <div
       className="css-1ik4laa"
@@ -91,7 +90,6 @@ exports[`SearchBar renders the UI snapshot correctly 2`] = `
     className="css-1xdhyk6"
     id="searchbar-form-withSelect"
     onSubmit={[MockFunction]}
-    role="search"
   >
     <div
       className="css-1u8qly9"
@@ -269,7 +267,6 @@ exports[`SearchBar renders the UI snapshot correctly 3`] = `
     className="css-1xdhyk6"
     id="searchbar-form-withoutHelperText"
     onSubmit={[MockFunction]}
-    role="search"
   >
     <div
       className="css-1ik4laa"
@@ -333,7 +330,6 @@ exports[`SearchBar renders the UI snapshot correctly 4`] = `
     className="css-1xdhyk6"
     id="searchbar-form-withClearButton"
     onSubmit={[MockFunction]}
-    role="search"
   >
     <div
       className="css-1ik4laa"
@@ -414,7 +410,6 @@ exports[`SearchBar renders the UI snapshot correctly 5`] = `
     className="css-1xdhyk6"
     id="searchbar-form-invalidState"
     onSubmit={[MockFunction]}
-    role="search"
   >
     <div
       className="css-1ik4laa"
@@ -487,7 +482,6 @@ exports[`SearchBar renders the UI snapshot correctly 6`] = `
     className="css-1xdhyk6"
     id="searchbar-form-disabledState"
     onSubmit={[MockFunction]}
-    role="search"
   >
     <div
       className="css-1ik4laa"
@@ -552,7 +546,6 @@ exports[`SearchBar renders the UI snapshot correctly 7`] = `
     className="css-1xdhyk6"
     id="searchbar-form-requiredState"
     onSubmit={[MockFunction]}
-    role="search"
   >
     <div
       className="css-1ik4laa"
@@ -618,7 +611,6 @@ exports[`SearchBar renders the UI snapshot correctly 8`] = `
     className="css-1xdhyk6"
     id="searchbar-form-noBrandButtonType"
     onSubmit={[MockFunction]}
-    role="search"
   >
     <div
       className="css-1ik4laa"
@@ -690,7 +682,6 @@ exports[`SearchBar renders the UI snapshot correctly 9`] = `
     className="css-1xdhyk6"
     id="searchbar-form-withHeading"
     onSubmit={[MockFunction]}
-    role="search"
   >
     <div
       className="css-1ik4laa"
@@ -735,7 +726,6 @@ exports[`SearchBar renders the UI snapshot correctly 10`] = `
     className="css-1xdhyk6"
     id="searchbar-form-withDescription"
     onSubmit={[MockFunction]}
-    role="search"
   >
     <div
       className="css-1ik4laa"
@@ -786,7 +776,6 @@ exports[`SearchBar renders the UI snapshot correctly 11`] = `
     className="css-1xdhyk6"
     id="searchbar-form-withHeadingAndDescription"
     onSubmit={[MockFunction]}
-    role="search"
   >
     <div
       className="css-1ik4laa"
@@ -826,7 +815,6 @@ exports[`SearchBar renders the UI snapshot correctly 12`] = `
     className="css-kle7zy"
     id="searchbar-form-chakra"
     onSubmit={[MockFunction]}
-    role="search"
   >
     <div
       className="css-1ik4laa"
@@ -908,7 +896,6 @@ exports[`SearchBar renders the UI snapshot correctly 13`] = `
     className="css-1xdhyk6"
     id="searchbar-form-props"
     onSubmit={[MockFunction]}
-    role="search"
   >
     <div
       className="css-1ik4laa"

src/components/SearchBar/searchBarChangelogData.ts

@@ -9,6 +9,13 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Accessibility", "Documentation"],
+    notes: ["Removes role=search on the component wrapper."],
+  },
   {
     date: "2025-04-24",
     version: "3.6.1",