From 4cabfcc92198b9a1eb3f023ae4bbaab5ca385210 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Tue, 17 Mar 2026 16:07:55 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20update=20aria-ex?=
 =?UTF-8?q?panded=20dynamically=20on=20search=20combobox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Override cmdk aria-expanded via ref to reflect list state (#2039)
---
 .../src/components/quick-search/QuickSearch.tsx      |  3 +++
 .../src/components/quick-search/QuickSearchInput.tsx | 12 +++++++++++-
 .../docs/doc-search/components/DocSearchModal.tsx    |  1 +
 3 files changed, 15 insertions(+), 1 deletion(-)

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 30c09d9a8..75a2e5ab2 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<QuickSearchProps>) => {
   const ref = useRef<HTMLDivElement | null>(null);
@@ -72,6 +74,7 @@ export const QuickSearch = ({
               onFilter={onFilter}
               placeholder={placeholder}
               listId={listId}
+              isExpanded={isExpanded}
             >
               {inputContent}
             </QuickSearchInput>
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 c5cacb96d..e0d2c1a50 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<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}
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 6ed0a4001..f25151cac 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
@@ -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' }}