@imaginario27/air-ui-ds 1.13.9 → 1.13.11

package/CHANGELOG.md

@@ -5,6 +5,29 @@ All notable changes to this package are documented in this file.
 Historical releases were reconstructed from git history (GitHub repository) and npm publish dates.
 Future releases will include detailed entries generated with Changesets.
 
+## 1.13.10 - 2026-06-11
+
+Release type: patch.
+Commits found in range: 1.
+
+### Added
+
+1. add customizable aria-label props for i18n support ([faed17c](https://github.com/imaginario27/air-ui/commit/faed17c29dff732de56d798e7914215cf514fe6a))
+
+- Package: @imaginario27/air-ui-ds.
+
+## 1.13.9 - 2026-06-09
+
+Release type: patch.
+Commits found in range: 2.
+
+### Added
+
+1. make Heading headingTag prop required with HeadingTag type ([82248a2](https://github.com/imaginario27/air-ui/commit/82248a2043ca30916adac5154e8c3743d8a2fe2b))
+2. improve accessibility across ds components and docs (#115) ([f5b5278](https://github.com/imaginario27/air-ui/commit/f5b5278a7bba94fec6fbb4345baa45576eb6f867) (PR [#115](https://github.com/imaginario27/air-ui/pull/115)))
+
+- Package: @imaginario27/air-ui-ds.
+
 ## 1.13.8 - 2026-06-03
 
 Release type: patch.

package/components/drawers/Drawer.vue

@@ -72,6 +72,7 @@
                         v-if="hasCloseButton"
                         :icon="buttonCloseIcon"
                         :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
+                        :ariaLabel="closeAriaLabel"
                         @click="close"
                     />
                 </div>
@@ -142,6 +143,10 @@ const props = defineProps({
     overlayClass: String as PropType<string>,
     headerClass: String as PropType<string>,
     titleClass: String as PropType<string>,
+    closeAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Close',
+    },
 })
 
 // Emits

package/components/dropdowns/DropdownSelect.vue

@@ -111,7 +111,7 @@
                             :size="ButtonSize.SM"
                             :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE"
                             icon="mdi:close-circle"
-                            ariaLabel="Clear selection"
+                            :ariaLabel="clearSelectionAriaLabel"
                             @click="selected = []"
                         />
 
@@ -305,6 +305,10 @@ const props = defineProps({
         type: String as PropType<string>,
         default: 'Loading options...',
     },
+    clearSelectionAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Clear selection',
+    },
 })
 
 // Emits

package/components/dropzone/Dropzone.vue

@@ -176,6 +176,7 @@
                                     :styleType="retryButtonStyleType"
                                     :class="retryButtonClass"
                                     :iconClass="normalizedRetryIconClass"
+                                    :ariaLabel="retryAriaLabel"
                                     @click.stop="retryUpload(file)"
                                 />
 
@@ -186,6 +187,7 @@
                                     :styleType="removeButtonStyleType"
                                     :class="removeButtonClass"
                                     :iconClass="normalizedRemoveIconClass"
+                                    :ariaLabel="removeAriaLabel"
                                     @click.stop="removeFile(file)"
                                 />
                             </div>
@@ -447,6 +449,14 @@ const props = defineProps({
     fileItemClass: String as PropType<string>,
     fileNameClass: String as PropType<string>,
     fileMetaClass: String as PropType<string>,
+    retryAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Retry upload',
+    },
+    removeAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Remove file',
+    },
 })
 
 const emit = defineEmits([

package/components/forms/fields/FileUploadField.vue

@@ -94,6 +94,8 @@
                     :fileItemClass
                     :fileNameClass
                     :fileMetaClass
+                    :retryAriaLabel
+                    :removeAriaLabel
                     @error="handleDropzoneError"
                     @file-added="(file: File) => emit('file-added', file)"
                     @file-removed="(file: File) => emit('file-removed', file)"
@@ -313,6 +315,14 @@ const props = defineProps({
     fileItemClass: String as PropType<string>,
     fileNameClass: String as PropType<string>,
     fileMetaClass: String as PropType<string>,
+    retryAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Retry upload',
+    },
+    removeAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Remove file',
+    },
 })
 
 // Emits

package/components/forms/fields/SearchField.vue

@@ -72,7 +72,7 @@
                 :size="ButtonSize.SM"
                 :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE"
                 icon="mdi:close-circle"
-                ariaLabel="Clear search"
+                :ariaLabel="clearAriaLabel"
                 @click="clearField"
             />
         </div>
@@ -138,6 +138,10 @@ const props = defineProps({
         default: false,
     },
     inputCustomClass: String as PropType<string>,
+    clearAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Clear search',
+    },
 })
 
 // States

package/components/forms/fields/SelectField.vue

@@ -47,6 +47,7 @@
             :allowDeselect
             :isLoading="isLoadingOptions"
             :loadingText
