fix: aria-label warnings for edit profile form

components/MyProfile/Profile/Edit/Form/Content.tsx

@@ -58,6 +58,7 @@ export default function FormContent({ control }: EditFormContentProps) {
         <Field.Label htmlFor="email">*{_("Email")}</Field.Label>
         <Field.Content>
           <Input
+            aria-label={_("Email")}
             control={control}
             name="email"
             placeholder={_("Email")}
@@ -84,6 +85,7 @@ export default function FormContent({ control }: EditFormContentProps) {
         <Field.Label htmlFor="street">*{_("Address")}</Field.Label>
         <Field.Content>
           <Input
+            aria-label={_("Street")}
             control={control}
             name="street"
             placeholder={_("Street 123")}
@@ -99,6 +101,7 @@ export default function FormContent({ control }: EditFormContentProps) {
         <Field.Label htmlFor="city">*{_("City/State")}</Field.Label>
         <Field.Content>
           <Input
+            aria-label={_("City")}
             control={control}
             name="city"
             placeholder={_("City")}
@@ -114,6 +117,7 @@ export default function FormContent({ control }: EditFormContentProps) {
         <Field.Label htmlFor="zip">*{_("Zip code")}</Field.Label>
         <Field.Content>
           <Input
+            aria-label={_("Zip code")}
             control={control}
             name="zip"
             placeholder={_("Zip code")}

components/TempDesignSystem/Form/Country/index.tsx

@@ -62,6 +62,7 @@ export default function CountrySelect({
   return (
     <div className={styles.container} ref={divRef}>
       <ComboBox
+        aria-label={_("Select country of residence")}
         className={styles.select}
         isRequired={!!registerOptions?.required}
         name={field.name}
@@ -71,7 +72,11 @@ export default function CountrySelect({
         selectedKey={selectedKey}
       >
         <div className={styles.comboBoxContainer}>
-          <Input className={styles.input} placeholder={_(placeholder)} />
+          <Input
+            aria-label="Selected country"
+            className={styles.input}
+            placeholder={_(placeholder)}
+          />
           <Button className={styles.button}>
             <SelectChevron />
           </Button>
@@ -91,7 +96,7 @@ export default function CountrySelect({
            */
           UNSTABLE_portalContainer={divElement ?? undefined}
         >
-          <ListBox aria-label="Country of residence">
+          <ListBox>
             {countries.map((country, idx) => (
               <ListBoxItem
                 aria-label={country.name}

components/TempDesignSystem/Form/Date/Select/index.tsx

@@ -18,6 +18,7 @@ import styles from "./select.module.css"
 import type { SelectProps } from "./select"
 
 export default function Select({
+  "aria-label": ariaLabel,
   items,
   label,
   name,
@@ -41,6 +42,7 @@ export default function Select({
   return (
     <div className={styles.date} ref={divRef}>
       <ReactAriaSelect
+        aria-label={ariaLabel}
         className={styles.select}
         onSelectionChange={handleOnSelect}
         placeholder={placeholder}
@@ -63,7 +65,7 @@ export default function Select({
            */
           UNSTABLE_portalContainer={divElement ?? undefined}
         >
-          <ListBox aria-label={name} className={styles.listBox}>
+          <ListBox className={styles.listBox}>
             {items.map((item) => (
               <ListBoxItem
                 aria-label={String(item)}

components/TempDesignSystem/Form/Date/index.tsx

@@ -51,6 +51,7 @@ export default function DateSelect({
 
   return (
     <DatePicker
+      aria-label="Select date of birth"
       granularity="day"
       isRequired={!!registerOptions.required}
       name={name}
@@ -73,6 +74,7 @@ export default function DateSelect({
                 return (
                   <DateSegment className={styles.day} segment={segment}>
                     <Select
+                      aria-label={_("Day")}
                       items={days}
                       label={_("Day")}
                       name={DateName.date}
@@ -86,6 +88,7 @@ export default function DateSelect({
                 return (
                   <DateSegment className={styles.month} segment={segment}>
                     <Select
+                      aria-label={_("Month")}
                       items={months}
                       label={_("Month")}
                       name={DateName.month}
@@ -99,6 +102,7 @@ export default function DateSelect({
                 return (
                   <DateSegment className={styles.year} segment={segment}>
                     <Select
+                      aria-label={_("Year")}
                       items={years}
                       label={_("Year")}
                       name={DateName.year}

components/TempDesignSystem/Form/Input/index.tsx

@@ -9,6 +9,7 @@ import styles from "./input.module.css"
 import type { InputProps } from "./input"
 
 export default function Input({
+  "aria-label": ariaLabel,
   control,
   disabled,
   name,
@@ -24,6 +25,7 @@ export default function Input({
 
   return (
     <TextField
+      aria-label={ariaLabel}
       defaultValue={field.value}
       isDisabled={disabled ?? field.disabled}
       isInvalid={fieldState.invalid}