fix: matrix question input not accessible (#4727)

apps/web/playwright/survey.spec.ts

@@ -166,18 +166,41 @@ test.describe("Survey Create & Submit Response without logic", async () => {
       // Matrix Question
       await expect(page.getByText(surveys.createAndSubmit.matrix.question)).toBeVisible();
       await expect(page.getByText(surveys.createAndSubmit.matrix.description)).toBeVisible();
-      await expect(page.getByRole("cell", { name: surveys.createAndSubmit.matrix.rows[0] })).toBeVisible();
-      await expect(page.getByRole("cell", { name: surveys.createAndSubmit.matrix.rows[1] })).toBeVisible();
-      await expect(page.getByRole("cell", { name: surveys.createAndSubmit.matrix.rows[2] })).toBeVisible();
-      await expect(page.getByRole("cell", { name: surveys.createAndSubmit.matrix.columns[0] })).toBeVisible();
-      await expect(page.getByRole("cell", { name: surveys.createAndSubmit.matrix.columns[1] })).toBeVisible();
-      await expect(page.getByRole("cell", { name: surveys.createAndSubmit.matrix.columns[2] })).toBeVisible();
-      await expect(page.getByRole("cell", { name: surveys.createAndSubmit.matrix.columns[3] })).toBeVisible();
+      await expect(
+        page.getByRole("rowheader", { name: surveys.createAndSubmit.matrix.rows[0] })
+      ).toBeVisible();
+      await expect(
+        page.getByRole("rowheader", { name: surveys.createAndSubmit.matrix.rows[1] })
+      ).toBeVisible();
+      await expect(
+        page.getByRole("rowheader", { name: surveys.createAndSubmit.matrix.rows[2] })
+      ).toBeVisible();
+      await expect(
+        page.getByRole("columnheader", { name: surveys.createAndSubmit.matrix.columns[0] })
+      ).toBeVisible();
+      await expect(
+        page.getByRole("columnheader", { name: surveys.createAndSubmit.matrix.columns[1] })
+      ).toBeVisible();
+      await expect(
+        page.getByRole("columnheader", { name: surveys.createAndSubmit.matrix.columns[2] })
+      ).toBeVisible();
+      await expect(
+        page.getByRole("columnheader", { name: surveys.createAndSubmit.matrix.columns[3] })
+      ).toBeVisible();
       await expect(page.locator("#questionCard-9").getByRole("button", { name: "Next" })).toBeVisible();
       await expect(page.locator("#questionCard-9").getByRole("button", { name: "Back" })).toBeVisible();
-      await page.getByRole("row", { name: "Roses" }).getByRole("cell").nth(1).click();
-      await page.getByRole("row", { name: "Trees" }).getByRole("cell").nth(1).click();
-      await page.getByRole("row", { name: "Ocean" }).getByRole("cell").nth(1).click();
+      await page
+        .getByRole("cell", { name: "How much do you love these flowers?: Roses – 0" })
+        .locator("div")
+        .click();
+      await page
+        .getByRole("cell", { name: "How much do you love these flowers?: Trees – 0" })
+        .locator("div")
+        .click();
+      await page
+        .getByRole("cell", { name: "How much do you love these flowers?: Ocean – 0" })
+        .locator("div")
+        .click();
       await page.locator("#questionCard-9").getByRole("button", { name: "Next" }).click();
 
       // Address Question
@@ -765,31 +788,31 @@ test.describe("Testing Survey with advanced logic", async () => {
       await expect(page.getByText(surveys.createWithLogicAndSubmit.matrix.question)).toBeVisible();
       await expect(page.getByText(surveys.createWithLogicAndSubmit.matrix.description)).toBeVisible();
       await expect(
-        page.getByRole("cell", { name: surveys.createWithLogicAndSubmit.matrix.rows[0] })
+        page.getByRole("rowheader", { name: surveys.createWithLogicAndSubmit.matrix.rows[0] })
       ).toBeVisible();
       await expect(
-        page.getByRole("cell", { name: surveys.createWithLogicAndSubmit.matrix.rows[1] })
+        page.getByRole("rowheader", { name: surveys.createWithLogicAndSubmit.matrix.rows[1] })
       ).toBeVisible();
       await expect(
-        page.getByRole("cell", { name: surveys.createWithLogicAndSubmit.matrix.rows[2] })
+        page.getByRole("rowheader", { name: surveys.createWithLogicAndSubmit.matrix.rows[2] })
       ).toBeVisible();
       await expect(
-        page.getByRole("cell", { name: surveys.createWithLogicAndSubmit.matrix.columns[0] })
+        page.getByRole("columnheader", { name: surveys.createWithLogicAndSubmit.matrix.columns[0] })
       ).toBeVisible();
       await expect(
-        page.getByRole("cell", { name: surveys.createWithLogicAndSubmit.matrix.columns[1] })
+        page.getByRole("columnheader", { name: surveys.createWithLogicAndSubmit.matrix.columns[1] })
       ).toBeVisible();
       await expect(
-        page.getByRole("cell", { name: surveys.createWithLogicAndSubmit.matrix.columns[2] })
+        page.getByRole("columnheader", { name: surveys.createWithLogicAndSubmit.matrix.columns[2] })
       ).toBeVisible();
       await expect(
-        page.getByRole("cell", { name: surveys.createWithLogicAndSubmit.matrix.columns[3] })
+        page.getByRole("columnheader", { name: surveys.createWithLogicAndSubmit.matrix.columns[3] })
       ).toBeVisible();
       await expect(page.locator("#questionCard-7").getByRole("button", { name: "Next" })).toBeVisible();
       await expect(page.locator("#questionCard-7").getByRole("button", { name: "Back" })).toBeVisible();
-      await page.getByRole("row", { name: "Roses" }).getByRole("cell").nth(1).click();
-      await page.getByRole("row", { name: "Trees" }).getByRole("cell").nth(1).click();
-      await page.getByRole("row", { name: "Ocean" }).getByRole("cell").nth(1).click();
+      await page.getByRole("cell", { name: "This is my Matrix Question: Roses – 0" }).locator("div").click();
+      await page.getByRole("cell", { name: "This is my Matrix Question: Trees – 0" }).locator("div").click();
+      await page.getByRole("cell", { name: "This is my Matrix Question: Ocean – 0" }).locator("div").click();
       await page.locator("#questionCard-7").getByRole("button", { name: "Next" }).click();
 
       // CTA Question

packages/lib/messages/de-DE.json

@@ -171,7 +171,7 @@
     "disallow": "Nicht erlauben",
     "discard": "Verwerfen",
     "dismissed": "Entlassen",
-    "docs": "Dokumente",
+    "docs": "Dokumentation",
     "documentation": "Dokumentation",
     "download": "Herunterladen",
     "draft": "Entwurf",

packages/lib/messages/en-US.json

@@ -171,7 +171,7 @@
     "disallow": "Don't allow",
     "discard": "Discard",
     "dismissed": "Dismissed",
-    "docs": "docs",
+    "docs": "Documentation",
     "documentation": "Documentation",
     "download": "Download",
     "draft": "Draft",

packages/lib/messages/fr-FR.json

@@ -171,7 +171,7 @@
     "disallow": "Ne pas permettre",
     "discard": "Annuler",
     "dismissed": "Rejeté",
-    "docs": "documents",
+    "docs": "Documentation",
     "documentation": "Documentation",
     "download": "Télécharger",
     "draft": "Brouillon",

packages/lib/messages/pt-BR.json

@@ -171,7 +171,7 @@
     "disallow": "Não permita",
     "discard": "Descartar",
     "dismissed": "Dispensado",
-    "docs": "documentos",
+    "docs": "Documentação",
     "documentation": "Documentação",
     "download": "baixar",
     "draft": "Rascunho",

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

@@ -107,6 +107,7 @@ export function MatrixQuestion({
       question.columns.map((column, index) => (
         <th
           key={index}
+          scope="col"
           className="fb-text-heading fb-max-w-40 fb-break-words fb-px-4 fb-py-2 fb-font-normal"
           dir="auto">
           {getLocalizedValue(column, languageCode)}
@@ -141,13 +142,13 @@ export function MatrixQuestion({
               </thead>
               <tbody>
                 {questionRows.map((row, rowIndex) => (
-                  // Table rows
-                  <tr className={rowIndex % 2 === 0 ? "bg-input-bg" : ""} key={`row-${rowIndex.toString()}`}>
-                    <td
+                  <tr key={`row-${rowIndex.toString()}`} className={rowIndex % 2 === 0 ? "bg-input-bg" : ""}>
+                    <th
+                      scope="row"
                       className="fb-text-heading fb-rounded-l-custom fb-max-w-40 fb-break-words fb-pr-4 fb-pl-2 fb-py-2"
                       dir="auto">
                       {getLocalizedValue(row, languageCode)}
-                    </td>
+                    </th>
                     {question.columns.map((column, columnIndex) => (
                       <td
                         key={`column-${columnIndex.toString()}`}
@@ -170,7 +171,6 @@ export function MatrixQuestion({
                         }}
                         dir="auto">
                         <div className="fb-flex fb-items-center fb-justify-center fb-p-2">
-                          {/* radio input  */}
                           <input
                             dir="auto"
                             type="radio"
@@ -185,6 +185,13 @@ export function MatrixQuestion({
                                   getLocalizedValue(column, languageCode)
                                 : false
                             }
+                            aria-label={`${getLocalizedValue(
+                              question.headline,
+                              languageCode
+                            )}: ${getLocalizedValue(row, languageCode)} – ${getLocalizedValue(
+                              column,
+                              languageCode
+                            )}`}
                             className="fb-border-brand fb-text-brand fb-h-5 fb-w-5 fb-border focus:fb-ring-0 focus:fb-ring-offset-0"
                           />
                         </div>