vueless 1.2.15-beta.2 → 1.2.15-beta.4

package/ui.form-listbox/UListbox.vue

@@ -2,7 +2,7 @@
 import { watch, computed, useId, ref, useTemplateRef, nextTick } from "vue";
 import { isEqual } from "lodash-es";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { isMac } from "../utils/platform";
 import { filterOptions, filterGroups } from "./utilListbox";
@@ -110,6 +110,19 @@ const addOptionKeyCombination = computed(() => {
   return isMac ? "(⌘ + Enter)" : "(Ctrl + Enter)";
 });
 
+const listboxAriaMultiselectable = computed(() => props.multiple || undefined);
+
+const listboxAriaActivedescendant = computed(() =>
+  pointer.value >= 0 ? `${elementId}-${pointer.value}` : undefined,
+);
+
+const getOptionAriaSelected = (option: Option) => {
+  if (option && option.groupLabel) return undefined;
+  if (option.divider) return undefined;
+
+  return !!isSelectedOption(option);
+};
+
 const filteredOptions = computed(() => {
   const normalizedSearch = searchModel.value.toLowerCase().trim();
 
@@ -337,6 +350,12 @@ function onInputSearchBlur(event: FocusEvent) {
 }
 
 defineExpose({
+  /**
+   * Current pointer index value.
+   * @property {Ref<number>}
+   */
+  pointer,
+
   /**
    * Allows setting the pointer to a specific index.
    * @property {Function}
@@ -442,14 +461,20 @@ const {
       @update:model-value="onSearchChange"
     />
 
-    <ul :id="`listbox-${elementId}`" v-bind="listAttrs" role="listbox">
+    <ul
+      v-bind="listAttrs"
+      role="listbox"
+      :aria-multiselectable="listboxAriaMultiselectable"
+      :aria-activedescendant="listboxAriaActivedescendant"
+    >
       <li
         v-for="(option, index) of filteredOptions"
-        :id="`${elementId}-${index}`"
         :key="index"
         v-bind="listItemAttrs"
         ref="option"
         :role="!(option && option.groupLabel) ? 'option' : undefined"
+        :aria-selected="getOptionAriaSelected(option)"
+        :aria-disabled="Boolean(option.disabled) || undefined"
         :data-group-label="Boolean(option.groupLabel)"
       >
         <UDivider v-if="option.divider" v-bind="optionDividerAttrs" />
@@ -505,10 +530,18 @@ const {
 
         <!-- group title -->
         <template v-if="option && (option.groupLabel || option.isSubGroup) && !option.isHidden">
-          <div v-if="option.groupLabel" v-bind="groupAttrs" v-text="option.groupLabel" />
+          <div
+            v-if="option.groupLabel"
+            role="group"
+            :aria-label="option.groupLabel"
+            v-bind="groupAttrs"
+            v-text="option.groupLabel"
+          />
 
           <div
             v-else-if="option.isSubGroup"
+            role="group"
+            :aria-label="String(option[labelKey])"
             :style="getMarginForSubCategory(option.level)"
             v-bind="subGroupAttrs"
             v-text="option[labelKey]"
@@ -516,13 +549,7 @@ const {
         </template>
       </li>
 
-      <li
-        v-if="!filteredOptions.length"
-        :id="`${elementId}-empty`"
-        ref="empty-option"
-        role="option"
-        v-bind="optionAttrs"
-      >
+      <li v-if="!filteredOptions.length" ref="empty-option" role="option" v-bind="optionAttrs">
         <!-- @slot Use it to add something instead of empty state. -->
         <slot name="empty">
           <span v-bind="optionContentAttrs" v-text="localeMessages.noDataToShow" />
@@ -532,7 +559,6 @@ const {
       <!-- Add button -->
       <template v-if="addOption">
         <li
-          :id="`${elementId}-addOption`"
           ref="add-option"
           role="option"
           v-bind="addOptionLabelWrapperAttrs"

package/ui.form-radio/URadio.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, inject, onMounted, ref, watchEffect, toValue, useId } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import ULabel from "../ui.form-label/ULabel.vue";

package/ui.form-radio-group/URadioGroup.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, provide, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import ULabel from "../ui.form-label/ULabel.vue";

package/ui.form-select/USelect.vue

@@ -7,7 +7,7 @@ import UListbox from "../ui.form-listbox/UListbox.vue";
 import UBadge from "../ui.text-badge/UBadge.vue";
 import ULink from "../ui.button-link/ULink.vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { hasSlotContent } from "../utils/helper";
 import { getDefaults } from "../utils/ui";
 import { isMac } from "../utils/platform";
@@ -218,6 +218,28 @@ const toggleIconName = computed(() => {
   return props.toggleIcon ? config.value.defaults.toggleIcon : "";
 });
 
+const ariaExpanded = computed(() => isOpen.value);
+
+const ariaActiveDescendant = computed(() => {
+  if (!isOpen.value || !listboxRef.value) return undefined;
+  const pointer = listboxRef.value.pointer;
+
+  if (pointer === undefined || pointer < 0) return undefined;
+
+  return `${elementId}-${pointer}`;
+});
+
+const ariaInvalid = computed(() => Boolean(props.error) ?? undefined);
+
+const ariaLabelledBy = computed(() => (props.label ? elementId : undefined));
+
+const ariaDescribedBy = computed(() => {
+  if (props.error) return `error-${elementId}`;
+  if (props.description) return `description-${elementId}`;
+
+  return undefined;
+});
+
 watch(localValue, setLabelPosition, { deep: true });
 
 onMounted(() => {
@@ -232,6 +254,10 @@ function onSearchChange(query: string) {
   emit("searchChange", query);
 }
 
+function onSearchUpdate(query: string) {
+  emit("update:search", query);
+}
+
 function onKeydownAddOption(event: KeyboardEvent) {
   if (!isOpen.value) return;
 
@@ -484,6 +510,7 @@ const {
 <template>
   <ULabel
     ref="labelComponent"
+    :for="elementId"
     :size="size"
     :label="label"
     :error="error"
@@ -515,7 +542,15 @@ const {
       ref="wrapper"
       :tabindex="searchable || disabled ? -1 : 0"
       role="combobox"
-      :aria-owns="'listbox-' + elementId"
+      :aria-expanded="ariaExpanded"
+      aria-haspopup="listbox"
+      :aria-controls="`listbox-${elementId}`"
+      :aria-activedescendant="ariaActiveDescendant"
+      :aria-disabled="disabled || undefined"
+      :aria-invalid="ariaInvalid"
+      :aria-labelledby="ariaLabelledBy"
+      :aria-describedby="ariaDescribedBy"
+      :aria-autocomplete="searchable ? 'list' : undefined"
       v-bind="wrapperAttrs"
       @focus="activate"
       @blur="onBlur"
@@ -830,7 +865,7 @@ const {
         @blur="onListboxBlur"
         @search-blur="onListboxSearchBlur"
         @search-change="onSearchChange"
-        @update:search="(value) => emit('update:search', value)"
+        @update:search="onSearchUpdate"
       >
         <template #before-option="{ option, index }">
           <!--

package/ui.form-select/tests/USelect.test.ts

@@ -448,7 +448,9 @@ describe("USelect.vue", () => {
         },
       });
 
-      expect(component.find("[vl-key='wrapper']").attributes("aria-owns")).toBe(`listbox-${id}`);
+      expect(component.find("[vl-key='wrapper']").attributes("aria-controls")).toBe(
+        `listbox-${id}`,
+      );
     });
 
     it("Data Test – applies the correct data-test attributes", async () => {

package/ui.form-switch/USwitch.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, useId, useTemplateRef } from "vue";
+import { computed, useId, useSlots, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
@@ -29,7 +29,7 @@ const emit = defineEmits([
   "update:modelValue",
 ]);
 
-const wrapperRef = useTemplateRef<HTMLLabelElement>("wrapper");
+const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 
 const { localeMessages } = useComponentLocaleMessages<typeof defaultConfig.i18n>(
   COMPONENT_NAME,
@@ -42,8 +42,14 @@ const checkedValue = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
+const slots = useSlots();
+
 const elementId = props.id || useId();
 
+const hasLabel = computed(() => Boolean(props.label || slots.label));
+
+const inputAriaLabelledBy = computed(() => (hasLabel.value ? elementId : undefined));
+
 const switchLabel = computed(() => {
   return checkedValue.value ? localeMessages.value.active : localeMessages.value.inactive;
 });
@@ -62,7 +68,8 @@ function toggle() {
   }
 }
 
-function onClickToggle() {
+function onClickToggle(event: Event) {
+  event.stopPropagation();
   toggle();
 }
 
@@ -70,10 +77,14 @@ function onKeydownSpace() {
   toggle();
 }
 
+function onClickWrapper() {
+  toggle();
+}
+
 defineExpose({
   /**
    * A reference to the component's wrapper element for direct DOM manipulation.
-   * @property {HTMLLabelElement}
+   * @property {HTMLDivElement}
    */
   wrapperRef,
 });
@@ -118,13 +129,13 @@ const {
       <slot name="label" :label="label" />
     </template>
 
-    <label
+    <div
       ref="wrapper"
       tabindex="0"
-      :for="elementId"
       v-bind="wrapperAttrs"
       @keydown.enter="onKeydownSpace"
       @keydown.space.prevent="onKeydownSpace"
+      @click="onClickWrapper"
     >
       <input
         :id="elementId"
@@ -132,6 +143,8 @@ const {
         tabindex="-1"
         type="checkbox"
         :disabled="disabled"
+        :aria-labelledby="inputAriaLabelledBy"
+        :aria-label="!hasLabel ? localeMessages.switch : undefined"
         v-bind="inputAttrs"
         @click="onClickToggle"
       />
@@ -146,6 +159,6 @@ const {
       </span>
 
       <span v-if="toggleLabel" v-bind="toggleLabelAttrs" v-text="switchLabel" />
-    </label>
+    </div>
   </ULabel>
 </template>

package/ui.form-switch/config.ts

@@ -74,7 +74,9 @@ export default /*tw*/ {
       },
     ],
   },
+  /* These are used for a11y. */
   i18n: {
+    switch: "Switch",
     inactive: "Off",
     active: "On",
   },

package/ui.form-switch/tests/USwitch.test.ts

@@ -106,7 +106,7 @@ describe("USwitch.vue", () => {
           },
         });
 
-        expect(component.find("label").attributes("class")).toContain(color);
+        expect(component.get("[vl-key='wrapper']").attributes("class")).toContain(`bg-${color}`);
       });
     });
 