+            :clearSelectionAriaLabel
             :selectBoxClass="computedSelectBoxClass"
             @update:modelValue="handleValueUpdate"
         />
@@ -161,6 +162,10 @@ const props = defineProps({
         default: 'Options are being loaded',
     },
     selectBoxClass: String as PropType<string>,
+    clearSelectionAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Clear selection',
+    },
 })
 
 // Emits

package/components/layouts/headers/CompactHeader.vue

@@ -36,6 +36,7 @@
                 >
                     <ActionIconButton
                         :icon="isMobileSidebarOpen ? 'mdi:menu-open' : 'mdi:menu-close'"
+                        :ariaLabel="isMobileSidebarOpen ? sidebarCloseAriaLabel : sidebarOpenAriaLabel"
                         :class="['shadow-sm', !isMobile && 'hidden']"
                         @click="toggleMobileSidebar"
                     />
@@ -43,7 +44,7 @@
 
                 <slot name="header-logo" />
 
-                <template 
+                <template
                     v-if="
                         showMobileSidebarToggle
                         && sidebarTogglePosition === SidebarTogglePosition.LOGO_RIGHT_SIDE
@@ -51,6 +52,7 @@
                 >
                     <ActionIconButton
                         :icon="isMobileSidebarOpen ? 'mdi:menu-open' : 'mdi:menu-close'"
+                        :ariaLabel="isMobileSidebarOpen ? sidebarCloseAriaLabel : sidebarOpenAriaLabel"
                         :class="['shadow-sm', !isMobile && 'hidden']"
                         @click="toggleMobileSidebar"
                     />
@@ -119,6 +121,7 @@
                         <template #activator>
                             <ActionIconButton
                                 icon="mdi:menu"
+                                :ariaLabel="mobileMenuAriaLabel"
                                 class="shadow-sm"
                             />
                         </template>
@@ -154,8 +157,9 @@
                         && sidebarTogglePosition === SidebarTogglePosition.RIGHT_SIDE
                     "
                 >
-                    <ActionIconButton 
+                    <ActionIconButton
                         :icon="isMobileSidebarOpen ? 'mdi:menu-open' : 'mdi:menu-close'"
+                        :ariaLabel="isMobileSidebarOpen ? sidebarCloseAriaLabel : sidebarOpenAriaLabel"
                         class="lg:hidden shadow-sm"
                         @click="toggleMobileSidebar"
                     />
@@ -243,6 +247,18 @@ const props = defineProps({
         default: 'min-w-[280px]'
     },
     headerClass: String as PropType<string>,
+    sidebarOpenAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Open sidebar',
+    },
+    sidebarCloseAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Close sidebar',
+    },
+    mobileMenuAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Open mobile menu',
+    },
 })
 
 // Composables

package/components/modals/DangerModalDialog.vue

@@ -1,8 +1,9 @@
 <template>
-    <ModalDialog 
+    <ModalDialog
         :modelValue
         :closeOnClickOutside
         :hasCornerCloseButton
+        :closeAriaLabel
         :cardClass
         @update:modelValue="updateModelValue"
     >
@@ -127,6 +128,10 @@ defineProps({
         type: Boolean as PropType<boolean>,
         default: true,
     },
+    closeAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Close',
+    },
 })
 
 // Emits

package/components/modals/InfoModalDialog.vue

@@ -1,8 +1,9 @@
 <template>
-    <ModalDialog 
+    <ModalDialog
         :modelValue
         :closeOnClickOutside
         :hasCornerCloseButton
+        :closeAriaLabel
         :cardClass
         @update:modelValue="updateModelValue"
     >
@@ -121,6 +122,10 @@ defineProps({
         type: Boolean as PropType<boolean>,
         default: true,
     },
+    closeAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Close',
+    },
 })
 
 // Emits

package/components/modals/ModalDialog.vue

@@ -58,7 +58,7 @@
                                 :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
                                 :size="ButtonSize.MD"
                                 icon="mdi:close"
-                                ariaLabel="Close"
+                                :ariaLabel="closeAriaLabel"
                                 class="absolute top-4 right-4 z-10"
                                 @click="closeModal"
                             />
@@ -105,6 +105,10 @@ const props = defineProps({
     },
     id: String as PropType<string>,
     ariaLabelledby: String as PropType<string>,
+    closeAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Close',
+    },
 })
 
 // Emits

package/components/modals/SuccessModalDialog.vue

@@ -1,8 +1,9 @@
 <template>
-    <ModalDialog 
-        :modelValue 
+    <ModalDialog
+        :modelValue
         :closeOnClickOutside
         :hasCornerCloseButton
+        :closeAriaLabel
         :cardClass
         @update:modelValue="updateModelValue"
     >
@@ -70,6 +71,10 @@ defineProps({
         type: Boolean as PropType<boolean>,
         default: true,
     },
+    closeAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Close',
+    },
 })
 
 // Emits

