♿️(frontend) update aria-expanded dynamically on search combobox

Override cmdk aria-expanded via ref to reflect list state (#2039)

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<QuickSearchProps>) => {
   const ref = useRef<HTMLDivElement | null>(null);
@@ -72,6 +74,7 @@ export const QuickSearch = ({
               onFilter={onFilter}
               placeholder={placeholder}
               listId={listId}
+              isExpanded={isExpanded}
             >
               {inputContent}
             </QuickSearchInput>

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<QuickSearchInputProps>) => {
   const { t } = useTranslation();
   const { spacingsTokens } = useCunninghamTheme();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.setAttribute(
+      'aria-expanded',
+      String(isExpanded ?? false),
+    );
+  }, [isExpanded]);
 
   if (children) {
     return (
@@ -47,6 +56,7 @@ export const QuickSearchInput = ({
       >
         <Icon iconName="search" $variation="secondary" aria-hidden="true" />
         <Command.Input
+          ref={inputRef}
           autoFocus={true}
           aria-label={t('Quick search input')}
           aria-controls={listId}

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

@@ -89,6 +89,7 @@ const DocSearchModalGlobal = ({
           placeholder={t('Type the name of a document')}
           loading={loading}
           onFilter={handleInputSearch}
+          isExpanded={search.length > 0}
         >
           <Box
             $padding={{ horizontal: '10px', vertical: 'base' }}