♿️(frontend) align search modal field label with placeholder

Remove redundant aria-label on QuickSearch input, align DocSearchModal labels.

Author: Ovgodd

CHANGELOG.md

@@ -26,6 +26,7 @@ and this project adheres to
 - ♿️(frontend) add aria-hidden to decorative avatar SVGs in share modal #2324
 - 🏗️(frontend) move comments to its own folder feature #2374
 - ♿️(frontend) align mobile header menu aria-label i18n pattern #2377
+- ♿️(frontend) align search modal field label with placeholder #2384
 
 ### Fixed
 

src/frontend/apps/e2e/__tests__/app-impress/doc-grid-move.spec.ts

@@ -211,7 +211,7 @@ test.describe('Doc grid move', () => {
       page.getByRole('dialog').getByRole('heading', { name: 'Move' }),
     ).toBeVisible();
 
-    const input = page.getByRole('combobox', { name: 'Quick search input' });
+    const input = page.getByRole('combobox', { name: 'Search for a doc' });
     await input.click();
     await input.fill(titleDoc2);
 
@@ -299,7 +299,7 @@ test.describe('Doc grid move', () => {
       page.getByRole('dialog').getByRole('heading', { name: 'Move' }),
     ).toBeVisible();
 
-    const input = page.getByRole('combobox', { name: 'Quick search input' });
+    const input = page.getByRole('combobox', { name: 'Search for a doc' });
     await input.click();
     await input.fill(titleDoc2);
 

src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts

@@ -107,7 +107,7 @@ test.describe('Document search', () => {
 
     await searchButton.click();
     await expect(
-      page.getByRole('combobox', { name: 'Search documents' }),
+      page.getByRole('combobox', { name: 'Type the name of a document' }),
     ).toBeVisible();
     await expect(filters).toBeHidden();
 
@@ -120,7 +120,7 @@ test.describe('Document search', () => {
 
     await searchButton.click();
     await expect(
-      page.getByRole('combobox', { name: 'Search documents' }),
+      page.getByRole('combobox', { name: 'Type the name of a document' }),
     ).toBeVisible();
     await expect(filters).toBeHidden();
 
@@ -168,9 +168,11 @@ test.describe('Document search', () => {
     const searchButton = page.getByTestId('search-docs-button');
 
     await searchButton.click();
-    await page.getByRole('combobox', { name: 'Search documents' }).click();
     await page
-      .getByRole('combobox', { name: 'Search documents' })
+      .getByRole('combobox', { name: 'Type the name of a document' })
+      .click();
+    await page
+      .getByRole('combobox', { name: 'Type the name of a document' })
       .fill('sub page search');
 
     // Expect to find the first and second docs in the results list
@@ -192,7 +194,7 @@ test.describe('Document search', () => {
     );
     await searchButton.click();
     await page
-      .getByRole('combobox', { name: 'Search documents' })
+      .getByRole('combobox', { name: 'Type the name of a document' })
       .fill('second');
 
     // Now there is a sub page - expect to have the focus on the current doc

src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx

@@ -31,6 +31,7 @@ export type QuickSearchProps = {
   showInput?: boolean;
   loading?: boolean;
   label?: string;
+  listLabel?: string;
   placeholder?: string;
   groupKey?: string;
   beforeList?: ReactNode;
@@ -43,6 +44,7 @@ export const QuickSearch = ({
   inputValue,
   showInput = true,
   label,
+  listLabel,
   placeholder,
   beforeList,
   children,
@@ -74,7 +76,11 @@ export const QuickSearch = ({
             </QuickSearchInput>
           )}
           {beforeList}
-          <Command.List id={listId} aria-label={label} role="listbox">
+          <Command.List
+            id={listId}
+            aria-label={listLabel ?? label}
+            role="listbox"
+          >
             <Box>{children}</Box>
           </Command.List>
         </Command>

src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx

@@ -55,7 +55,6 @@ export const QuickSearchInput = ({
         <Command.Input
           ref={inputRef}
           autoFocus={true}
-          aria-label={t('Quick search input')}
           aria-controls={listId}
           value={inputValue}
           role="combobox"

src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx

@@ -97,7 +97,8 @@ const DocSearchModalGlobal = ({
           />
         </Box>
         <QuickSearch
-          label={t('Search documents')}
+          label={t('Type the name of a document')}
+          listLabel={t('Search results')}
           placeholder={t('Type the name of a document')}
           loading={loading}
           onFilter={handleInputSearch}

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocMoveModal.tsx

@@ -210,6 +210,7 @@ export const DocMoveModal = ({
           }}
         >
           <QuickSearch
+            label={t('Search for a doc')}
             placeholder={t('Search for a doc')}
             loading={loading}
             onFilter={handleInputSearch}