fix(SearchInput): advanced search aria-expanded set by default (#11494)

* fix(SearchInput): advanced search aria-expanded set by default

* update unit tests

Author: nicolethoen

packages/react-core/src/components/SearchInput/SearchInput.tsx

@@ -140,7 +140,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   onSearch,
   onClear,
   onToggleAdvancedSearch,
-  isAdvancedSearchOpen,
+  isAdvancedSearchOpen = false,
   resultsCount,
   onNextClick,
   onPreviousClick,

packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx

@@ -105,6 +105,8 @@ describe('SearchInput', () => {
         onClear={props.onClear}
       />
     );
+    const expandButton = screen.getByRole('button', { name: 'Open advanced search' });
+    expect(expandButton).toHaveAttribute('aria-expanded', 'false');
 
     await user.click(screen.getByRole('button', { name: 'Search' }));
 
@@ -139,7 +141,12 @@ describe('SearchInput', () => {
 
     await user.click(screen.getByRole('button', { name: 'Search' }));
 
-    await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
+    const expandButton = screen.getByRole('button', { name: 'Open advanced search' });
+    expect(expandButton).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(expandButton);
+    expect(expandButton).toHaveAttribute('aria-expanded', 'true');
+
     expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('First name'));
 
     expect(props.onSearch).toHaveBeenCalled();
@@ -149,7 +156,14 @@ describe('SearchInput', () => {
   test('advanced search with custom attributes and appendTo="inline', async () => {
     const user = userEvent.setup();
 
-    render(<SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo="inline" />);
+    render(
+      <SearchInput
+        data-testid="test-id"
+        attributes={[{ attr: 'test', display: 'test' }]}
+        advancedSearchDelimiter=":"
+        appendTo="inline"
+      />
+    );
 
     await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
 
@@ -160,7 +174,12 @@ describe('SearchInput', () => {
     const user = userEvent.setup();
 
     render(
-      <SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo={document.body} />
+      <SearchInput
+        data-testid="test-id"
+        attributes={[{ attr: 'test', display: 'test' }]}
+        advancedSearchDelimiter=":"
+        appendTo={document.body}
+      />
     );
 
     await user.click(screen.getByRole('button', { name: 'Open advanced search' }));

packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap

@@ -138,13 +138,6 @@ exports[`SearchInput advanced search 1`] = `
         </button>
       </div>
     </div>
-    <div
-      class=""
-      data-popper-escaped="true"
-      data-popper-placement="bottom-start"
-      data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
-    />
   </div>
 </DocumentFragment>
 `;
@@ -293,7 +286,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); min-width: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11);"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
     >
       <div
         class="pf-v6-c-panel pf-m-raised"
@@ -621,13 +614,6 @@ exports[`SearchInput renders search input in strict mode 1`] = `
         </button>
       </div>
     </div>
-    <div
-      class=""
-      data-popper-escaped="true"
-      data-popper-placement="bottom-start"
-      data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
-    />
   </div>
 </DocumentFragment>
 `;