diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid-move.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid-move.spec.ts index b5e9e6b33..462772e8e 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid-move.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid-move.spec.ts @@ -213,7 +213,7 @@ test.describe('Doc grid move', () => { .getByRole('heading', { name: 'Choose a new parent doc' }), ).toBeVisible(); - const input = page.getByRole('combobox', { name: 'Quick search input' }); + const input = page.getByRole('combobox', { name: 'Search' }); await input.click(); await input.fill(titleDoc2); @@ -303,7 +303,7 @@ test.describe('Doc grid move', () => { .getByRole('heading', { name: 'Choose a new parent doc' }), ).toBeVisible(); - const input = page.getByRole('combobox', { name: 'Quick search input' }); + const input = page.getByRole('combobox', { name: 'Search' }); await input.click(); await input.fill(titleDoc2); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts index 8ad269fb4..cddd1813b 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts @@ -168,7 +168,7 @@ test.describe('Document search', () => { // Click on the filter to show all docs await page - .getByLabel('Search results controls') + .getByRole('switch', { name: 'Search in all documents' }) .getByText('All docs') .click(); diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx index 4fc5f58a9..f402a62b3 100644 --- a/src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx +++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx @@ -43,6 +43,7 @@ export const QuickSearch = ({ inputValue, showInput = true, label, + loading, placeholder, beforeList, children, @@ -64,6 +65,7 @@ export const QuickSearch = ({ > {showInput && ( )} {beforeList} - + {children} diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx index 6a03e7e0f..43d15ec95 100644 --- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx +++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx @@ -19,15 +19,17 @@ export const QuickSearchGroup = ({ }: Props) => { return ( <> - - {group.groupName} - + {group.groupName && ( + + {group.groupName} + + )} void; placeholder?: string; withSeparator?: boolean; @@ -18,6 +19,7 @@ type QuickSearchInputProps = { }; export const QuickSearchInput = ({ inputValue, + label, onFilter, placeholder, children, @@ -60,14 +62,12 @@ export const QuickSearchInput = ({ diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx index 5c46596ec..75705e5c5 100644 --- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx +++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx @@ -1,10 +1,6 @@ import { createGlobalStyle } from 'styled-components'; export const QuickSearchStyle = createGlobalStyle` - & *:focus-visible { - outline: none; - } - .quick-search-container { [cmdk-root] { width: 100%; diff --git a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchContent.tsx index f9848d6ed..2044d401e 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchContent.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchContent.tsx @@ -95,9 +95,11 @@ export const DocSearchContent = ({ : [], }); - if (search) { + if (search && !loading) { announce( - t('{{count}} result(s) available', { count: elements.length }), + elements.length === 0 + ? t('No documents found') + : t('{{count}} document found', { count: elements.length }), 'polite', ); } diff --git a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchFilters.tsx b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchFilters.tsx index 7423f337f..336140d82 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchFilters.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchFilters.tsx @@ -9,43 +9,56 @@ import { useDocSearchFilterStore } from '../stores/useDocSearchFilterStore'; export const DocSearchFilters = () => { const { t } = useTranslation(); const { setFilter, filter } = useDocSearchFilterStore(); + const isAll = filter === 'all'; + const toggle = () => setFilter(isAll ? 'current' : 'all'); return ( /** * The switch is not focusable, so we wrap it in a div that can be focused * and handle the keydown event to toggle the switch with - * space key for accessibility reasons + * space or enter key for accessibility reasons */ { - if (e.key === ' ') { + if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); - setFilter(filter === 'all' ? 'current' : 'all'); + toggle(); } }} $css={css` - &:focus-visible .c__switch__rail { + &:focus-visible { outline: none; - box-shadow: 0 0 0 2px - var(--c--contextuals--border--semantic--brand--primary); + + .c__switch__rail { + outline: none; + box-shadow: 0 0 0 2px + var(--c--contextuals--border--semantic--brand--primary); + } } // Remove the default focus style of the switch component - .c__checkbox:focus-within { + .c__checkbox { border: none; box-shadow: none; outline: 0; } + & *:focus-visible { + outline: none; + } `} > setFilter(filter === 'all' ? 'current' : 'all')} + checked={isAll} + onChange={toggle} aria-label={t( 'Toggle to search in all documents or only in current document', )} + tabIndex={-1} /> ); diff --git a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx index efdf9d96a..9fa4027cf 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx @@ -90,12 +90,25 @@ const DocSearchModalGlobal = ({ closeOnClickOutside size={isLargeScreen ? ModalSize.LARGE : ModalSize.FULL} hideCloseButton - aria-describedby="doc-search-modal-title" + aria-label={t('Search for a document')} + aria-labelledby="doc-search-modal-title" + aria-describedby="doc-search-modal-description" title={ <> - + {t('Search for a document')} + + {t( + 'Search documents by name, navigate using arrows, and select a result with Enter.', + )} + - + 0} filter={filter} diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocMoveModal.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocMoveModal.tsx index 2f7be7f21..6ba4d49d6 100644 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocMoveModal.tsx +++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocMoveModal.tsx @@ -179,7 +179,7 @@ export const DocMoveModal = ({