fix(app): a11y translations

5 files changed, 11 insertions, 5 deletions

diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index 1b54739a2..83da6c699 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -1,5 +1,6 @@
 import { Dialog as Kobalte } from "@kobalte/core/dialog"
 import { ComponentProps, JSXElement, Match, ParentProps, Show, Switch } from "solid-js"
+import { useI18n } from "../context/i18n"
 import { IconButton } from "./icon-button"
 
 export interface DialogProps extends ParentProps {
@@ -13,6 +14,7 @@ export interface DialogProps extends ParentProps {
 }
 
 export function Dialog(props: DialogProps) {
+  const i18n = useI18n()
   return (
     <div data-component="dialog" data-fit={props.fit ? true : undefined} data-size={props.size || "normal"}>
       <div data-slot="dialog-container">
@@ -45,7 +47,7 @@ export function Dialog(props: DialogProps) {
                     as={IconButton}
                     icon="close"
                     variant="ghost"
-                    aria-label="Close"
+                    aria-label={i18n.t("ui.common.close")}
                   />
                 </Match>
               </Switch>
diff --git a/packages/ui/src/components/image-preview.tsx b/packages/ui/src/components/image-preview.tsx
index a09783fca..8462ce256 100644
--- a/packages/ui/src/components/image-preview.tsx
+++ b/packages/ui/src/components/image-preview.tsx
@@ -19,7 +19,7 @@ export function ImagePreview(props: ImagePreviewProps) {
               as={IconButton}
               icon="close"
               variant="ghost"
-              aria-label="Close"
+              aria-label={i18n.t("ui.common.close")}
             />
           </div>
           <div data-slot="image-preview-body">
diff --git a/packages/ui/src/components/list.tsx b/packages/ui/src/components/list.tsx
index 9686b7bee..6a7f3a029 100644
--- a/packages/ui/src/components/list.tsx
+++ b/packages/ui/src/components/list.tsx
@@ -234,7 +234,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
                 icon="circle-x"
                 variant="ghost"
                 onClick={() => setInternalFilter("")}
-                aria-label="Clear filter"
+                aria-label={i18n.t("ui.list.clearFilter")}
               />
             </Show>
           </div>
diff --git a/packages/ui/src/components/popover.tsx b/packages/ui/src/components/popover.tsx
index 65c854e1f..6db44f5f9 100644
--- a/packages/ui/src/components/popover.tsx
+++ b/packages/ui/src/components/popover.tsx
@@ -1,5 +1,6 @@
 import { Popover as Kobalte } from "@kobalte/core/popover"
 import { ComponentProps, JSXElement, ParentProps, Show, splitProps, ValidComponent } from "solid-js"
+import { useI18n } from "../context/i18n"
 import { IconButton } from "./icon-button"
 
 export interface PopoverProps<T extends ValidComponent = "div">
@@ -15,6 +16,7 @@ export interface PopoverProps<T extends ValidComponent = "div">
 }
 
 export function Popover<T extends ValidComponent = "div">(props: PopoverProps<T>) {
+  const i18n = useI18n()
   const [local, rest] = splitProps(props, [
     "trigger",
     "triggerAs",
@@ -48,7 +50,7 @@ export function Popover<T extends ValidComponent = "div">(props: PopoverProps<T>
                 as={IconButton}
                 icon="close"
                 variant="ghost"
-                aria-label="Close"
+                aria-label={i18n.t("ui.common.close")}
               />
             </div>
           </Show>
diff --git a/packages/ui/src/components/toast.tsx b/packages/ui/src/components/toast.tsx
index bac6ff159..e8062a2a8 100644
--- a/packages/ui/src/components/toast.tsx
+++ b/packages/ui/src/components/toast.tsx
@@ -3,6 +3,7 @@ import type { ToastRootProps, ToastCloseButtonProps, ToastTitleProps, ToastDescr
 import type { ComponentProps, JSX } from "solid-js"
 import { Show } from "solid-js"
 import { Portal } from "solid-js/web"
+import { useI18n } from "../context/i18n"
 import { Icon, type IconProps } from "./icon"
 import { IconButton } from "./icon-button"
 
@@ -62,13 +63,14 @@ function ToastActions(props: ComponentProps<"div">) {
 }
 
 function ToastCloseButton(props: ToastCloseButtonProps & ComponentProps<"button">) {
+  const i18n = useI18n()
   return (
     <Kobalte.CloseButton
       data-slot="toast-close-button"
       as={IconButton}
       icon="close"
       variant="ghost"
-      aria-label="Dismiss"
+      aria-label={i18n.t("ui.common.dismiss")}
       {...props}
     />
   )