i18n implemented

app/components/ui/breadcrumb/Breadcrumb.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 
 <template>
   <nav
-    aria-label="breadcrumb"
+    :aria-label="$t('misc.breadcrumb')"
     data-slot="breadcrumb"
     :class="cn('', props.class)"
   >

app/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -18,6 +18,6 @@ const props = defineProps<{
     <slot>
       <Icon name="ph:dots-three-fill" />
     </slot>
-    <span class="sr-only">More</span>
+    <span class="sr-only">{{ $t('misc.more') }}</span>
   </span>
 </template>

app/components/ui/color-picker/ColorPicker.vue

@@ -430,7 +430,7 @@ function updateAlpha(event: MouseEvent | TouchEvent) {
               type="button"
               class="ring-offset-background h-5 w-5 shrink-0 cursor-pointer rounded ring-2 ring-transparent ring-offset-1 transition-all duration-100 hover:ring-current"
               :style="{ backgroundColor: color }"
-              :aria-label="`Set color to ${color}`"
+              :aria-label="$t('misc.setColor', { color })"
               @click="setColorFromHex(color)"
               @keydown.enter="setColorFromHex(color)"
             />

app/components/ui/dialog/DialogContent.vue

@@ -44,7 +44,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       >
         <Button variant="ghost" class="absolute top-4 right-4 bg-secondary" size="icon-sm">
           <Icon name="ph:x-fill" />
-          <span class="sr-only">Close</span>
+          <span class="sr-only">{{ $t('common.close') }}</span>
         </Button>
       </DialogClose>
     </DialogContent>

app/components/ui/dialog/DialogScrollContent.vue

@@ -51,7 +51,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
           class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
         >
           <Icon name="ph:x-fill" class="w-4 h-4" />
-          <span class="sr-only">Close</span>
+          <span class="sr-only">{{ $t('common.close') }}</span>
         </DialogClose>
       </DialogContent>
     </DialogOverlay>

app/components/ui/pagination/PaginationEllipsis.vue

@@ -19,7 +19,7 @@ const delegatedProps = reactiveOmit(props, 'class')
   >
     <slot>
       <Icon name="ph:dots-three-fill" />
-      <span class="sr-only">Weitere Seiten</span>
+      <span class="sr-only">{{ $t('pagination.more') }}</span>
     </slot>
   </PaginationEllipsis>
 </template>

app/components/ui/pagination/PaginationFirst.vue

@@ -22,13 +22,13 @@ const forwarded = useForwardProps(delegatedProps)
 <template>
   <PaginationFirst
     data-slot="pagination-first"
-    aria-label="Erste Seite"
+    :aria-label="$t('pagination.first')"
     :class="cn(buttonVariants({ variant: 'ghost', size }), '', props.class)"
     v-bind="forwarded"
   >
     <slot>
       <Icon name="ph:caret-double-left-fill" data-icon="inline-start" />
-      <span class="hidden sm:block">Erste</span>
+      <span class="hidden sm:block">{{ $t('pagination.firstShort') }}</span>
     </slot>
   </PaginationFirst>
 </template>

app/components/ui/pagination/PaginationItem.vue

@@ -21,7 +21,7 @@ const delegatedProps = reactiveOmit(props, 'class', 'size', 'isActive')
 <template>
   <PaginationListItem
     data-slot="pagination-item"
-    :aria-label="`Seite ${value}`"
+    :aria-label="$t('pagination.page', { page: value })"
     v-bind="delegatedProps"
     :class="cn(
       buttonVariants({

app/components/ui/pagination/PaginationLast.vue

@@ -22,12 +22,12 @@ const forwarded = useForwardProps(delegatedProps)
 <template>
   <PaginationLast
     data-slot="pagination-last"
-    aria-label="Letzte Seite"
+    :aria-label="$t('pagination.last')"
     :class="cn(buttonVariants({ variant: 'ghost', size }), '', props.class)"
     v-bind="forwarded"
   >
     <slot>
-      <span class="hidden sm:block">Letzte</span>
+      <span class="hidden sm:block">{{ $t('pagination.lastShort') }}</span>
       <Icon name="ph:caret-double-right-fill" data-icon="inline-end" />
     </slot>
   </PaginationLast>

app/components/ui/pagination/PaginationNext.vue

@@ -22,12 +22,12 @@ const forwarded = useForwardProps(delegatedProps)
 <template>
   <PaginationNext
     data-slot="pagination-next"
-    aria-label="Nächste Seite"
+    :aria-label="$t('pagination.next')"
     :class="cn(buttonVariants({ variant: 'ghost', size }), 'pr-1.5!', props.class)"
     v-bind="forwarded"
   >
     <slot>
-      <span class="hidden sm:block">Weiter</span>
+      <span class="hidden sm:block">{{ $t('common.next') }}</span>
       <Icon name="ph:caret-right-fill" data-icon="inline-end" class="cn-rtl-flip" />
     </slot>
   </PaginationNext>

app/components/ui/pagination/PaginationPrevious.vue

@@ -22,13 +22,13 @@ const forwarded = useForwardProps(delegatedProps)
 <template>
   <PaginationPrev
     data-slot="pagination-previous"
-    aria-label="Vorherige Seite"
+    :aria-label="$t('pagination.prev')"
     :class="cn(buttonVariants({ variant: 'ghost', size }), 'pl-1.5!', props.class)"
     v-bind="forwarded"
   >
     <slot>
       <Icon name="ph:caret-left-fill" data-icon="inline-start" class="cn-rtl-flip" />
-      <span class="hidden sm:block">Zurück</span>
+      <span class="hidden sm:block">{{ $t('common.previous') }}</span>
     </slot>
   </PaginationPrev>
 </template>

app/components/ui/sheet/SheetContent.vue

@@ -52,7 +52,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       >
         <Button variant="ghost" class="absolute top-4 right-4 bg-secondary" size="icon-sm">
           <Icon name="ph:x-fill" />
-          <span class="sr-only">Close</span>
+          <span class="sr-only">{{ $t('common.close') }}</span>
         </Button>
       </DialogClose>
     </DialogContent>

app/components/ui/sidebar/Sidebar.vue

@@ -42,8 +42,8 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
       }"
     >
       <SheetHeader class="sr-only">
-        <SheetTitle>Sidebar</SheetTitle>
-        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+        <SheetTitle>{{ $t('misc.sidebar') }}</SheetTitle>
+        <SheetDescription>{{ $t('misc.sidebarDesc') }}</SheetDescription>
       </SheetHeader>
       <div class="flex h-full w-full flex-col">
         <slot />

app/components/ui/sidebar/SidebarRail.vue

@@ -14,9 +14,9 @@ const { toggleSidebar } = useSidebar()
   <button
     data-sidebar="rail"
     data-slot="sidebar-rail"
-    aria-label="Toggle Sidebar"
+    :aria-label="$t('misc.toggleSidebar')"
     :tabindex="-1"
-    title="Toggle Sidebar"
+    :title="$t('misc.toggleSidebar')"
     :class="cn(
       'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-0.5 sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',
       'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',

app/components/ui/sidebar/SidebarTrigger.vue

@@ -22,6 +22,6 @@ const { toggleSidebar } = useSidebar()
     @click="toggleSidebar"
   >
     <Icon name="ph:sidebar-fill" class="cn-rtl-flip" />
-    <span class="sr-only">Toggle Sidebar</span>
+    <span class="sr-only">{{ $t('misc.toggleSidebar') }}</span>
   </Button>
 </template>