@imaginario27/air-ui-ds 1.13.7 → 1.13.8

package/components/buttons/options/OptionButtonGroup.vue

@@ -1,7 +1,8 @@
 <template>
     <div
+        :id="id"
         role="group"
-        aria-label="Options"
+        :aria-label="ariaLabel || 'Options'"
         :class="[
             'flex',
             'flex-wrap gap-2',
@@ -28,6 +29,8 @@
 
 <script setup lang="ts">
 const props = defineProps({
+    id: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     modelValue: {
         type: [String, Number, Array] as PropType<string | number | string[]>,
         default: 'button-1',

package/components/buttons/toggle/ToggleButtonGroup.vue

@@ -1,7 +1,8 @@
 <template>
     <div
+        :id="id"
         role="group"
-        aria-label="Toggle options"
+        :aria-label="ariaLabel || 'Toggle options'"
         :class="[
             'flex',
             groupStyle === ToggleButtonGroupStyle.GROUPED ? 'border border-border-default' : 'flex-wrap gap-3',
@@ -51,6 +52,8 @@
 <script setup lang="ts">
 // Props
 defineProps({
+    id: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     modelValue: {
         type: String as PropType<string>,
         default: 'button-1',

package/components/dropdowns/DropdownSelect.vue

@@ -17,10 +17,11 @@
             <template #activator="{ isOpen }">
                 <!-- Select Box -->
                 <div
+                    :id="id"
                     role="combobox"
                     :aria-expanded="isOpen"
                     aria-haspopup="listbox"
-                    :aria-label="placeholder"
+                    :aria-label="ariaLabel || placeholder"
                     :tabindex="disabled ? -1 : 0"
                     :class="[
                         'select-box',
@@ -221,6 +222,7 @@ import missingImagePlaceholder from '@/assets/images/placeholders/missing-image-
 // Props
 const props = defineProps({
     id: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     options: {
         type: Array as PropType<SelectOption[]>,
         default: () => [

package/components/forms/Checkbox.vue

@@ -5,6 +5,7 @@
             type="checkbox"
             :checked="modelValue"
             class="sr-only"
+            :aria-label="ariaLabel || id"
             :disabled="disabled"
             @change="handleNativeChange"
             @keydown.space.prevent="toggleCheckbox"
@@ -13,7 +14,7 @@
         <div
             role="checkbox"
             :aria-checked="modelValue"
-            :aria-label="id"
+            :aria-label="ariaLabel || id"
             :class="[
                 'flex items-center justify-center',
                 controlFieldSizeClass,
@@ -43,6 +44,7 @@ const props = defineProps({
         type: String as PropType<string>,
         required: true,
     },
+    ariaLabel: String as PropType<string>,
     modelValue: {
         type: Boolean as PropType<boolean>,
         default: false,

package/components/forms/fields/ButtonField.vue

@@ -13,6 +13,7 @@
             {{ label }}
         </label>
         <ActionButton 
+            :aria-label="!label ? ariaLabel : undefined"
             :text
             :size
             :icon
@@ -40,6 +41,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     actionType: {
         type: String as PropType<ButtonActionType>,
         default: ButtonActionType.ACTION,

package/components/forms/fields/CheckboxField.vue

@@ -21,7 +21,7 @@
         >
             <!-- Label (inverted)-->
             <label 
-                v-if="inverse"
+                v-if="inverse && label"
                 :for="id" 
                 :class="[
                     disabled && 'text-text-neutral-disabled',
@@ -32,6 +32,7 @@
 
             <Checkbox
                 :id="id"
+                :ariaLabel="!label ? (ariaLabel || legend) : undefined"
                 :modelValue="modelValue"
                 :disabled="disabled"
                 :size="size"
@@ -40,7 +41,7 @@
             
             <!-- Label (natural position) -->
             <label 
-                v-if="!inverse"
+                v-if="!inverse && label"
                 :for="id" 
                 :class="[
                     disabled && 'text-text-neutral-disabled',
@@ -75,6 +76,7 @@ const props = defineProps({
         type: String as PropType<string>, 
         default: 'Text',
     },
+    ariaLabel: String as PropType<string>,
     legend: String as PropType<string>,
     helpText: String as PropType<string>,
     modelValue: { 

package/components/forms/fields/DataField.vue

@@ -37,6 +37,7 @@
                         v-if="hasCopyToClipboardButton"
                         icon="mdi:content-copy"
                         :size="ButtonSize.XS"
+                        :ariaLabel="copyButtonAriaLabel"
                         @click="handleCopyToClipboard"
                     />
                 </div>
@@ -76,6 +77,7 @@ const props = defineProps({
         required: true, 
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     text: [String, Number] as PropType<string | number>,
     emptyText: {
         type: String as PropType<string>,
@@ -101,6 +103,18 @@ const isEmpty = computed(() => {
     return props.text === '' || props.text === null || props.text === undefined || props.text === 0
 })
 
+const copyButtonAriaLabel = computed(() => {
+    if (props.ariaLabel) {
+        return props.ariaLabel
+    }
+
+    if (props.label) {
+        return `Copy ${props.label}`
+    }
+
+    return 'Copy value'
+})
+
 // Toast
 const { $toast } = useNuxtApp()
 

package/components/forms/fields/FileUploadField.vue

@@ -25,7 +25,7 @@
             >
                 <img
                     :src="previewImageUrl"
-                    :alt="label || 'Preview'"
+                    :alt="label || ariaLabel || 'Preview'"
                     class="w-full h-full object-cover rounded-md"
                     @error="handlePreviewError"
                 >
@@ -43,6 +43,7 @@
                     v-model="selectedFiles"
                     v-model:total-progress="localTotalProgress"
                     :title="computedTitleText"
+                    :aria-label="!label ? ariaLabel : undefined"
                     :description="computedDescriptionText"
                     :singleFileTitleText
                     :icon
@@ -124,6 +125,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     title: {
         type: String as PropType<string>,
         default: 'Drag and drop files here',

package/components/forms/fields/InputField.vue

@@ -52,6 +52,7 @@
             <input
                 :id
                 :type="props.type === 'password' ? passwordInputType : props.type"
+                :aria-label="!label ? ariaLabel : undefined"
                 :placeholder
                 :value="modelValue"
                 :maxlength="maxLength"
@@ -154,6 +155,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     type: {
         type: String as PropType<AllowedInputType>,
         default: 'text',

package/components/forms/fields/OptionButtonsGroupField.vue

@@ -21,6 +21,8 @@
         </label>
 
         <OptionButtonGroup 
+            :id
+            :ariaLabel="!label ? ariaLabel : label"
             :buttons
             :modelValue
             :disabled
@@ -55,6 +57,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     helpText: String as PropType<string>,
     buttons: Array as PropType<OptionButton[]>,
     modelValue: {

package/components/forms/fields/PinField.vue

@@ -27,6 +27,7 @@
                 :key="index"
                 :ref="el => setInputRef(el, index)"
                 type="text"
+                :aria-label="getInputAriaLabel(index)"
                 :inputmode="type === 'number' ? 'numeric' : 'text'"
                 maxlength="1"
                 :value="displayValue(value)"
@@ -93,6 +94,7 @@ const props = defineProps({
         validator: (value: InputSize) => Object.values(InputSize).includes(value),
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     placeholder: String as PropType<string>,
     helpText: String as PropType<string>,
     mask: {
@@ -280,6 +282,11 @@ const displayValue = (value: string) => {
     return value
 }
 
+const getInputAriaLabel = (index: number) => {
+    const baseLabel = props.label || props.ariaLabel || 'PIN code'
+    return `${baseLabel} ${index + 1}`
+}
+
 const setInputRef = (el: Element | ComponentPublicInstance | null, index: number) => {
     if (!el) return
     inputs.value[index] = el as HTMLInputElement

package/components/forms/fields/RepeaterField.vue

@@ -21,6 +21,7 @@
                     :styleType="ButtonStyleType.NEUTRAL_OUTLINED"
                     icon="mdi:plus-circle-outline"
                     :size="ButtonSize.SM"
+                    :ariaLabel="addItemAriaLabel"
                     @click="addItem"
                 />
 
@@ -30,6 +31,7 @@
                     :styleType="ButtonStyleType.DELETE_SOFT"
                     icon="mdi:minus-circle-outline"
                     :size="ButtonSize.SM"
+                    :ariaLabel="removeItemAriaLabel"
                     @click="removeItem(index)"
                 />
             </div>
@@ -47,6 +49,14 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    addItemAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Add item',
+    },
+    removeItemAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Remove item',
+    },
 })
 
 const emit = defineEmits(['update:modelValue'])

package/components/forms/fields/RulesField.vue

@@ -28,6 +28,7 @@
             >
                 <SelectField
                     :id="`${id}-item-${index}`"
+                    :ariaLabel="`${itemFieldAriaLabel} ${index + 1}`"
                     :modelValue="rule.item"
                     :options="itemOptions"
                     :placeholder="itemPlaceholder"
@@ -37,6 +38,7 @@
 
                 <SelectField
                     :id="`${id}-operator-${index}`"
+                    :ariaLabel="`${operatorFieldAriaLabel} ${index + 1}`"
                     :modelValue="rule.operator"
                     :options="getFilteredOperators(getRuleInputType(rule))"
                     :placeholder="operatorPlaceholder"
@@ -46,6 +48,7 @@
 
                 <InputField
                     :id="`${id}-value-${index}`"
+                    :ariaLabel="`${valueFieldAriaLabel} ${index + 1}`"
                     :modelValue="rule.value"
                     :type="getRuleInputType(rule)"
                     :placeholder="valuePlaceholder"
@@ -57,6 +60,7 @@
                 <ActionIconButton
                     :id="`${id}-action-${index}`"
                     :icon="getRowActionIcon(index)"
+                    :ariaLabel="index === rules.length - 1 ? addRuleAriaLabel : removeRuleAriaLabel"
                     :styleType="getActionButtonStyle(index)"
                     :size="ButtonSize.MD"
                     :disabled="isActionDisabled(index)"
@@ -100,6 +104,26 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    itemFieldAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Rule item',
+    },
+    operatorFieldAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Rule operator',
+    },
+    valueFieldAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Rule value',
+    },
+    addRuleAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Add rule',
+    },
+    removeRuleAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Remove rule',
+    },
     helpText: String as PropType<string>,
     itemOptions: {
         type: Array as PropType<SelectOption[]>,

package/components/forms/fields/SearchField.vue

@@ -45,6 +45,7 @@
             <!-- Input -->
             <input 
                 :id 
+                :aria-label="!label ? ariaLabel : undefined"
                 :placeholder 
                 :value="modelValue" 
                 :maxlength="maxLength"
@@ -93,6 +94,7 @@ const props = defineProps({
         required: true, 
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     placeholder: { 
         type: String as PropType<string>, 
         default: 'Search', 

package/components/forms/fields/SelectField.vue

@@ -30,6 +30,7 @@
         <DropdownSelect 
             :id
             :key="computedPlaceholder"
+            :ariaLabel="!label ? ariaLabel : undefined"
             :modelValue 
             :options 
             :type 
@@ -71,6 +72,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     helpText: String as PropType<string>,
     required: { 
         type: Boolean as PropType<boolean>, 

package/components/forms/fields/SliderField.vue

@@ -73,6 +73,7 @@
 
         <Slider
             :modelValue="modelValue"
+            :ariaLabel="!label ? ariaLabel : label"
             :type="type"
             :color="color"
             :size="size"
@@ -155,6 +156,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     helpText: String as PropType<string>,
     required: {
         type: Boolean as PropType<boolean>,

package/components/forms/fields/SlotField.vue

@@ -21,6 +21,7 @@
         >
             <slot 
                 :id
+                :ariaLabel
                 :error
                 :hasError 
                 :helpText
@@ -50,6 +51,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     helpText: String as PropType<string>,
     error: {
         type: String as PropType<string>,

package/components/forms/fields/SwitchField.vue

@@ -60,6 +60,7 @@
                 type="checkbox"
                 :checked="modelValue"
                 class="sr-only"
+                :aria-label="ariaLabel || label || legend || 'Toggle'"
                 :disabled="disabled"
                 @change="handleChange"
                 @keydown.space.prevent="toggleCheckbox"
@@ -69,7 +70,7 @@
             <div
                 role="switch"
                 :aria-checked="modelValue"
-                :aria-label="label || legend || 'Toggle'"
+                :aria-label="ariaLabel || label || legend || 'Toggle'"
                 :class="[
                     'relative flex items-center',
                     controlFieldSizeClass,
@@ -114,6 +115,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     legend: String as PropType<string>,
     helpText: String as PropType<string>,
     

package/components/forms/fields/TagsField.vue

@@ -64,6 +64,7 @@
                     :id
                     ref="inputRef"
                     type="text"
+                    :aria-label="!label ? ariaLabel : undefined"
                     :value="inputValue"
                     :placeholder="computedPlaceholder"
                     :autofocus
@@ -116,6 +117,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     placeholder: {
         type: String as PropType<string>,
         default: 'Enter values separated by commas',

package/components/forms/fields/TextareaField.vue

@@ -36,6 +36,7 @@
             <textarea 
                 :id
                 ref="textareaRef"
+                :aria-label="!label ? ariaLabel : undefined"
                 :placeholder
                 :value="modelValue"
                 :maxlength="maxLength"
@@ -104,6 +105,7 @@ const props = defineProps({
         required: true, 
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     placeholder: { 
         type: String as PropType<string>, 
         default: 'Placeholder', 

package/components/forms/fields/ToggleButtonsGroupField.vue

@@ -20,6 +20,8 @@
         </label>
 
         <ToggleButtonGroup 
+            :id
+            :ariaLabel="!label ? ariaLabel : label"
             :buttons
             :modelValue
             :groupStyle
@@ -49,6 +51,7 @@ defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     helpText: String as PropType<string>,
     buttons: Array as PropType<ToggleButton[] | ToggleIconButton[]>,
     onlyIcon: {

package/components/forms/fields/radio/RadioButtonField.vue

@@ -76,7 +76,8 @@
             :name="name"
             :value="value"
             :checked="modelValue === value" 
-            class="hidden" 
+            class="sr-only"
+            :aria-label="!label ? ariaLabel : undefined"
             :disabled
             @change="selectRadio"
         >
@@ -120,6 +121,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     helpText: String as PropType<string>,
     value: { // Value of the radio button
         type: [String, Number, Boolean] as PropType<string | number | boolean>,

package/components/forms/fields/radio/RadioField.vue

@@ -10,7 +10,7 @@
         >
             <!-- Label (inverted position) -->
             <label 
-                v-if="inverse"
+                v-if="inverse && label"
                 :for="id" 
                 :class="[ 
                     disabled && 'text-text-neutral-disabled',
@@ -26,7 +26,8 @@
                 :name="name"
                 :value="value"
                 :checked="modelValue === value" 
-                class="hidden" 
+                class="sr-only"
+                :aria-label="!label ? ariaLabel : undefined"
                 :disabled="disabled"
                 @change="selectRadio"
             >
@@ -58,7 +59,7 @@
             
             <!-- Label (natural position) -->
             <label 
-                v-if="!inverse"
+                v-if="!inverse && label"
                 :for="id" 
                 :class="[ 
                     disabled ? 'text-text-neutral-disabled' : undefined,
@@ -97,10 +98,8 @@ const props = defineProps({
         type: [String, Number, Boolean] as PropType<string | number | boolean>,
         required: true,
     },
-    label: { 
-        type: String as PropType<string>, 
-        default: 'Text',
-    },
+    label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     helpText: String as PropType<string>,
     required: { 
         type: Boolean as PropType<boolean>, 

package/components/forms/fields/radio/RadioGroupField.vue

@@ -33,6 +33,7 @@
                     :name
                     :value="option.value"
                     :label="option.label"
+                    :ariaLabel="option.ariaLabel"
                     :required
                     :disabled="option.disabled ? option.disabled : disabled"
                     :helpText="option.helpText"
@@ -49,6 +50,7 @@
                     :name
                     :value="option.value"
                     :label="option.label"
+                    :ariaLabel="option.ariaLabel"
                     :required
                     :helpText="option.helpText"
                     :disabled="option.disabled ? option.disabled : disabled"
@@ -83,7 +85,7 @@ const props = defineProps({
         type: Array as PropType<RadioOption[]>,
         required: true,
         validator: (value: RadioOption[]) =>
-            value.every((option) => option.id !== undefined && option.value !== undefined && option.label !== undefined),
+            value.every((option) => option.id !== undefined && option.value !== undefined && (option.label !== undefined || option.ariaLabel !== undefined)),
     },
     modelValue: {
         type: [String, Number, Boolean, null] as PropType<string | number | boolean | null>,

package/components/sliders/Slider.vue

@@ -49,7 +49,7 @@
                 ]"
                 :style="[thumbStyle(index, value), radiusStyle]"
                 :disabled
-                :aria-label="isRange ? `Slider thumb ${index + 1}` : 'Slider thumb'"
+                :aria-label="getThumbAriaLabel(index)"
                 :aria-orientation="orientation"
                 :data-testid="`slider-thumb-${index}`"
                 @pointerdown.stop.prevent="startThumbDrag(index, $event)"
@@ -75,6 +75,7 @@
 <script setup lang="ts">
 // Props
 const props = defineProps({
+    ariaLabel: String as PropType<string>,
     modelValue: {
         type: [Number, Array] as PropType<number | [number, number]>,
         default: 0,
@@ -141,6 +142,16 @@ const isRange = computed(() => {
     return props.type === SliderType.RANGE || props.multiple || Array.isArray(props.modelValue)
 })
 
+const getThumbAriaLabel = (index: number) => {
+    const baseLabel = props.ariaLabel || 'Slider'
+
+    if (!isRange.value) {
+        return `${baseLabel} thumb`
+    }
+
+    return `${baseLabel} thumb ${index + 1}`
+}
+
 const safeMax = computed(() => {
     if (props.max <= props.min) {
         return props.min + 1

package/models/types/radio.ts

@@ -1,7 +1,8 @@
 export interface RadioOption {
     id: string | number
     value: string | number | boolean
-    label: string
+    label?: string
+    ariaLabel?: string
     helpText?: string
     disabled?: boolean
     type?: ColorAccent.INFO | ColorAccent.SUCCESS | ColorAccent.DANGER | ColorAccent.PRIMARY_BRAND | ColorAccent.SECONDARY_BRAND

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imaginario27/air-ui-ds",
-    "version": "1.13.7",
+    "version": "1.13.8",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",