fix(accessibility): ai combobox aria-activedescendant (#2413)

Author: Ovgodd

packages/ariakit/src/input/TextInput.tsx

@@ -25,6 +25,7 @@ export const TextInput = forwardRef<
     onChange,
     onSubmit,
     autoComplete,
+    "aria-activedescendant": ariaActivedescendant,
     rightSection,
     ...rest
   } = props;
@@ -52,6 +53,7 @@ export const TextInput = forwardRef<
           onChange={onChange}
           onSubmit={onSubmit}
           autoComplete={autoComplete}
+          aria-activedescendant={ariaActivedescendant}
         />
         {rightSection}
       </div>

packages/mantine/src/form/TextInput.tsx

@@ -22,6 +22,7 @@ export const TextInput = forwardRef<
     onChange,
     onSubmit,
     autoComplete,
+    "aria-activedescendant": ariaActivedescendant,
     rightSection,
     ...rest
   } = props;
@@ -49,6 +50,7 @@ export const TextInput = forwardRef<
       onChange={onChange}
       onSubmit={onSubmit}
       autoComplete={autoComplete}
+      aria-activedescendant={ariaActivedescendant}
     />
   );
 });

packages/react/src/editor/ComponentsContext.tsx

@@ -273,6 +273,7 @@ export type ComponentProps = {
         onChange: (event: ChangeEvent<HTMLInputElement>) => void;
         onSubmit?: () => void;
         autoComplete?: HTMLInputAutoCompleteAttribute;
+        "aria-activedescendant"?: string;
       };
     };
     Menu: {

packages/shadcn/src/form/TextInput.tsx

@@ -23,6 +23,7 @@ export const TextInput = forwardRef<
     onChange,
     onSubmit,
     autoComplete,
+    "aria-activedescendant": ariaActivedescendant,
     rightSection, // TODO: add rightSection
     ...rest
   } = props;
@@ -58,6 +59,7 @@ export const TextInput = forwardRef<
           onChange={onChange}
           onSubmit={onSubmit}
           ref={ref}
+          aria-activedescendant={ariaActivedescendant}
         />
       </div>
       {rightSection}

packages/xl-ai/src/components/AIMenu/PromptSuggestionMenu.tsx

@@ -68,6 +68,11 @@ export const PromptSuggestionMenu = (props: PromptSuggestionMenuProps) => {
   const { selectedIndex, setSelectedIndex, handler } =
     useSuggestionMenuKeyboardHandler(items, (item) => item.onItemClick());
 
+  const activeDescendantId =
+    items.length > 0 && selectedIndex >= 0 && selectedIndex < items.length
+      ? `bn-suggestion-menu-item-${selectedIndex}`
+      : undefined;
+
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
       // TODO: handle backspace to close
@@ -108,6 +113,7 @@ export const PromptSuggestionMenu = (props: PromptSuggestionMenuProps) => {
           onChange={handleChange}
           autoComplete={"off"}
           rightSection={props.rightSection}
+          aria-activedescendant={activeDescendantId}
         />
       </Components.Generic.Form.Root>
       {items.length > 0 && (