Merge pull request #352 from thejackshelton/add-headless-autocomplete

Author: shairez

packages/kit-headless/src/components/autocomplete/autocomplete-button.tsx

@@ -11,11 +11,17 @@ export type ButtonProps = QwikIntrinsicElements['button'];
 
 export const AutocompleteButton = component$((props: ButtonProps) => {
   const contextService = useContext(AutocompleteContextId);
+  const buttonId = contextService.buttonId;
+  const listboxId = contextService.listBoxId;
 
   return (
     <button
       {...props}
+      id={buttonId}
       aria-expanded={contextService.isExpanded.value}
+      aria-label="listbox toggle button"
+      aria-haspopup="listbox"
+      aria-controls={listboxId}
       // add their own custom onClick with our onClick functionality
       onClick$={[
         $(

packages/kit-headless/src/components/autocomplete/autocomplete-context.type.ts

@@ -10,6 +10,7 @@ export interface AutocompleteContext {
   labelRef: Signal<HTMLElement | undefined>;
   listBoxId: string;
   inputId: string;
+  buttonId: string;
   activeOptionId: Signal<string | null>;
   inputValue: Signal<string>;
   focusInput$: QRL<(inputId: string) => void>;

packages/kit-headless/src/components/autocomplete/autocomplete-input.tsx

@@ -16,6 +16,8 @@ export type InputProps = QwikIntrinsicElements['input'];
 export const AutocompleteInput = component$((props: InputProps) => {
   const ref = useSignal<HTMLElement>();
   const contextService = useContext(AutocompleteContextId);
+  const listboxId = contextService.listBoxId;
+  const labelRef = contextService.labelRef;
 
   /* 
     previously had useTask here, but noticed whenever it first renders, 
@@ -67,9 +69,15 @@ export const AutocompleteInput = component$((props: InputProps) => {
       data-autocomplete-input-id={contextService.inputId}
       ref={ref}
       role="combobox"
+      aria-invalid={props['aria-invalid'] || false}
       id={contextService.inputId}
       aria-autocomplete="list"
-      aria-controls={contextService.listBoxId}
+      aria-haspopup="listbox"
+      aria-controls={listboxId}
+      aria-expanded={contextService.isExpanded.value}
+      aria-disabled={props['aria-disabled'] || false}
+      aria-label={labelRef.value ? undefined : contextService.inputValue.value}
+      aria-required={props['aria-required'] || false}
       bind:value={contextService.inputValue}
       onKeyDown$={[
         $((e: QwikKeyboardEvent) => {

packages/kit-headless/src/components/autocomplete/autocomplete-listbox.tsx

@@ -16,11 +16,12 @@ export type ListboxProps = {
 export const AutocompleteListbox = component$((props: ListboxProps) => {
   const ref = useSignal<HTMLElement>();
   const contextService = useContext(AutocompleteContextId);
+  const listboxId = contextService.listBoxId;
   contextService.listBoxRef = ref;
 
   return (
     <ul
-      id={contextService.listBoxId}
+      id={listboxId}
       ref={ref}
       style={`
           display: ${

packages/kit-headless/src/components/autocomplete/autocomplete-root.tsx

@@ -130,19 +130,19 @@ export const AutocompleteRoot = component$(
     const isExpanded = useSignal(false);
     const triggerRef = useSignal<HTMLElement>();
     const listBoxRef = useSignal<HTMLElement>();
+    const rootRef = useSignal<HTMLElement>();
     const labelRef = useSignal<HTMLElement>();
     const inputValue = useSignal(defaultValue ? defaultValue : '');
     const listBoxId = useId();
     const inputId = useId();
+    const buttonId = useId();
     const activeOptionId = useSignal(null);
     const focusInput$ = $((inputId: string) => {
-      triggerRef.value
+      rootRef.value
         ?.querySelector<HTMLElement>(
           `[data-autocomplete-input-id="${inputId}"]`
         )
         ?.focus();
-
-      console.log(triggerRef.value);
     });
 
     const contextService: AutocompleteContext = {
@@ -156,6 +156,7 @@ export const AutocompleteRoot = component$(
       inputValue,
       listBoxId,
       inputId,
+      buttonId,
       activeOptionId,
       focusInput$,
     };
@@ -226,6 +227,7 @@ export const AutocompleteRoot = component$(
           props.onKeyDown$,
         ]}
         {...props}
+        ref={rootRef}
       >
         <Slot />
       </div>

packages/kit-headless/src/components/autocomplete/autocomplete.spec.tsx

@@ -296,11 +296,11 @@ describe('Autocomplete', () => {
       THEN focus should move back to the previous option in the list.`, () => {
     cy.mount(<RegularAutocomplete />);
 
-    cy.get('input').type(`A`);
+    cy.get('input').type(`Ba`);
 
-    cy.findByRole('listbox').should('be.visible');
+    cy.findByRole('listbox');
 
-    cy.findByRole('option', { name: 'Apricot' }).focus().type(`{uparrow}`);
+    cy.findByRole('option', { name: 'Jabuticaba' }).focus().type(`{uparrow}`);
 
     cy.get('li').filter(':visible').first().should('have.focus');
   });