vueless 1.2.15-beta.3 → 1.2.15-beta.4

package/locales/en.json

@@ -1 +1 @@
-{"USelect":{"listIsEmpty":"List is empty.","noDataToShow":"No data to show.","clear":"clear","addMore":"Add more..."},"USwitch":{"inactive":"Off","active":"On"},"UInputFile":{"sizeError":"File size is too big.","formatError":"Format is not supported.","noFile":"No file selected","uploadFile":"Choose file"},"UListbox":{"noDataToShow":"No data to show.","add":"Add","search":"Search..."},"UModalConfirm":{"confirm":"Confirm","cancel":"Cancel"},"UTable":{"noData":"There is no data in the table."},"UCalendar":{"today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}},"timeLabel":"Time","okLabel":"Ok"},"UDatePicker":{"today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}},"timeLabel":"Time","okLabel":"Ok"},"UDatePickerRange":{"ownRange":"Own range","week":"Week","month":"Month","quarter":"Quarter","year":"Year","dateFormatWithDot":"The date should be in format 'dd.mm.yyyy'.","notCorrectMonthNumber":"Wrong month number.","notCorrectDayNumber":"Wrong day in month.","fromDateGraterThanSecond":"The 'from' date should be less than the 'to' date.","toDateSmallerThanFirst":"The 'to' date should be greater than the 'from' date.","today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}}},"UDataList":{"emptyTitle":"","emptyDescription":"There is no data in the list."},"UNotify":{"success":{"default":"Operation successful."},"warning":{"default":"Operation warning."},"error":{"default":"Operation error."}}}
+{"USelect":{"listIsEmpty":"List is empty.","noDataToShow":"No data to show.","clear":"clear","addMore":"Add more..."},"USwitch":{"switch":"Switch","inactive":"Off","active":"On"},"UInputFile":{"sizeError":"File size is too big.","formatError":"Format is not supported.","noFile":"No file selected","uploadFile":"Choose file"},"UListbox":{"noDataToShow":"No data to show.","add":"Add","search":"Search..."},"UModalConfirm":{"confirm":"Confirm","cancel":"Cancel"},"UTable":{"noData":"There is no data in the table.","checkbox":"Checkbox"},"UCalendar":{"today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}},"timeLabel":"Time","okLabel":"Ok","previousYear":"Previous Year","nextYear":"Next Year","previousMonth":"Previous Month","nextMonth":"Next Month"},"UDatePicker":{"today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}},"timeLabel":"Time","okLabel":"Ok","previousYear":"Previous Year","nextYear":"Next Year","previousMonth":"Previous Month","nextMonth":"Next Month"},"UDatePickerRange":{"ownRange":"Own range","week":"Week","month":"Month","quarter":"Quarter","year":"Year","dateFormatWithDot":"The date should be in format 'dd.mm.yyyy'.","notCorrectMonthNumber":"Wrong month number.","notCorrectDayNumber":"Wrong day in month.","fromDateGraterThanSecond":"The 'from' date should be less than the 'to' date.","toDateSmallerThanFirst":"The 'to' date should be greater than the 'from' date.","today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}}},"UDataList":{"emptyTitle":"","emptyDescription":"There is no data in the list."},"UNotify":{"success":{"default":"Operation successful."},"warning":{"default":"Operation warning."},"error":{"default":"Operation error."}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.15-beta.3",
+  "version": "1.2.15-beta.4",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.container-accordion-item/UAccordionItem.vue

@@ -145,11 +145,7 @@ const {
         </slot>
       </div>
 
-      <div
-        v-if="description || hasSlotContent(slots['description'])"
-        :id="`description-${elementId}`"
-        v-bind="descriptionAttrs"
-      >
+      <div v-if="description || hasSlotContent(slots['description'])" v-bind="descriptionAttrs">
         <!--
           @slot Use it to add custom description content.
           @binding {string} description

package/ui.container-accordion-item/tests/UAccordionItem.test.ts

@@ -91,7 +91,7 @@ describe("UAccordionItem", () => {
         },
       });
 
-      expect(component.find(`[id="description-${id}"]`).exists()).toBe(true);
+      expect(component.find(`[vl-key='description']`).exists()).toBe(true);
     });
 
     // DataTest prop
