@sit-onyx/headless 1.0.0-alpha.10 → 1.0.0-alpha.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.11",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

package/src/composables/comboBox/createComboBox.ct.ts

@@ -36,7 +36,7 @@ const expectToClose = async (
  * Test an implementation of the combobox based on https://w3c.github.io/aria/#combobox
  */
 export const comboboxTesting = async (
-  page: Page,
+  _page: Page,
   listbox: Locator,
   combobox: Locator,
   button: Locator,

package/src/composables/comboBox/createComboBox.ts

@@ -1,4 +1,4 @@
-import { computed, ref, unref, type MaybeRef, type Ref } from "vue";
+import { computed, unref, type MaybeRef, type Ref } from "vue";
 import { createBuilder } from "../../utils/builder";
 import { createId } from "../../utils/id";
 import { isPrintableCharacter, wasKeyPressed, type PressedKey } from "../../utils/keyboard";
@@ -12,8 +12,13 @@ import { useTypeAhead } from "../typeAhead";
 
 export type ComboboxAutoComplete = "none" | "list" | "both";
 
-const OPENING_KEYS: PressedKey[] = ["ArrowDown", "ArrowUp", " ", "Enter", "Home", "End"];
-const CLOSING_KEYS: PressedKey[] = ["Escape", { key: "ArrowUp", altKey: true }, "Enter", "Tab"];
+export const OPENING_KEYS: PressedKey[] = ["ArrowDown", "ArrowUp", " ", "Enter", "Home", "End"];
+export const CLOSING_KEYS: PressedKey[] = [
+  "Escape",
+  { key: "ArrowUp", altKey: true },
+  "Enter",
+  "Tab",
+];
 const SELECTING_KEYS_SINGLE: PressedKey[] = ["Enter", " "];
 const SELECTING_KEYS_MULTIPLE: PressedKey[] = ["Enter"];
 
@@ -117,7 +122,6 @@ export const createComboBox = createBuilder(
     onActivatePrevious,
     templateRef,
   }: CreateComboboxOptions<TValue, TAutoComplete, TMultiple>) => {
-    const inputValid = ref(true);
     const controlsId = createId("comboBox-control");
 
     const autocomplete = computed(() => unref(autocompleteRef));
@@ -126,10 +130,6 @@ export const createComboBox = createBuilder(
 
     const handleInput = (event: Event) => {
       const inputElement = event.target as HTMLInputElement;
-      inputValid.value = inputElement.validity.valid;
-      if (!unref(isExpanded)) {
-        onToggle?.();
-      }
 
       if (autocomplete.value !== "none") {
         onAutocomplete?.(inputElement.value);
@@ -193,6 +193,10 @@ export const createComboBox = createBuilder(
         !isExpanded.value && onToggle?.();
         return typeAhead(event);
       }
+      if (autocomplete.value !== "none" && isPrintableCharacter(event.key)) {
+        !isExpanded.value && onToggle?.();
+        return;
+      }
       return handleNavigation(event);
     };
 

package/src/composables/listbox/createListbox.ts

@@ -185,15 +185,24 @@ export const createListbox = createBuilder(
           });
         }),
         option: computed(() => {
-          return (data: { label: string; value: TValue; disabled?: boolean; selected?: boolean }) =>
-            ({
+          return (data: {
+            label: string;
+            value: TValue;
+            disabled?: boolean;
+            selected?: boolean;
+          }) => {
+            const selected = data.selected ?? false;
+
+            return {
               id: getOptionId(data.value),
               role: "option",
               "aria-label": data.label,
               "aria-disabled": data.disabled,
-              [isMultiselect.value ? "aria-checked" : "aria-selected"]: data.selected || false,
+              "aria-checked": isMultiselect.value ? selected : undefined,
+              "aria-selected": !isMultiselect.value ? selected : undefined,
               onClick: () => !data.disabled && options.onSelect?.(data.value),
-            }) as const;
+            } as const;
+          };
         }),
       },
       state: {