fix(search): a11y warning on search not expanded (#16873)

* fix(search): a11y warning on search not expanded * fix(tests): update snapshots and search tests * fix(search): use undefined * fix(search): aria-expanded if/else
carbon-design-system · Jul 1, 2024 · 5c37cc7 · 5c37cc7
1 parent a06f763
commit 5c37cc7
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 14 deletions.
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
@@ -501,10 +501,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
           role="search"
         >
           <div
-            aria-expanded="false"
-            aria-label="button"
             class="cds--search-magnifier"
-            role="button"
             tabindex="-1"
           >
             <svg
@@ -935,10 +932,7 @@ exports[`DataTable renders as expected - Component API should render and match s
           role="search"
         >
           <div
-            aria-expanded="false"
-            aria-label="button"
             class="cds--search-magnifier"
-            role="button"
             tabindex="-1"
           >
             <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
@@ -8,10 +8,7 @@ exports[`TableToolbarSearch renders as expected - Component API should render 1`
     role="search"
   >
     <div
-      aria-expanded="false"
-      aria-label="button"
       class="cds--search-magnifier"
-      role="button"
       tabindex="-1"
     >
       <svg

diff --git a/packages/react/src/components/Search/Search-test.js b/packages/react/src/components/Search/Search-test.js
@@ -154,8 +154,9 @@ describe('Search', () => {
     it('should have tabbable input and untabbable button if not expandable', async () => {
       render(<Search labelText="test-search" />);
 
-      // will have 2 buttons which is the close button and div with a role button
-      expect(screen.getAllByRole('button').length).toBe(2);
+      // will have 1 button which is the close button
+      expect(screen.getAllByRole('button').length).toBe(1);
+      // search icon not tabbable if not exandable
       expect(screen.getByRole('searchbox')).not.toHaveAttribute(
         'tabIndex',
         '-1'

diff --git a/packages/react/src/components/Search/Search.tsx b/packages/react/src/components/Search/Search.tsx
@@ -228,15 +228,21 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(function Search(
       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-label="button"
+        aria-label={onExpand ? 'button' : undefined}
         aria-labelledby={onExpand ? uniqueId : undefined}
-        role="button"
+        role={onExpand ? 'button' : undefined}
         className={`${prefix}--search-magnifier`}
         onClick={onExpand}
         onKeyDown={handleExpandButtonKeyDown}
         tabIndex={onExpand && !isExpanded ? 0 : -1}
         ref={expandButtonRef}
-        aria-expanded={onExpand && isExpanded ? true : false}
+        aria-expanded={
+          onExpand && isExpanded
+            ? true
+            : onExpand && !isExpanded
+            ? false
+            : undefined
+        }
         aria-controls={onExpand ? uniqueId : undefined}>
         <CustomSearchIcon icon={renderIcon} />
       </div>