package/components/navigation/nav-sidebar/NavSidebar.vue

@@ -28,21 +28,21 @@
         >
             <div class="flex gap-2">
                 <!-- Mobile sidebar toggler -->
-                <ActionIconButton 
+                <ActionIconButton
                     v-if="showMobileSidebarClose && isMobile && !isCollapsed"
                     :icon="mobileSidebarCloseIcon"
                     class="flex"
                     :size="ButtonSize.SM"
-                    aria-label="Close sidebar"
+                    :ariaLabel="closeSidebarAriaLabel"
                     @click="toggleMobileSidebar()"
                 />
     
                 <!-- Collapse toggle button -->
-                <ActionIconButton 
+                <ActionIconButton
                     v-if="showCollapseToggle && collapseTogglePosition === Position.TOP && !isCollapsed"
                     :icon="expandedStateIcon"
                     :size="ButtonSize.SM"
-                    aria-label="Collapse sidebar"
+                    :ariaLabel="collapseSidebarAriaLabel"
                     @click="toggleSidebarState(sidebarId)"
                 />
             </div>
@@ -63,12 +63,12 @@
             }"
         >
              <!-- Collapse toggle item shown only in collapsed state -->
-            <ActionIconButton 
+            <ActionIconButton
                 v-if="showCollapseToggle && collapseTogglePosition === Position.TOP && isCollapsed"
                 :icon="collapsedStateIcon"
                 :size="ButtonSize.SM"
                 class="mb-2"
-                aria-label="Expand sidebar"
+                :ariaLabel="expandSidebarAriaLabel"
                 @click="toggleSidebarState(sidebarId)"
             />
 
@@ -151,14 +151,14 @@
         </NavSidebarMenu>
 
         <!-- Collapse toggle button at bottom -->
-        <ActionIconButton 
+        <ActionIconButton
             v-if="showCollapseToggle && collapseTogglePosition === Position.BOTTOM"
             :icon="isCollapsed ? collapsedStateIcon : expandedStateIcon"
             :size="ButtonSize.SM"
             :class="[
                 isCollapsed ? '' : 'absolute right-3 bottom-3'
             ]"
-            :aria-label="isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+            :ariaLabel="isCollapsed ? expandSidebarAriaLabel : collapseSidebarAriaLabel"
             @click="toggleSidebarState(sidebarId)"
         />
 
@@ -342,6 +342,18 @@ const props = defineProps({
         type: [String, Object] as PropType<PrefetchOnStrategy>,
         default: PrefetchOn.VISIBILITY,
     },
+    closeSidebarAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Close sidebar',
+    },
+    collapseSidebarAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Collapse sidebar',
+    },
+    expandSidebarAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Expand sidebar',
+    },
 })
 
 // States 

package/components/pagination/SimplePagination.vue

@@ -1,9 +1,10 @@
 <template>
     <nav class="flex items-center justify-center gap-2">
-        <ActionIconButton 
+        <ActionIconButton
             icon="mdi:chevron-left"
             :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
             :disabled="modelValue === 1"
+            :ariaLabel="previousPageAriaLabel"
             :class="[
                 'bg-transparent',
                 modelValue > 1 && 'hover:border border-border-default',
@@ -13,10 +14,11 @@
         <p class="text-sm">
             {{ computedResultsText }}
         </p>
-        <ActionIconButton 
+        <ActionIconButton
             icon="mdi:chevron-right"
             :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
             :disabled="modelValue === totalPages"
+            :ariaLabel="nextPageAriaLabel"
             :class="[
                 'bg-transparent',
                 modelValue < totalPages && 'hover:border border-border-default',
@@ -54,6 +56,14 @@ const props = defineProps({
         type: String as PropType<string>,
         default: 'Showing {total} result',
     },
+    previousPageAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Previous page',
+    },
+    nextPageAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Next page',
+    },
 })
 
 // Emits

package/components/tables/TableHeaderCell.vue

@@ -9,11 +9,12 @@
         <div class="w-full flex items-center gap-2">
             <slot />
 
-            <ActionIconButton 
+            <ActionIconButton
                 v-if="sorteable && scope === TableHeaderCellScope.COL"
                 :size="ButtonSize.XS"
                 :icon="sortAsc ? 'mdi:arrow-up' : 'mdi:arrow-down'"
                 :styleType="sortKey === columnKey ? ButtonStyleType.NEUTRAL_FILLED : ButtonStyleType.NEUTRAL_OUTLINED"
+                :ariaLabel="sortAriaLabel"
                 @click="onToggleSort && onToggleSort()"
             />
         </div>
@@ -52,6 +53,10 @@ const props = defineProps({
         default: false,
     },
     to: String as PropType<string>,
+    sortAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Toggle sort',
+    },
 })
 
 // Computed classes

package/package.json

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