fix: Address/Contact question accessibility (#4884)

apps/web/modules/ui/components/question-toggle-table/index.tsx

@@ -81,7 +81,7 @@ export const QuestionToggleTable = ({
           </th>
           <th className="w-1/6 text-sm font-semibold">{t("common.show")}</th>
           <th className="w-1/6 text-sm font-semibold">{t("environments.surveys.edit.required")}</th>
-          <th className="text-sm font-semibold">{t("common.placeholder")}</th>
+          <th className="text-sm font-semibold">{t("common.label")}</th>
         </tr>
       </thead>
       <tbody>

apps/web/playwright/survey.spec.ts

@@ -205,22 +205,20 @@ test.describe("Survey Create & Submit Response without logic", async () => {
 
       // Address Question
       await expect(page.getByText(surveys.createAndSubmit.address.question)).toBeVisible();
-      await expect(
-        page.getByPlaceholder(surveys.createAndSubmit.address.placeholder.addressLine1)
-      ).toBeVisible();
+      await expect(page.getByLabel(surveys.createAndSubmit.address.placeholder.addressLine1)).toBeVisible();
       await page
-        .getByPlaceholder(surveys.createAndSubmit.address.placeholder.addressLine1)
+        .getByLabel(surveys.createAndSubmit.address.placeholder.addressLine1)
         .fill("This is my Address");
-      await expect(page.getByPlaceholder(surveys.createAndSubmit.address.placeholder.city)).toBeVisible();
-      await page.getByPlaceholder(surveys.createAndSubmit.address.placeholder.city).fill("This is my city");
-      await expect(page.getByPlaceholder(surveys.createAndSubmit.address.placeholder.zip)).toBeVisible();
-      await page.getByPlaceholder(surveys.createAndSubmit.address.placeholder.zip).fill("12345");
+      await expect(page.getByLabel(surveys.createAndSubmit.address.placeholder.city)).toBeVisible();
+      await page.getByLabel(surveys.createAndSubmit.address.placeholder.city).fill("This is my city");
+      await expect(page.getByLabel(surveys.createAndSubmit.address.placeholder.zip)).toBeVisible();
+      await page.getByLabel(surveys.createAndSubmit.address.placeholder.zip).fill("12345");
       await page.locator("#questionCard-10").getByRole("button", { name: "Next" }).click();
 
       // Contact Info Question
       await expect(page.getByText(surveys.createAndSubmit.contactInfo.question)).toBeVisible();
-      await expect(page.getByPlaceholder(surveys.createAndSubmit.contactInfo.placeholder)).toBeVisible();
-      await page.getByPlaceholder(surveys.createAndSubmit.contactInfo.placeholder).fill("John Doe");
+      await expect(page.getByLabel(surveys.createAndSubmit.contactInfo.placeholder)).toBeVisible();
+      await page.getByLabel(surveys.createAndSubmit.contactInfo.placeholder).fill("John Doe");
       await page.locator("#questionCard-11").getByRole("button", { name: "Next" }).click();
 
       // Ranking Question
@@ -866,21 +864,17 @@ test.describe("Testing Survey with advanced logic", async () => {
       // Address Question
       await expect(page.getByText(surveys.createWithLogicAndSubmit.address.question)).toBeVisible();
       await expect(
-        page.getByPlaceholder(surveys.createWithLogicAndSubmit.address.placeholder.addressLine1)
+        page.getByLabel(surveys.createWithLogicAndSubmit.address.placeholder.addressLine1)
       ).toBeVisible();
       await page
-        .getByPlaceholder(surveys.createWithLogicAndSubmit.address.placeholder.addressLine1)
+        .getByLabel(surveys.createWithLogicAndSubmit.address.placeholder.addressLine1)
         .fill("This is my Address");
-      await expect(
-        page.getByPlaceholder(surveys.createWithLogicAndSubmit.address.placeholder.city)
-      ).toBeVisible();
+      await expect(page.getByLabel(surveys.createWithLogicAndSubmit.address.placeholder.city)).toBeVisible();
       await page
-        .getByPlaceholder(surveys.createWithLogicAndSubmit.address.placeholder.city)
+        .getByLabel(surveys.createWithLogicAndSubmit.address.placeholder.city)
         .fill("This is my city");
-      await expect(
-        page.getByPlaceholder(surveys.createWithLogicAndSubmit.address.placeholder.zip)
-      ).toBeVisible();
-      await page.getByPlaceholder(surveys.createWithLogicAndSubmit.address.placeholder.zip).fill("12345");
+      await expect(page.getByLabel(surveys.createWithLogicAndSubmit.address.placeholder.zip)).toBeVisible();
+      await page.getByLabel(surveys.createWithLogicAndSubmit.address.placeholder.zip).fill("12345");
       await page.locator("#questionCard-13").getByRole("button", { name: "Next" }).click();
 
       // loading spinner -> wait for it to disappear

packages/surveys/src/components/general/label.tsx

@@ -0,0 +1,7 @@
+interface LabelProps {
+  text: string;
+}
+
+export function Label({ text }: LabelProps) {
+  return <label className="fb-text-subheading fb-font-normal fb-text-sm">{text}</label>;
+}

packages/surveys/src/components/questions/address-question.tsx

@@ -2,6 +2,7 @@ import { BackButton } from "@/components/buttons/back-button";
 import { SubmitButton } from "@/components/buttons/submit-button";
 import { Headline } from "@/components/general/headline";
 import { Input } from "@/components/general/input";
+import { Label } from "@/components/general/label";
 import { QuestionMedia } from "@/components/general/question-media";
 import { Subheader } from "@/components/general/subheader";
 import { ScrollableContainer } from "@/components/wrappers/scrollable-container";
@@ -56,32 +57,32 @@ export function AddressQuestion({
     {
       id: "addressLine1",
       ...question.addressLine1,
-      placeholder: question.addressLine1.placeholder[languageCode],
+      label: question.addressLine1.placeholder[languageCode],
     },
     {
       id: "addressLine2",
       ...question.addressLine2,
-      placeholder: question.addressLine2.placeholder[languageCode],
+      label: question.addressLine2.placeholder[languageCode],
     },
     {
       id: "city",
       ...question.city,
-      placeholder: question.city.placeholder[languageCode],
+      label: question.city.placeholder[languageCode],
     },
     {
       id: "state",
       ...question.state,
-      placeholder: question.state.placeholder[languageCode],
+      label: question.state.placeholder[languageCode],
     },
     {
       id: "zip",
       ...question.zip,
-      placeholder: question.zip.placeholder[languageCode],
+      label: question.zip.placeholder[languageCode],
     },
     {
       id: "country",
       ...question.country,
-      placeholder: question.country.placeholder[languageCode],
+      label: question.country.placeholder[languageCode],
     },
   ];
 
@@ -155,19 +156,21 @@ export function AddressQuestion({
 
               return (
                 field.show && (
-                  <Input
-                    key={field.id}
-                    placeholder={isFieldRequired() ? `${field.placeholder}*` : field.placeholder}
-                    required={isFieldRequired()}
-                    value={safeValue[index] || ""}
-                    className="fb-py-3"
-                    type={field.id === "email" ? "email" : "text"}
-                    onChange={(e) => {
-                      handleChange(field.id, e.currentTarget.value);
-                    }}
-                    ref={index === 0 ? addressRef : null}
-                    tabIndex={isCurrent ? 0 : -1}
-                  />
+                  <div className="fb-space-y-1">
+                    <Label text={isFieldRequired() ? `${field.label}*` : field.label} />
+                    <Input
+                      key={field.id}
+                      required={isFieldRequired()}
+                      value={safeValue[index] || ""}
+                      type={field.id === "email" ? "email" : "text"}
+                      onChange={(e) => {
+                        handleChange(field.id, e.currentTarget.value);
+                      }}
+                      ref={index === 0 ? addressRef : null}
+                      tabIndex={isCurrent ? 0 : -1}
+                      aria-label={field.label}
+                    />
+                  </div>
                 )
               );
             })}

packages/surveys/src/components/questions/contact-info-question.tsx

@@ -2,6 +2,7 @@ import { BackButton } from "@/components/buttons/back-button";
 import { SubmitButton } from "@/components/buttons/submit-button";
 import { Headline } from "@/components/general/headline";
 import { Input } from "@/components/general/input";
+import { Label } from "@/components/general/label";
 import { QuestionMedia } from "@/components/general/question-media";
 import { Subheader } from "@/components/general/subheader";
 import { ScrollableContainer } from "@/components/wrappers/scrollable-container";
@@ -56,27 +57,27 @@ export function ContactInfoQuestion({
     {
       id: "firstName",
       ...question.firstName,
-      placeholder: question.firstName.placeholder[languageCode],
+      label: question.firstName.placeholder[languageCode],
     },
     {
       id: "lastName",
       ...question.lastName,
-      placeholder: question.lastName.placeholder[languageCode],
+      label: question.lastName.placeholder[languageCode],
     },
     {
       id: "email",
       ...question.email,
-      placeholder: question.email.placeholder[languageCode],
+      label: question.email.placeholder[languageCode],
     },
     {
       id: "phone",
       ...question.phone,
-      placeholder: question.phone.placeholder[languageCode],
+      label: question.phone.placeholder[languageCode],
     },
     {
       id: "company",
       ...question.company,
-      placeholder: question.company.placeholder[languageCode],
+      label: question.company.placeholder[languageCode],
     },
   ];
 
@@ -157,19 +158,21 @@ export function ContactInfoQuestion({
 
               return (
                 field.show && (
-                  <Input
-                    ref={index === 0 ? contactInfoRef : null}
-                    key={field.id}
-                    placeholder={isFieldRequired() ? `${field.placeholder}*` : field.placeholder}
-                    required={isFieldRequired()}
-                    value={safeValue[index] || ""}
-                    className="fb-py-3"
-                    type={inputType}
-                    onChange={(e) => {
-                      handleChange(field.id, e.currentTarget.value);
-                    }}
-                    tabIndex={isCurrent ? 0 : -1}
-                  />
+                  <div className="fb-space-y-1">
+                    <Label text={isFieldRequired() ? `${field.label}*` : field.label} />
+                    <Input
+                      ref={index === 0 ? contactInfoRef : null}
+                      key={field.id}
+                      required={isFieldRequired()}
+                      value={safeValue[index] || ""}
+                      type={inputType}
+                      onChange={(e) => {
+                        handleChange(field.id, e.currentTarget.value);
+                      }}
+                      tabIndex={isCurrent ? 0 : -1}
+                      aria-label={field.label}
+                    />
+                  </div>
                 )
               );
             })}

packages/types/surveys/types.ts

@@ -1168,7 +1168,7 @@ export const ZSurvey = z
           const multiLangIssueInPlaceholder =
             field.show &&
             validateQuestionLabels(
-              `Placeholder for field ${field.label}`,
+              `Label for field ${field.label}`,
               field.placeholder,
               languages,
               questionIndex,
@@ -1202,7 +1202,7 @@ export const ZSurvey = z
           const multiLangIssueInPlaceholder =
             field.show &&
             validateQuestionLabels(
-              `Placeholder for field ${field.label}`,
+              `Label for field ${field.label}`,
               field.placeholder,
               languages,
               questionIndex,