@@ -169,7 +169,9 @@ describe("USwitch.vue", () => {
       const labelComponent = component.findComponent(ULabel);
 
       expect(labelComponent.props("disabled")).toBe(true);
-      expect(component.find("label").attributes("class")).toContain("pointer-events-none");
+      expect(component.get("[vl-key='wrapper']").attributes("class")).toContain(
+        "pointer-events-none",
+      );
     });
 
     it("Id – applies the correct id attribute", () => {
@@ -210,7 +212,7 @@ describe("USwitch.vue", () => {
         },
       });
 
-      expect(component.findAll("label")[1].text()).toBe(customLabelContent);
+      expect(component.find("label").text()).toBe(customLabelContent);
     });
 
     it("Label – exposes label prop to slot", () => {
@@ -225,7 +227,7 @@ describe("USwitch.vue", () => {
         },
       });
 
-      expect(component.findAll("label")[1].text()).toBe(`Modified ${defaultLabel}`);
+      expect(component.find("label").text()).toBe(`Modified ${defaultLabel}`);
     });
   });
 

package/ui.form-textarea/UTextarea.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, ref, watch, useSlots, useId, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 
@@ -63,7 +63,7 @@ const elementId = props.id || useId();
 const textareaRef = useTemplateRef<HTMLTextAreaElement>("textarea");
 const labelComponentRef = useTemplateRef<InstanceType<typeof ULabel>>("labelComponent");
 const leftSlotWrapperRef = useTemplateRef<HTMLDivElement>("leftSlotWrapper");
