feat(search): add searchButtonAriaLabel prop to component

New prop `searchButtonAriaLabel` prop has created so that consumers can add their own aria-label to the Search component when rendered with a button.
Sage · Jun 15, 2023 · 5de15f0 · 5de15f0
1 parent 70bcb35
commit 5de15f0
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 32 deletions.
diff --git a/cypress/components/search/search.cy.js b/cypress/components/search/search.cy.js
@@ -72,6 +72,15 @@ context("Test for Search component", () => {
       searchDefaultInput().should("have.attr", "aria-label", testCypress);
     });
 
+    it("should render Search button with aria-label prop", () => {
+      CypressMountWithProviders(
+        <SearchComponent searchButton searchButtonAriaLabel={testCypress} />
+      );
+
+      searchDefaultInput().clear().type(testCypress);
+      searchButton().should("have.attr", "aria-label", testCypress);
+    });
+
     it.each([
       [true, "be.visible"],
       [false, "not.exist"],
@@ -434,6 +443,14 @@ context("Test for Search component", () => {
       cy.checkAccessibility();
     });
 
+    it("should check accessibility for searchButton with searchButtonAriaLabel", () => {
+      CypressMountWithProviders(
+        <SearchComponent searchButton searchButtonAriaLabel={testCypress} />
+      );
+
+      cy.checkAccessibility();
+    });
+
     it.each(["34%", "70%"])(
       "should check accessibility for Search with searchWidth prop set to %s",
       (widthInPercentage) => {

diff --git a/src/components/search/search.component.tsx b/src/components/search/search.component.tsx
@@ -22,6 +22,8 @@ export interface SearchEvent {
 export interface SearchProps extends ValidationProps, MarginProps {
   /** Prop to specify the aria-label of the search component */
   "aria-label"?: string;
+  /** Prop to specify the aria-label of the search button */
+  searchButtonAriaLabel?: string;
   /** Prop for `uncontrolled` use */
   defaultValue?: string;
   /** Prop for `id` */
@@ -87,6 +89,7 @@ export const Search = React.forwardRef(
       searchWidth,
       maxWidth,
       searchButton,
+      searchButtonAriaLabel = "search button",
       placeholder,
       variant = "default",
       "aria-label": ariaLabel = "search",
@@ -286,7 +289,12 @@ export const Search = React.forwardRef(
         {searchButton && (
           <StyledSearchButton>
             {isSearchTyped && (
-              <Button size="medium" px="16px" {...buttonProps}>
+              <Button
+                aria-label={searchButtonAriaLabel}
+                size="medium"
+                px="16px"
+                {...buttonProps}
+              >
                 <StyledButtonIcon>
                   <Icon type="search" />
                 </StyledButtonIcon>

diff --git a/src/components/search/search.spec.tsx b/src/components/search/search.spec.tsx
@@ -278,6 +278,39 @@ describe("Search", () => {
         { modifier: `${StyledIcon}:hover` }
       );
     });
+
+    it("renders with the expected border radius styling", () => {
+      wrapper = renderSearch({ value: "" });
+      assertStyleMatch(
+        {
+          borderRadius: "var(--borderRadius050)",
+        },
+        wrapper.find(StyledInput)
+      );
+    });
+
+    it("renders with the expected border radius styling when searchButton is enabled and input has value", () => {
+      wrapper = renderSearch({ value: "foo", searchButton: true });
+      assertStyleMatch(
+        {
+          borderTopRightRadius: "var(--borderRadius000)",
+          borderBottomRightRadius: "var(--borderRadius000)",
+        },
+        wrapper,
+        { modifier: `${StyledTextInput}` }
+      );
+
+      assertStyleMatch(
+        {
+          borderTopLeftRadius: "var(--borderRadius000)",
+          borderBottomLeftRadius: "var(--borderRadius000)",
+          borderTopRightRadius: "var(--borderRadius050)",
+          borderBottomRightRadius: "var(--borderRadius050)",
+        },
+        wrapper.find(StyledSearchButton),
+        { modifier: `& ${StyledButton}` }
+      );
+    });
   });
 
   describe("When button is true and textbox is active", () => {
@@ -677,36 +710,33 @@ describe("Search", () => {
     });
   });
 
-  it("renders with the expected border radius styling", () => {
-    wrapper = renderSearch({ value: "" });
-    assertStyleMatch(
-      {
-        borderRadius: "var(--borderRadius050)",
-      },
-      wrapper.find(StyledInput)
-    );
-  });
+  describe("aria-label", () => {
+    it("has a default aria-label passed to Search", () => {
+      wrapper = renderSearch({ defaultValue: "foo" });
+      const search = wrapper.find(TextBox);
+      expect(search.prop("aria-label")).toEqual("search");
+    });
 
-  it("renders with the expected border radius styling when searchButton is enabled and input has value", () => {
-    wrapper = renderSearch({ value: "foo", searchButton: true });
-    assertStyleMatch(
-      {
-        borderTopRightRadius: "var(--borderRadius000)",
-        borderBottomRightRadius: "var(--borderRadius000)",
-      },
-      wrapper,
-      { modifier: `${StyledTextInput}` }
-    );
-
-    assertStyleMatch(
-      {
-        borderTopLeftRadius: "var(--borderRadius000)",
-        borderBottomLeftRadius: "var(--borderRadius000)",
-        borderTopRightRadius: "var(--borderRadius050)",
-        borderBottomRightRadius: "var(--borderRadius050)",
-      },
-      wrapper.find(StyledSearchButton),
-      { modifier: `& ${StyledButton}` }
-    );
+    it("has a default aria-label passed to Search button", () => {
+      wrapper = renderSearch({ defaultValue: "foo", searchButton: true });
+      const searchButton = wrapper.find(Button);
+      expect(searchButton.prop("aria-label")).toEqual("search button");
+    });
+
+    it("supports a custom aria-label passed to Search", () => {
+      wrapper = renderSearch({ defaultValue: "foo", "aria-label": "foobar" });
+      const search = wrapper.find(Search);
+      expect(search.prop("aria-label")).toEqual("foobar");
+    });
+
+    it("supports a custom aria-label passed to Search button", () => {
+      wrapper = renderSearch({
+        defaultValue: "foo",
+        searchButtonAriaLabel: "foobar button",
+        searchButton: true,
+      });
+      const searchButton = wrapper.find(Button);
+      expect(searchButton.prop("aria-label")).toEqual("foobar button");
+    });
   });
 });
diff --git a/src/components/search/search.stories.mdx b/src/components/search/search.stories.mdx
@@ -50,6 +50,8 @@ import Search from "carbon-react/lib/components/search";
 
 ### Search with Search Button and default width
 
+Please note, if you need to apply your own custom aria-label for the search button, this can be done by using the `searchButtonAriaLabel` prop. By default the aria-label is `search button`.
+
 <Canvas>
   <Story name="with SearchButton" story={stories.WithSearchButton} />
 </Canvas>

diff --git a/src/components/search/search.stories.tsx b/src/components/search/search.stories.tsx
@@ -32,7 +32,13 @@ export const Controlled: ComponentStory<typeof Search> = () => {
 };
 
 export const WithSearchButton: ComponentStory<typeof Search> = () => {
-  return <Search defaultValue="Here is some text" searchButton />;
+  return (
+    <Search
+      defaultValue="Here is some text"
+      searchButton
+      searchButtonAriaLabel="search button aria label"
+    />
+  );
 };
 
 export const DefaultWithColourBackground: ComponentStory<