@@ -381,13 +381,13 @@ describe("UAccordionItem", () => {
         },
       });
 
-      expect(component.find("[id^='description-']").classes()).not.toContain("opacity-100");
+      expect(component.find("[vl-key='description']").classes()).not.toContain("opacity-100");
 
       await component.find(`.${slotClass}`).trigger("click");
-      expect(component.find("[id^='description-']").classes()).toContain("opacity-100");
+      expect(component.find("[vl-key='description']").classes()).toContain("opacity-100");
 
       await component.find(`.${slotClass}`).trigger("click");
-      expect(component.find("[id^='description-']").classes()).not.toContain("opacity-100");
+      expect(component.find("[vl-key='description']").classes()).not.toContain("opacity-100");
     });
 
     it("description slot content is always visible when slot is provided", () => {
@@ -461,7 +461,7 @@ describe("UAccordionItem", () => {
         },
       });
 
-      const descriptionElement = component.find("[id^='description-']");
+      const descriptionElement = component.find("[vl-key='description']");
 
       // Initially not opened
       expect(descriptionElement.classes()).not.toContain(openedClass);

package/ui.data-table/config.ts

@@ -105,6 +105,8 @@ export default /*tw*/ {
   `,
   i18n: {
     noData: "There is no data in the table.",
+    /* These are used for a11y. */
+    checkbox: "Checkbox",
   },
   defaults: {
     emptyCellLabel: "—",

package/ui.data-table/storybook/stories.ts

@@ -7,6 +7,8 @@ import {
 } from "../../utils/storybook";
 import { getRandomId } from "../../utils/helper";
 
+import defaultConfig from "../config";
+
 import UTable from "../UTable.vue";
 import UButton from "../../ui.button/UButton.vue";
 import ULink from "../../ui.button-link/ULink.vue";
@@ -731,7 +733,7 @@ export const EmptyStateSlot = DefaultTemplate.bind({});
 EmptyStateSlot.args = {
   rows: [],
   config: {
-    i18n: { noData: "Fetching data..." },
+    i18n: { ...defaultConfig.i18n, noData: "Fetching data..." },
     bodyEmptyStateCell: "py-10",
   },
   slotTemplate: `

package/ui.form-calendar/UCalendar.vue

@@ -829,6 +829,7 @@ const {
         color="grayscale"
         variant="ghost"
         :icon="config.defaults.prevYearIcon"
+        :aria-label="localeMessages.previousYear"
         v-bind="nextPrevButtonAttrs"
         :data-test="getDataTest('prev-year')"
         @mousedown.prevent.capture
@@ -841,6 +842,7 @@ const {
         color="grayscale"
         variant="ghost"
         :icon="config.defaults.prevIcon"
+        :aria-label="localeMessages.previousMonth"
         v-bind="nextPrevButtonAttrs"
         :data-test="getDataTest('prev')"
         @mousedown.prevent.capture
@@ -866,6 +868,7 @@ const {
         color="grayscale"
         variant="ghost"
         :icon="config.defaults.nextIcon"
+        :aria-label="localeMessages.nextMonth"
         v-bind="nextPrevButtonAttrs"
         :data-test="getDataTest('next')"
         @mousedown.prevent.capture
@@ -879,6 +882,7 @@ const {
         color="grayscale"
         variant="ghost"
         :icon="config.defaults.nextYearIcon"
+        :aria-label="localeMessages.nextYear"
         v-bind="nextPrevButtonAttrs"
         :data-test="getDataTest('next-year')"
         @mousedown.prevent.capture

package/ui.form-calendar/config.ts

@@ -144,6 +144,11 @@ export default /*tw*/ {
     },
     timeLabel: "Time",
     okLabel: "Ok",
+    /* These are used for a11y. */
+    previousYear: "Previous Year",
+    nextYear: "Next Year",
+    previousMonth: "Previous Month",
+    nextMonth: "Next Month",
   },
   defaults: {
     userDateFormat: "j F, Y",

package/ui.form-checkbox/UCheckbox.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { inject, ref, onMounted, computed, watchEffect, toValue, useId } from "vue";
+import { inject, ref, onMounted, computed, watchEffect, toValue, useId, useSlots } from "vue";
 import { isEqual } from "lodash-es";
 
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
+import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
@@ -48,12 +49,24 @@ const emit = defineEmits([
   "input",
 ]);
 
+const { localeMessages } = useComponentLocaleMessages<typeof defaultConfig.i18n>(
+  COMPONENT_NAME,
+  defaultConfig.i18n,
+  props?.config?.i18n,
+);
+
+const slots = useSlots();
+
 const checkboxName = ref("");
 const checkboxSize = ref(props.size);
 const checkboxColor = ref(props.color);
 
 const elementId = props.id || useId();
 
+const hasLabel = computed(() => Boolean(props.label || slots.label));
+
+const inputAriaLabelledBy = computed(() => (hasLabel.value ? elementId : undefined));
+
 const isBinary = computed(() => !Array.isArray(props.modelValue));
 const isCheckboxInGroup = computed(() => Boolean(toValue(getCheckboxGroupName)));
 
@@ -108,6 +121,10 @@ function onChange() {
   emit("input", newModelValue);
 }
 
+function onIconClick() {
+  document.getElementById(elementId)?.click();
+}
+
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
@@ -161,15 +178,17 @@ const {
       :name="checkboxName"
       :checked="isChecked"
       :disabled="disabled"
+      :aria-labelledby="inputAriaLabelledBy"
+      :aria-label="!hasLabel ? localeMessages.checkbox : undefined"
       v-bind="checkboxAttrs"
       :data-test="getDataTest()"
       @change="onChange"
     />
 
-    <label
+    <div
       v-if="isChecked"
       v-bind="partial ? partiallyCheckedAttrs : checkedAttrs"
-      :for="elementId"
+      @click="onIconClick"
     >
       <UIcon
         v-if="partial"
@@ -179,7 +198,7 @@ const {
       />
 
       <UIcon v-else :name="config.defaults.checkedIcon" color="inherit" v-bind="checkedIconAttrs" />
-    </label>
+    </div>
 
     <template #bottom>
       <!-- @slot Use it to add something below the checkbox. -->

package/ui.form-checkbox/config.ts

@@ -51,6 +51,10 @@ export default /*tw*/ {
     },
   },
   partiallyCheckedIcon: "{>checkedIcon}",
+  /* These are used for a11y. */
+  i18n: {
+    checkbox: "Checkbox",
+  },
   defaults: {
     color: "primary",
     size: "md",

package/ui.form-checkbox/tests/UCheckbox.test.ts

@@ -198,7 +198,7 @@ describe("UCheckbox.vue", () => {
           },
         });
 
-        expect(component.find("label").attributes("class")).toContain(color);
+        expect(component.get("[vl-key='checked']").attributes("class")).toContain(`bg-${color}`);
       });
     });
 

package/ui.form-date-picker/config.ts

@@ -125,6 +125,11 @@ export default /*tw*/ {
     },
     timeLabel: "Time",
     okLabel: "Ok",
+    /* These are used for a11y. */
+    previousYear: "Previous Year",
+    nextYear: "Next Year",
+    previousMonth: "Previous Month",
+    nextMonth: "Next Month",
   },
   defaults: {
     size: "md",

package/ui.form-input/UInput.vue

@@ -91,7 +91,7 @@ const VALIDATION_RULES_REG_EX = {
 
 const slots = useSlots();
 
-const wrapperRef = useTemplateRef<HTMLLabelElement>("wrapper");
+const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const inputRef = useTemplateRef<HTMLInputElement>("input");
 const leftSlotWrapperRef = useTemplateRef<HTMLSpanElement>("leftSlotWrapper");
 const labelComponentRef = useTemplateRef<InstanceType<typeof ULabel>>("labelComponent");
@@ -176,6 +176,10 @@ function onKeydown(event: KeyboardEvent) {
   emit("keydown", event);
 }
 
+function onSlotClick() {
+  inputRef.value?.focus();
+}
+
 /**
  * This trick prevents default browser autocomplete behavior.
  * @param toggleState { boolean }
@@ -286,11 +290,12 @@ 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'], { iconName: leftIcon }) || leftIcon"
         v-bind="leftSlotAttrs"
         ref="leftSlotWrapper"
+        @click="onSlotClick"
       >
         <!--
           @slot Use it to add something before the text.
@@ -328,6 +333,7 @@ const {
       <span
         v-if="hasSlotContent($slots['right'], { iconName: rightIcon }) || rightIcon"
         v-bind="rightSlotAttrs"
+        @click="onSlotClick"
       >
         <!--
           @slot Use it to add something after the text.
@@ -337,6 +343,6 @@ const {
           <UIcon v-if="rightIcon" color="neutral" :name="rightIcon" v-bind="rightIconAttrs" />
         </slot>
       </span>
-    </label>
+    </div>
   </ULabel>
 </template>

package/ui.form-input-counter/UInputCounter.vue

@@ -3,6 +3,7 @@ import { ref, computed, useTemplateRef, watch } from "vue";
 
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
+import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UButton from "../ui.button/UButton.vue";
@@ -41,6 +42,12 @@ const emit = defineEmits([
   "blur",
 ]);
 
+const { localeMessages } = useComponentLocaleMessages<typeof defaultConfig.i18n>(
+  COMPONENT_NAME,
+  defaultConfig.i18n,
+  props?.config?.i18n,
+);
+
 const inputComponentRef = useTemplateRef<InstanceType<typeof UInput>>("inputComponent");
 
 const addIntervalId = ref<number | null>(null);
@@ -181,6 +188,7 @@ const {
       :size="size"
       variant="outlined"
       :disabled="isSubtractButtonDisabled || disabled"
+      :aria-label="localeMessages.subtract"
       v-bind="subtractButtonAttrs"
       :data-test="getDataTest('subtract')"
       @click.prevent
@@ -221,6 +229,7 @@ const {
       square
       variant="outlined"
       :disabled="isAddButtonDisabled || disabled"
+      :aria-label="localeMessages.add"
       v-bind="addButtonAttrs"
       :data-test="getDataTest('add')"
       @click.prevent

package/ui.form-input-counter/config.ts

@@ -31,6 +31,11 @@ export default /*tw*/ {
   subtractButton: "{>actionButton}",
   addIcon: "{UIcon}",
   subtractIcon: "{UIcon}",
+  /* These are used for a11y. */
+  i18n: {
+    add: "Add",
+    subtract: "Subtract",
+  },
   defaults: {
     size: "md",
     decimalSeparator: ",",

package/ui.form-input-password/UInputPassword.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, useId } from "vue";
+import { ref, computed, useId, useTemplateRef, nextTick } from "vue";
 
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
@@ -42,6 +42,7 @@ const emit = defineEmits([
 
 const elementId = props.id || useId();
 
+const inputRef = useTemplateRef<InstanceType<typeof UInput>>("input");
 const isShownPassword = ref(false);
 
 const localValue = computed({
@@ -59,8 +60,12 @@ const passwordIcon = computed(() => {
     : config.value.defaults.passwordHiddenIcon || "";
 });
 
-function onClickShowPassword() {
+async function onClickShowPassword() {
   isShownPassword.value = !isShownPassword.value;
+
+  await nextTick();
+
+  inputRef.value?.inputRef?.focus();
 }
 
 function onFocus(event: FocusEvent) {
@@ -86,6 +91,7 @@ const { getDataTest, config, passwordInputAttrs, passwordIconAttrs, passwordIcon
 <template>
   <UInput
     :id="elementId"
+    ref="input"
     v-model="localValue"
     :type="inputType"
     :label="label"
@@ -120,29 +126,22 @@ const { getDataTest, config, passwordInputAttrs, passwordIconAttrs, passwordIcon
     </template>
 
     <template #right>
-      <label v-bind="passwordIconWrapperAttrs" :for="elementId">
+      <div v-bind="passwordIconWrapperAttrs" @click="onClickShowPassword">
         <!--
           @slot Use it to add something instead of the password icon.
           @binding {string} icon-name
           @binding {boolean} visible
-          @binding {function} toggle
         -->
-        <slot
-          name="right"
-          :icon-name="passwordIcon"
-          :visible="isShownPassword"
-          :toggle="onClickShowPassword"
-        >
+        <slot name="right" :icon-name="passwordIcon" :visible="isShownPassword">
           <UIcon
             :name="passwordIcon"
             color="neutral"
             interactive
             v-bind="passwordIconAttrs"
             :data-test="getDataTest('password-icon')"
-            @click="onClickShowPassword"
           />
         </slot>
-      </label>
+      </div>
     </template>
   </UInput>
 </template>

package/ui.form-input-password/tests/UInputPassword.test.ts

@@ -190,14 +190,14 @@ describe("UInputPassword.vue", () => {
       expect(input.attributes("type")).toBe("password");
       expect(passwordIcon.props("name")).toBe("visibility_off-fill");
 
-      await flushPromises();
       await passwordIcon.trigger("click");
+      await flushPromises();
 
       expect(input.attributes("type")).toBe("text");
       expect(passwordIcon.props("name")).toBe("visibility-fill");
 
-      await flushPromises();
       await passwordIcon.trigger("click");
+      await flushPromises();
 
       expect(input.attributes("type")).toBe("password");
       expect(passwordIcon.props("name")).toBe("visibility_off-fill");

package/ui.form-label/ULabel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useTemplateRef, useSlots } from "vue";
+import { computed, useTemplateRef, useSlots, useId } from "vue";
 
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
@@ -26,6 +26,8 @@ const emit = defineEmits([
 
 const slots = useSlots();
 
+const elementId = props.id || useId();
+
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const labelRef = useTemplateRef<HTMLLabelElement>("label");
 
@@ -102,6 +104,7 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
       <component
         :is="tag"
         v-if="label || hasSlotContent(slots['label'], { label })"
+        :id="elementId"
         ref="label"
         :for="props.for"
         v-bind="labelAttrs"
@@ -140,6 +143,7 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
     <component
       :is="tag"
       v-if="label || hasSlotContent(slots['label'], { label })"
+      :id="elementId"
       v-bind="labelAttrs"
       ref="label"
       :for="props.for"

package/ui.form-label/types.ts

@@ -15,6 +15,11 @@ export interface Props {
    */
   for?: string;
 
+  /**
+   * Component id (used for ARIA attributes).
+   */
+  id?: string;
+
   /**
    * Label description.
    */

package/ui.form-listbox/UListbox.vue

@@ -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-select/USelect.vue

@@ -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,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useId, useTemplateRef } from "vue";
+import { computed, useId, useSlots, useTemplateRef } from "vue";
 
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
@@ -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

@@ -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.navigation-pagination/UPagination.vue

@@ -4,6 +4,7 @@ import { range } from "lodash-es";
 
 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.text-alert/UAlert.vue

@@ -4,6 +4,7 @@ import { onMounted, ref, computed, useTemplateRef } from "vue";
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
+import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UButton from "../ui.button/UButton.vue";
@@ -27,6 +28,12 @@ const emit = defineEmits([
   "hide",
 ]);
 
+const { localeMessages } = useComponentLocaleMessages<typeof defaultConfig.i18n>(
+  COMPONENT_NAME,
+  defaultConfig.i18n,
+  props?.config?.i18n,
+);
+
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 
 const isShownAlert = ref(true);
@@ -126,6 +133,7 @@ const {
           size="xs"
           :color="closeButtonColor"
           variant="ghost"
+          :aria-label="localeMessages.closeAlert"
           v-bind="closeButtonAttrs"
           :data-test="getDataTest('button')"
           @click="onClickClose"

package/ui.text-alert/config.ts

@@ -41,6 +41,10 @@ export default /*tw*/ {
   },
   closeIcon: "{>icon}",
   alertIcon: "{>icon}",
+  /* These are used for a11y. */
+  i18n: {
+    closeAlert: "Close alert",
+  },
   defaults: {
     variant: "subtle",
     color: "primary",