-const wrapperRef = useTemplateRef<HTMLLabelElement>("wrapper");
+const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 
 const currentRows = ref(Number(props.rows));
 
@@ -192,10 +192,14 @@ function onMousedown() {
   emit("mousedown");
 }
 
+function onSlotClick() {
+  textareaRef.value?.focus();
+}
+
 defineExpose({
   /**
    * A reference to the component's wrapper element for direct DOM manipulation.
-   * @property {HTMLLabelElement}
+   * @property {HTMLDivElement}
    */
   wrapperRef,
 
@@ -246,12 +250,13 @@ const {
       <slot name="label" :label="label" />
     </template>
 
-    <label ref="wrapper" :for="elementId" v-bind="wrapperAttrs">
+    <div ref="wrapper" v-bind="wrapperAttrs">
       <span
         v-if="hasSlotContent($slots['left'])"
         ref="leftSlotWrapper"
         :for="elementId"
         v-bind="leftSlotAttrs"
+        @click="onSlotClick"
       >
         <!-- @slot Use it to add something before the text. -->
         <slot name="left" />
@@ -277,10 +282,15 @@ const {
         @click="onClick"
       />
 
-      <span v-if="hasSlotContent($slots['right'])" :for="elementId" v-bind="rightSlotAttrs">
+      <span
+        v-if="hasSlotContent($slots['right'])"
+        :for="elementId"
+        v-bind="rightSlotAttrs"
+        @click="onSlotClick"
+      >
         <!-- @slot Use it to add something after the text. -->
         <slot name="right" />
       </span>
-    </label>
+    </div>
   </ULabel>
 </template>

package/ui.form-textarea/tests/UTextarea.test.ts

@@ -528,7 +528,7 @@ describe("UTextarea.vue", () => {
       });
 
       expect(component.vm.wrapperRef).toBeDefined();
-      expect(component.vm.wrapperRef!.tagName).toBe("LABEL");
+      expect(component.vm.wrapperRef!.tagName).toBe("DIV");
     });
 
     it("Textarea Element – exposes textarea element ref", () => {

package/ui.image-avatar/UAvatar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UIcon from "../ui.image-icon/UIcon.vue";

package/ui.image-icon/UIcon.vue

@@ -2,7 +2,7 @@
 import { computed, defineAsyncComponent, useTemplateRef } from "vue";
 import { cachedIcons } from "virtual:vueless/icons";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { ICONS_CACHED_DIR, INTERNAL_ICONS_LIBRARY, STORYBOOK_ICONS_LIBRARY } from "../constants";
 

package/ui.loader/ULoader.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import { COMPONENT_NAME, ELLIPSES_AMOUNT } from "./constants";

package/ui.loader-overlay/ULoaderOverlay.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import ULoader from "../ui.loader/ULoader.vue";

package/ui.loader-progress/ULoaderProgress.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, watch, ref, useTemplateRef, onBeforeMount, onBeforeUnmount } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { getRequestWithoutQuery } from "../utils/requestQueue";
 

package/ui.navigation-breadcrumbs/UBreadcrumbs.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import defaultConfig from "./config";

package/ui.navigation-pagination/UPagination.vue

@@ -2,8 +2,9 @@
 import { computed, useTemplateRef } from "vue";
 import { range } from "lodash-es";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
+import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
 import UButton from "../ui.button/UButton.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
@@ -32,6 +33,12 @@ const emit = defineEmits([
   "update:modelValue",
 ]);
 
+const { localeMessages } = useComponentLocaleMessages<typeof defaultConfig.i18n>(
+  COMPONENT_NAME,
+  defaultConfig.i18n,
+  props?.config?.i18n,
+);
+
 const paginationRef = useTemplateRef<HTMLDivElement>("pagination");
 
 const currentPage = computed({
@@ -133,6 +140,7 @@ const {
       :label="firstLabel"
       :square="!firstLabel"
       :disabled="prevIsDisabled"
+      :aria-label="firstLabel || localeMessages.first"
       v-bind="firstButtonAttrs"
       :data-test="getDataTest('first')"
       @click="goToFirstPage"
@@ -156,6 +164,7 @@ const {
       :label="prevLabel"
       :square="!prevLabel"
       :disabled="prevIsDisabled"
+      :aria-label="prevLabel || localeMessages.prev"
       v-bind="prevButtonAttrs"
       :data-test="getDataTest('prev')"
       @click="goToPrevPage"
@@ -185,6 +194,8 @@ const {
         :variant="variant"
         :label="String(page.number)"
         :disabled="disabled"
+        :aria-label="`${localeMessages.currentPage} ${page.number}`"
+        :aria-current="true"
         v-bind="activeButtonAttrs"
         :data-test="getDataTest('active')"
       />
@@ -194,6 +205,7 @@ const {
         variant="ghost"
         :label="String(page.number)"
         :disabled="disabled"
+        :aria-label="`${localeMessages.goToPage} ${page.number}`"
         v-bind="inactiveButtonAttrs"
         :data-test="getDataTest('inactive')"
         @click="selectPage(page.number)"
@@ -205,6 +217,7 @@ const {
       :label="nextLabel"
       :square="!nextLabel"
       :disabled="nextIsDisabled"
+      :aria-label="nextLabel || localeMessages.next"
       v-bind="nextButtonAttrs"
       :data-test="getDataTest('next')"
       @click="goToNextPage"
@@ -229,6 +242,7 @@ const {
       :label="lastLabel"
       :square="!lastLabel"
       :disabled="nextIsDisabled"
+      :aria-label="lastLabel || localeMessages.last"
       v-bind="lastButtonAttrs"
       :data-test="getDataTest('last')"
       @click="goToLastPage"

package/ui.navigation-pagination/config.ts

@@ -34,6 +34,15 @@ export default /*tw*/ {
   firstIcon: "{>paginationIcon}",
   prevIcon: "{>paginationIcon}",
   nextIcon: "{>paginationIcon}",
+  /* These are used for a11y. */
+  i18n: {
+    first: "Go to first page",
+    last: "Go to last page",
+    prev: "Go to previous page",
+    next: "Go to next page",
+    currentPage: "Current page, page",
+    goToPage: "Go to page",
+  },
   defaults: {
     variant: "solid",
     size: "md",

package/ui.navigation-progress/UProgress.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import defaultConfig from "./config";

package/ui.navigation-progress/UStepperProgress.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 
 import defaultConfig from "./config";
 

package/ui.navigation-tab/UTab.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, inject, toValue, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import UButton from "../ui.button/UButton.vue";
 

package/ui.navigation-tabs/UTabs.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, provide, onMounted, onUnmounted, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UTab from "../ui.navigation-tab/UTab.vue";

package/ui.other-chip/UChip.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import defaultConfig from "./config";

package/ui.other-dot/UDot.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import { COMPONENT_NAME } from "./constants";