first passdev/sebasjm/a11y-test

3 files changed, 13 insertions, 3 deletions

diff --git a/packages/web-util/src/forms/InputArray.tsx b/packages/web-util/src/forms/InputArray.tsx
index 7d9a1b378..a8a30b32a 100644
--- a/packages/web-util/src/forms/InputArray.tsx
+++ b/packages/web-util/src/forms/InputArray.tsx
@@ -5,6 +5,7 @@ import { FormProvider, UIFormProps } from "./FormProvider.js";
 import { LabelWithTooltipMaybeRequired } from "./InputLine.js";
 import { RenderAllFieldsByUiConfig, UIFormField } from "./forms.js";
 import { useField } from "./useField.js";
+import { useTranslationContext } from "../index.browser.js";
 
 function Option({
   label,
@@ -77,6 +78,7 @@ export function InputArray<T extends object, K extends keyof T>(
     labelField: string;
   } & UIFormProps<T, K>,
 ): VNode {
+  const { i18n } = useTranslationContext();
   const { fields, labelField, name, label, required, tooltip } = props;
   const { value, onChange, state } = useField<T, K>(name);
   const list = (value ?? []) as Array<Record<string, string | undefined>>;
@@ -175,7 +177,7 @@ export function InputArray<T extends object, K extends keyof T>(
                 }}
                 class="block rounded-md bg-red-600 px-3 py-2 text-center text-sm  text-white shadow-sm hover:bg-red-500 "
               >
-                Remove
+                <i18n.Translate>Remove</i18n.Translate>
               </button>
             )}
           </div>
diff --git a/packages/web-util/src/forms/InputSelectMultiple.tsx b/packages/web-util/src/forms/InputSelectMultiple.tsx
index a67eb23b7..d1e31c15c 100644
--- a/packages/web-util/src/forms/InputSelectMultiple.tsx
+++ b/packages/web-util/src/forms/InputSelectMultiple.tsx
@@ -4,6 +4,7 @@ import { UIFormProps } from "./FormProvider.js";
 import { ChoiceS } from "./InputChoiceStacked.js";
 import { LabelWithTooltipMaybeRequired } from "./InputLine.js";
 import { useField } from "./useField.js";
+import { useTranslationContext } from "../index.browser.js";
 
 export function InputSelectMultiple<T extends object, K extends keyof T>(
   props: {
@@ -22,6 +23,8 @@ export function InputSelectMultiple<T extends object, K extends keyof T>(
     return { ...prev, [curr.value as string]: curr.label };
   }, {} as Record<string, string>);
 
+  const { i18n } = useTranslationContext();
+
   const list = (value ?? []) as string[];
   const filteredChoices =
     filter === undefined
@@ -51,7 +54,7 @@ export function InputSelectMultiple<T extends object, K extends keyof T>(
               }}
               class="group relative h-5 w-5 rounded-sm hover:bg-gray-500/20"
             >
-              <span class="sr-only">Remove</span>
+              <span class="sr-only"><i18n.Translate>Remove</i18n.Translate></span>
               <svg
                 viewBox="0 0 14 14"
                 class="h-5 w-5 stroke-gray-700/50 group-hover:stroke-gray-700/75"
@@ -81,6 +84,7 @@ export function InputSelectMultiple<T extends object, K extends keyof T>(
         <button
           type="button"
           disabled={state.disabled}
+          aria-label={i18n.str`Clear filter`}
           onClick={() => {
             setFilter(filter === undefined ? "" : undefined);
           }}
diff --git a/packages/web-util/src/forms/InputSelectOne.tsx b/packages/web-util/src/forms/InputSelectOne.tsx
index d100b079d..93cb2c2f2 100644
--- a/packages/web-util/src/forms/InputSelectOne.tsx
+++ b/packages/web-util/src/forms/InputSelectOne.tsx
@@ -4,12 +4,14 @@ import { UIFormProps } from "./FormProvider.js";
 import { ChoiceS } from "./InputChoiceStacked.js";
 import { LabelWithTooltipMaybeRequired } from "./InputLine.js";
 import { useField } from "./useField.js";
+import { useTranslationContext } from "../index.browser.js";
 
 export function InputSelectOne<T extends object, K extends keyof T>(
   props: {
     choices: ChoiceS<T[K]>[];
   } & UIFormProps<T, K>,
 ): VNode {
+  const { i18n } = useTranslationContext();
   const { name, label, choices, placeholder, tooltip, required } = props;
   const { value, onChange } = useField<T, K>(name);
 
@@ -25,6 +27,7 @@ export function InputSelectOne<T extends object, K extends keyof T>(
       : choices.filter((v) => {
         return regex.test(v.label);
       });
+
   return (
     <div class="sm:col-span-6">
       <LabelWithTooltipMaybeRequired
@@ -42,7 +45,7 @@ export function InputSelectOne<T extends object, K extends keyof T>(
             }}
             class="group relative h-5 w-5 rounded-sm hover:bg-gray-500/20"
           >
-            <span class="sr-only">Remove</span>
+            <span class="sr-only"><i18n.Translate>Remove</i18n.Translate></span>
             <svg
               viewBox="0 0 14 14"
               class="h-5 w-5 stroke-gray-700/50 group-hover:stroke-gray-700/75"
@@ -69,6 +72,7 @@ export function InputSelectOne<T extends object, K extends keyof T>(
           />
           <button
             type="button"
+            aria-label={i18n.str`Clear filter`}
             onClick={() => {
               setFilter(filter === undefined ? "" : undefined);
             }}