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 30c09d9a..75a2e5ab 100644 --- a/src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx +++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx @@ -32,6 +32,7 @@ export type QuickSearchProps = { label?: string; placeholder?: string; groupKey?: string; + isExpanded?: boolean; }; export const QuickSearch = ({ @@ -41,6 +42,7 @@ export const QuickSearch = ({ showInput = true, label, placeholder, + isExpanded, children, }: PropsWithChildren) => { const ref = useRef(null); @@ -72,6 +74,7 @@ export const QuickSearch = ({ onFilter={onFilter} placeholder={placeholder} listId={listId} + isExpanded={isExpanded} > {inputContent} diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx index c5cacb96..e0d2c1a5 100644 --- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx +++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx @@ -1,5 +1,5 @@ import { Command } from 'cmdk'; -import { PropsWithChildren } from 'react'; +import { PropsWithChildren, useEffect, useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { HorizontalSeparator } from '@/components'; @@ -23,9 +23,18 @@ export const QuickSearchInput = ({ children, withSeparator: separator = true, listId, + isExpanded, }: PropsWithChildren) => { const { t } = useTranslation(); const { spacingsTokens } = useCunninghamTheme(); + const inputRef = useRef(null); + + useEffect(() => { + inputRef.current?.setAttribute( + 'aria-expanded', + String(isExpanded ?? false), + ); + }, [isExpanded]); if (children) { return ( @@ -47,6 +56,7 @@ export const QuickSearchInput = ({ >