Full cleanup pass

app/components/controls/SelectInput/SelectDropdown.tsx

@@ -5,10 +5,11 @@ import { forwardRef, memo } from "react";
 interface SelectDropdownProps extends React.HTMLAttributes<HTMLDivElement> {
   className?: string;
   children?: React.ReactNode;
+  ariaLabel: string;
 }
 
 const SelectDropdown = forwardRef<HTMLDivElement, SelectDropdownProps>(
-  ({ className = "", children, ...props }, ref) => {
+  ({ className = "", children, ariaLabel, ...props }, ref) => {
     const menuClasses = `
       bg-black
       border border-[var(--color-border-default-tertiary)]
@@ -27,7 +28,7 @@ const SelectDropdown = forwardRef<HTMLDivElement, SelectDropdownProps>(
         ref={ref}
         className={menuClasses}
         role="listbox"
-        aria-label="Select an option"
+        aria-label={ariaLabel}
         style={{ backgroundColor: "#000000" }}
         {...props}
       >

app/components/controls/SelectInput/SelectInput.container.tsx

@@ -14,6 +14,7 @@ import React, {
   useEffect,
 } from "react";
 import { useClickOutside } from "../../../hooks";
+import { useTranslation } from "../../../contexts/MessagesContext";
 import { SelectInputView } from "./SelectInput.view";
 import type { SelectInputProps } from "./SelectInput.types";
 
@@ -38,7 +39,7 @@ const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
       textHint = false,
       disabled = false,
       error = false,
-      placeholder = "Choose an option",
+      placeholder,
       className = "",
       children,
       value,
@@ -48,6 +49,9 @@ const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
     },
     ref,
   ) => {
+    const t = useTranslation("controlsChrome");
+    const resolvedPlaceholder = placeholder ?? t("selectPlaceholder");
+
     // Determine if label should be shown
     const shouldShowLabel =
       showLabel !== undefined ? showLabel : labelText !== undefined;
@@ -181,13 +185,13 @@ const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
 
     // Get display text for selected value
     const getDisplayText = (): string => {
-      if (!selectedValue) return placeholder;
+      if (!selectedValue) return resolvedPlaceholder;
 
       if (options && Array.isArray(options)) {
         const selectedOption = options.find(
           (option) => option.value === selectedValue,
         );
-        return selectedOption ? selectedOption.label : placeholder;
+        return selectedOption ? selectedOption.label : resolvedPlaceholder;
       }
 
       const selectedOption = Children.toArray(children).find(
@@ -207,13 +211,13 @@ const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
       );
       return selectedOption
         ? String(selectedOption.props.children)
-        : placeholder;
+        : resolvedPlaceholder;
     };
 
     return (
       <SelectInputView
         label={shouldShowLabel ? labelText : undefined}
-        placeholder={placeholder}
+        placeholder={resolvedPlaceholder}
         state={actualState}
         disabled={disabled}
         error={error}
@@ -241,6 +245,8 @@ const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
         textData={textData}
         iconRight={iconRight}
         textHint={textHint}
+        selectAriaLabel={t("selectAriaLabel")}
+        hintDefault={t("hintDefault")}
         {...props}
       />
     );

app/components/controls/SelectInput/SelectInput.view.tsx

@@ -40,6 +40,8 @@ export interface SelectInputViewProps {
   textData?: boolean;
   iconRight?: boolean;
   textHint?: boolean;
+  selectAriaLabel: string;
+  hintDefault: string;
 }
 
 export function SelectInputView({
@@ -72,6 +74,8 @@ export function SelectInputView({
   textData = true,
   iconRight = true,
   textHint = false,
+  selectAriaLabel,
+  hintDefault,
 }: SelectInputViewProps) {
   // Styles based on Figma design
   const containerClasses = "flex flex-col gap-[8px]";
@@ -222,7 +226,7 @@ export function SelectInputView({
             ref={menuRef}
             className="absolute top-full left-0 right-0 z-50 mt-1"
           >
-            <SelectDropdown>
+            <SelectDropdown ariaLabel={selectAriaLabel}>
               {options && Array.isArray(options)
                 ? options.map((option) => (
                     <SelectOption
@@ -268,7 +272,7 @@ export function SelectInputView({
       {textHint && (
         <div className="flex items-start relative shrink-0 w-full">
           <p className="flex-[1_0_0] font-inter font-normal leading-[16px] min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)] text-[length:var(--sizing-300,12px)]">
-            Hint text here
+            {hintDefault}
           </p>
         </div>
       )}