fix(Search): add default placeholder (a11y) (#13306)

* fix(Search): add default placeholder for a11y * fix(Search): caps typo Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com> * fix(Search): adjust storybook stories, add placeholder as aria-label * test(search): update snapshots --------- Co-authored-by: TJ Egan <tw15egan@gmail.com> Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com> Co-authored-by: Francine Lucca <francinelucca@hotmail.com> Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
carbon-design-system · Mar 22, 2023 · 9d0a08f · 9d0a08f
1 parent a0c82cf
commit 9d0a08f
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 17 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -1045,9 +1045,10 @@
       "login": "jsehull",
       "name": "Jesse Hull",
       "avatar_url": "https://avatars.githubusercontent.com/u/9935383?v=4",
-      "profile": "https://jsehull.com/",
+      "profile": "https://github.com/jsehull",
       "contributions": [
-        "code"
+        "code",
+        "a11y"
       ]
     },
     {

diff --git a/README.md b/README.md
@@ -224,7 +224,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
   <tr>
     <td align="center"><a href="https://github.com/lewandom"><img src="https://avatars.githubusercontent.com/u/8779205?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Marcin Lewandowski</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=lewandom" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/remolueoend"><img src="https://avatars.githubusercontent.com/u/7881606?v=4?s=100" width="100px;" alt=""/><br /><sub><b>remolueoend</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=remolueoend" title="Code">💻</a></td>
-    <td align="center"><a href="https://jsehull.com/"><img src="https://avatars.githubusercontent.com/u/9935383?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jesse Hull</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=jsehull" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/jsehull"><img src="https://avatars.githubusercontent.com/u/9935383?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jesse Hull</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=jsehull" title="Code">💻</a><a href="#a11y-jsehull" title="Accessibility">️️️️♿️</a></td>
     <td align="center"><a href="https://github.com/awarrier99"><img src="https://avatars.githubusercontent.com/u/17476235?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ashvin Warrier</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=awarrier99" title="Code">💻</a></td>
     <td align="center"><a href="https://galvingao.com/"><img src="https://avatars.githubusercontent.com/u/12567059?v=4?s=100" width="100px;" alt=""/><br /><sub><b>GalvinGao</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=GalvinGao" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/bianca-sparxs"><img src="https://avatars.githubusercontent.com/u/33003148?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bianca Sparxs</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=bianca-sparxs" title="Code">💻</a></td>

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -478,11 +478,12 @@ exports[`DataTable behaves as expected selection should render and match snapsho
         class="cds--toolbar-content"
       >
         <div
-          aria-labelledby="custom-id-search"
+          aria-label="Filter table"
           class="cds--search cds--search--lg cds--toolbar-search-container-persistent"
           role="search"
         >
           <div
+            aria-labelledby="custom-id"
             class="cds--search-magnifier"
           >
             <svg
@@ -880,11 +881,12 @@ exports[`DataTable renders as expected - Component API should render and match s
         class="cds--toolbar-content"
       >
         <div
-          aria-labelledby="custom-id-search"
+          aria-label="Filter table"
           class="cds--search cds--search--lg cds--toolbar-search-container-persistent"
           role="search"
         >
           <div
+            aria-labelledby="custom-id"
             class="cds--search-magnifier"
           >
             <svg

diff --git a/...es/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap b/...es/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap
@@ -3,11 +3,12 @@
 exports[`TableToolbarSearch renders as expected - Component API should render 1`] = `
 <div>
   <div
-    aria-labelledby="custom-id-search"
+    aria-label="Filter table"
     class="cds--search cds--search--lg custom-class cds--toolbar-search-container-expandable"
     role="search"
   >
     <div
+      aria-labelledby="custom-id"
       class="cds--search-magnifier"
     >
       <svg

diff --git a/packages/react/src/components/Search/Search.js b/packages/react/src/components/Search/Search.js
@@ -32,7 +32,7 @@ const Search = React.forwardRef(function Search(
     onClear = () => {},
     onKeyDown,
     onExpand,
-    placeholder = '',
+    placeholder = 'Search',
     renderIcon,
     role = 'searchbox',
     size = 'md',
@@ -97,11 +97,12 @@ const Search = React.forwardRef(function Search(
   }
 
   return (
-    <div role="search" aria-labelledby={searchId} className={searchClasses}>
+    <div role="search" aria-label={placeholder} className={searchClasses}>
       {/* the magnifier is used in ExpandableSearch as a click target to expand,
       however, it does not need a keyboard event bc the input element gets focus on keyboard nav and expands that way*/}
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
       <div
+        aria-labelledby={uniqueId}
         role={onExpand ? 'button' : null}
         className={`${prefix}--search-magnifier`}
         onClick={onExpand}>

diff --git a/packages/react/src/components/Search/Search.stories.js b/packages/react/src/components/Search/Search.stories.js
@@ -28,7 +28,7 @@ export default {
 export const Default = () => (
   <Search
     size="lg"
-    defaultValue="A default value"
+    placeholder="Find your items"
     labelText="Search"
     closeButtonLabelText="Clear search input"
     id="search-1"
@@ -41,7 +41,7 @@ export const Disabled = () => (
   <Search
     disabled
     size="lg"
-    defaultValue="A default value"
+    placeholder="Find your items"
     labelText="Search"
     closeButtonLabelText="Clear search input"
     id="search-1"
@@ -66,7 +66,7 @@ export const WithLayer = () => {
     <>
       <Search
         size="lg"
-        defaultValue="First Layer"
+        placeholder="Layer one"
         labelText="Search"
         closeButtonLabelText="Clear search input"
         id="search-1"
@@ -76,20 +76,20 @@ export const WithLayer = () => {
       <Layer>
         <Search
           size="lg"
-          defaultValue="Second Layer"
+          placeholder="Layer two"
           labelText="Search"
           closeButtonLabelText="Clear search input"
-          id="search-1"
+          id="search-2"
           onChange={() => {}}
           onKeyDown={() => {}}
         />
         <Layer>
           <Search
             size="lg"
-            defaultValue="Third Layer"
+            placeholder="Layer three"
             labelText="Search"
             closeButtonLabelText="Clear search input"
-            id="search-1"
+            id="search-3"
             onChange={() => {}}
             onKeyDown={() => {}}
           />
@@ -104,6 +104,7 @@ export const ExpandableWithLayer = () => {
     <>
       <ExpandableSearch
         size="lg"
+        placeholder="Layer one"
         labelText="First Layer"
         closeButtonLabelText="Clear search input"
         id="search-expandable-1"
@@ -113,18 +114,20 @@ export const ExpandableWithLayer = () => {
       <Layer>
         <ExpandableSearch
           size="lg"
+          placeholder="Layer two"
           labelText="Second Layer"
           closeButtonLabelText="Clear search input"
-          id="search-expandable-1"
+          id="search-expandable-2"
           onChange={() => {}}
           onKeyDown={() => {}}
         />
         <Layer>
           <ExpandableSearch
             size="lg"
+            placeholder="Layer three"
             labelText="Third Layer"
             closeButtonLabelText="Clear search input"
-            id="search-expandable-1"
+            id="search-expandable-3"
             onChange={() => {}}
             onKeyDown={() => {}}
           />