fix(app): a11y translations

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>

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">

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>

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>

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}
     />
   )