feat(accessibility): axe accessibility recommendation changes

Author: thejackshelton

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

@@ -134,6 +134,7 @@ export const AutocompleteRoot = component$(
     const inputValue = useSignal(defaultValue ? defaultValue : '');
     const listBoxId = useId();
     const inputId = useId();
+    const buttonId = useId();
     const activeOptionId = useSignal(null);
     const focusInput$ = $((inputId: string) => {
       triggerRef.value
@@ -156,6 +157,7 @@ export const AutocompleteRoot = component$(
       inputValue,
       listBoxId,
       inputId,
+      buttonId,
       activeOptionId,
       focusInput$,
     };