From 4ee4570373f5df60bda12ce71ba0517405c99cdc Mon Sep 17 00:00:00 2001
From: Simon Emanuelsson <simon.emanuelsson@scandichotels.com>
Date: Tue, 16 Apr 2024 12:59:58 +0200
Subject: [PATCH] fix: aria-label warnings for edit profile form

---
 app/[lang]/(live)/(protected)/my-pages/page.tsx          | 1 -
 .../my-pages/profile/@communication/default.tsx          | 3 ---
 .../my-pages/profile/@creditCards/default.tsx            | 3 ---
 .../my-pages/profile/@membershipCard/default.tsx         | 3 ---
 .../(protected)/my-pages/profile/@password/default.tsx   | 3 ---
 .../(protected)/my-pages/profile/@wishes/default.tsx     | 3 ---
 components/MyProfile/Profile/Edit/Form/Content.tsx       | 4 ++++
 components/TempDesignSystem/Form/Country/index.tsx       | 9 +++++++--
 components/TempDesignSystem/Form/Date/Select/index.tsx   | 4 +++-
 components/TempDesignSystem/Form/Date/index.tsx          | 4 ++++
 components/TempDesignSystem/Form/Input/index.tsx         | 2 ++
 11 files changed, 20 insertions(+), 19 deletions(-)
 delete mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@communication/default.tsx
 delete mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/default.tsx
 delete mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@membershipCard/default.tsx
 delete mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@password/default.tsx
 delete mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@wishes/default.tsx

diff --git a/app/[lang]/(live)/(protected)/my-pages/page.tsx b/app/[lang]/(live)/(protected)/my-pages/page.tsx
index 46532739e..72c90152b 100644
--- a/app/[lang]/(live)/(protected)/my-pages/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/page.tsx
@@ -2,7 +2,6 @@ import { redirect } from "next/navigation"
 
 import { overview } from "@/constants/routes/myPages"
 
-import type { Lang } from "@/constants/languages"
 import type { LangParams, PageArgs } from "@/types/params"
 
 export default function MyPages({ params }: PageArgs<LangParams>) {
diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@communication/default.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@communication/default.tsx
deleted file mode 100644
index 86b9e9a38..000000000
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@communication/default.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Default() {
-  return null
-}
diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/default.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/default.tsx
deleted file mode 100644
index 86b9e9a38..000000000
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/default.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Default() {
-  return null
-}
diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@membershipCard/default.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@membershipCard/default.tsx
deleted file mode 100644
index 86b9e9a38..000000000
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@membershipCard/default.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Default() {
-  return null
-}
diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@password/default.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@password/default.tsx
deleted file mode 100644
index 86b9e9a38..000000000
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@password/default.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Default() {
-  return null
-}
diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@wishes/default.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@wishes/default.tsx
deleted file mode 100644
index 86b9e9a38..000000000
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@wishes/default.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Default() {
-  return null
-}
diff --git a/components/MyProfile/Profile/Edit/Form/Content.tsx b/components/MyProfile/Profile/Edit/Form/Content.tsx
index cda2e65e7..62608ae8b 100644
--- a/components/MyProfile/Profile/Edit/Form/Content.tsx
+++ b/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")}
diff --git a/components/TempDesignSystem/Form/Country/index.tsx b/components/TempDesignSystem/Form/Country/index.tsx
index 9d003f4c8..3394d4144 100644
--- a/components/TempDesignSystem/Form/Country/index.tsx
+++ b/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}
diff --git a/components/TempDesignSystem/Form/Date/Select/index.tsx b/components/TempDesignSystem/Form/Date/Select/index.tsx
index b53e754af..fa58473e3 100644
--- a/components/TempDesignSystem/Form/Date/Select/index.tsx
+++ b/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)}
diff --git a/components/TempDesignSystem/Form/Date/index.tsx b/components/TempDesignSystem/Form/Date/index.tsx
index 4c5e73371..5a1dd905c 100644
--- a/components/TempDesignSystem/Form/Date/index.tsx
+++ b/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}
diff --git a/components/TempDesignSystem/Form/Input/index.tsx b/components/TempDesignSystem/Form/Input/index.tsx
index a153d2b3f..16a552eaf 100644
--- a/components/TempDesignSystem/Form/Input/index.tsx
+++ b/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}