feat: [AB#12619] table labels on talkback read column header before cost content and total and subtotal content

adidner · adidner · commit 97d5407c5ab9 · 2025-11-18T12:02:17.000-05:00
diff --git a/web/src/components/tasks/business-formation/billing/BillingStep.test.tsx b/web/src/components/tasks/business-formation/billing/BillingStep.test.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+import { getDollarValue } from "@/lib/utils/formatters";
 import { generateFormationDbaContent } from "@/test/factories";
 import {
   FormationPageHelpers,
@@ -54,6 +55,14 @@ describe("Formation - BillingStep", () => {
   const subtotalLabel = Config.formation.fields.paymentType.costSubtotalLabel;
   const totalLabel = "Total";
 
+  const composeSubTotalAria = (subTotalNumber: number): string => {
+    return `${subtotalLabel} ${getDollarValue(subTotalNumber)}`;
+  };
+
+  const composeTotalAria = (totalNumber: number): string => {
+    return `* ${totalLabel} ${getDollarValue(totalNumber)}`;
+  };
+
   const getPageHelper = async (
     initialProfileData: Partial<ProfileData>,
     formationFormData: Partial<FormationFormData>,
@@ -160,8 +169,12 @@ describe("Formation - BillingStep", () => {
         const standingCost = Number.parseInt(Config.formation.fields.certificateOfStanding.cost);
         const expectedTotal = officialFormationCost + standingCost;
 
-        expect(screen.getByLabelText(subtotalLabel)).toHaveTextContent(expectedTotal.toString());
-        expect(screen.getByLabelText(totalLabel)).toHaveTextContent(expectedTotal.toString());
+        expect(
+          screen.getByRole("generic", { name: composeTotalAria(expectedTotal) }),
+        ).toHaveTextContent(getDollarValue(expectedTotal));
+        expect(
+          screen.getByRole("generic", { name: composeSubTotalAria(expectedTotal) }),
+        ).toHaveTextContent(getDollarValue(expectedTotal));
       });
     }
 
@@ -185,8 +198,12 @@ describe("Formation - BillingStep", () => {
         );
         const expectedTotal = officialFormationCost + standingCost;
 
-        expect(screen.getByLabelText(subtotalLabel)).toHaveTextContent(expectedTotal.toString());
-        expect(screen.getByLabelText(totalLabel)).toHaveTextContent(expectedTotal.toString());
+        expect(
+          screen.getByRole("generic", { name: composeSubTotalAria(expectedTotal) }),
+        ).toHaveTextContent(expectedTotal.toString());
+        expect(
+          screen.getByRole("generic", { name: composeTotalAria(expectedTotal) }),
+        ).toHaveTextContent(expectedTotal.toString());
       });
     }
   });
@@ -220,35 +237,55 @@ describe("Formation - BillingStep", () => {
       },
     );
 
-    expect(screen.getByLabelText(subtotalLabel)).toHaveTextContent(
-      officialFormationCost.toString(),
-    );
+    expect(
+      screen.getByRole("generic", { name: composeSubTotalAria(officialFormationCost) }),
+    ).toHaveTextContent(officialFormationCost.toString());
     page.selectCheckboxByTestId("certificateOfStanding");
-    expect(screen.getByLabelText(subtotalLabel)).toHaveTextContent(
-      (officialFormationCost + certificateStandingCost).toString(),
-    );
+    expect(
+      screen.getByRole("generic", {
+        name: composeSubTotalAria(officialFormationCost + certificateStandingCost),
+      }),
+    ).toHaveTextContent((officialFormationCost + certificateStandingCost).toString());
     page.selectCheckboxByTestId("certifiedCopyOfFormationDocument");
-    expect(screen.getByLabelText(subtotalLabel)).toHaveTextContent(
+    expect(
+      screen.getByRole("generic", {
+        name: composeSubTotalAria(
+          officialFormationCost + certificateStandingCost + certifiedCopyCost,
+        ),
+      }),
+    ).toHaveTextContent(
       (officialFormationCost + certificateStandingCost + certifiedCopyCost).toString(),
     );
-    expect(screen.getByLabelText(totalLabel)).toHaveTextContent(
+    expect(
+      screen.getByRole("generic", {
+        name: composeTotalAria(officialFormationCost + certificateStandingCost + certifiedCopyCost),
+      }),
+    ).toHaveTextContent(
       (officialFormationCost + certificateStandingCost + certifiedCopyCost).toString(),
     );
     page.selectCheckboxByTestId("certificateOfStanding");
     const finalTotal = officialFormationCost + certifiedCopyCost;
 
-    expect(screen.getByLabelText(subtotalLabel)).toHaveTextContent(finalTotal.toString());
-    expect(screen.getByLabelText(totalLabel)).toHaveTextContent(finalTotal.toString());
+    expect(
+      screen.getByRole("generic", { name: composeSubTotalAria(finalTotal) }),
+    ).toHaveTextContent(finalTotal.toString());
+    expect(screen.getByRole("generic", { name: composeTotalAria(finalTotal) })).toHaveTextContent(
+      finalTotal.toString(),
+    );
 
     fireEvent.click(screen.getByLabelText(Config.formation.fields.paymentType.creditCardLabel));
-    expect(screen.getByLabelText(totalLabel)).toHaveTextContent(
-      (finalTotal + ccInitialCost + ccExtraCost).toString(),
-    );
+    expect(
+      screen.getByRole("generic", {
+        name: composeTotalAria(finalTotal + ccInitialCost + ccExtraCost),
+      }),
+    ).toHaveTextContent((finalTotal + ccInitialCost + ccExtraCost).toString());
     fireEvent.click(screen.getByLabelText(Config.formation.fields.paymentType.achLabel));
     const numberOfDocuments = 2;
-    expect(screen.getByLabelText(totalLabel)).toHaveTextContent(
-      (finalTotal + achCost * numberOfDocuments).toString(),
-    );
+    expect(
+      screen.getByRole("generic", {
+        name: composeTotalAria(finalTotal + achCost * numberOfDocuments),
+      }),
+    ).toHaveTextContent((finalTotal + achCost * numberOfDocuments).toString());
   });
 
   it("uses name from profile when business formation data is not set", async () => {
diff --git a/web/src/components/tasks/business-formation/billing/FormationChooseDocuments.tsx b/web/src/components/tasks/business-formation/billing/FormationChooseDocuments.tsx
@@ -61,14 +61,20 @@ export const FormationChooseDocuments = (): ReactElement => {
     });
   };
 
+  const costColumnHeader = Config.formation.fields.paymentType.costColumnLabel;
+
   return (
     <div className={`margin-top-3`}>
-      <table className="business-formation-table business-formation-document">
+      <table className="business-formation-table business-formation-document" role="table">
         <thead>
           <tr>
-            <th className="text-bold">{Config.formation.fields.paymentType.serviceColumnLabel}</th>
+            <th scope="col" role="columnheader" className="text-bold">
+              {Config.formation.fields.paymentType.serviceColumnLabel}
+            </th>
             <th></th>
-            <th className="text-bold">{Config.formation.fields.paymentType.costColumnLabel}</th>
+            <th scope="col" role="columnheader" className="text-bold">
+              {costColumnHeader}
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -90,7 +96,10 @@ export const FormationChooseDocuments = (): ReactElement => {
                 />
               </label>
             </td>
-            <td className={"text-primary-dark text-bold"}>
+            <td
+              className={"text-primary-dark text-bold"}
+              aria-label={`${costColumnHeader} ${getDollarValue(officialFormationCost)}`}
+            >
               {getDollarValue(officialFormationCost)}
             </td>
           </tr>
@@ -129,6 +138,7 @@ export const FormationChooseDocuments = (): ReactElement => {
               className={
                 state.formationFormData.certificateOfStanding ? "text-primary-dark text-bold" : ""
               }
+              aria-label={`${costColumnHeader} ${getDollarValue(certificateStandingCost)}`}
             >
               {getDollarValue(certificateStandingCost)}
             </td>
@@ -173,7 +183,9 @@ export const FormationChooseDocuments = (): ReactElement => {
                   : ""
               }
             >
-              {getDollarValue(certifiedCopyCost)}
+              <div aria-label={`${costColumnHeader} ${getDollarValue(certifiedCopyCost)}`}>
+                {getDollarValue(certifiedCopyCost)}
+              </div>
             </td>
           </tr>
         </tbody>
@@ -188,7 +200,10 @@ export const FormationChooseDocuments = (): ReactElement => {
             </td>
             <td colSpan={1}></td>
             <td colSpan={1}>
-              <div className="text-align-right text-bold" aria-label="Subtotal">
+              <div
+                className="text-align-right text-bold"
+                aria-label={`${Config.formation.fields.paymentType.costSubtotalLabel} ${getDollarValue(totalCost)}`}
+              >
                 {getDollarValue(totalCost)}
               </div>
             </td>
diff --git a/web/src/components/tasks/business-formation/billing/PaymentTypeTable.tsx b/web/src/components/tasks/business-formation/billing/PaymentTypeTable.tsx
@@ -77,6 +77,7 @@ export const PaymentTypeTable = (): ReactElement => {
   };
 
   const hasError = doesFieldHaveError(fieldName);
+  const costColumnHeader = Config.formation.fields.paymentType.costColumnLabel;
 
   return (
     <ScrollableFormFieldWrapper fieldName={fieldName}>
@@ -86,7 +87,9 @@ export const PaymentTypeTable = (): ReactElement => {
             <tr>
               <th className="text-bold">{Config.formation.fields.paymentType.label}</th>
               <th></th>
-              <th className="text-bold">{Config.formation.fields.paymentType.costColumnLabel}</th>
+              <th className="text-bold" id="cost-column-header">
+                {costColumnHeader}
+              </th>
             </tr>
             {hasError && (
               <tr>
@@ -130,6 +133,7 @@ export const PaymentTypeTable = (): ReactElement => {
                 className={
                   state.formationFormData.paymentType === "CC" ? "text-primary-dark text-bold" : ""
                 }
+                aria-label={`${costColumnHeader} ${getDollarValue(creditCardCost)}`}
               >
                 {getDollarValue(creditCardCost)}
               </td>
@@ -165,6 +169,7 @@ export const PaymentTypeTable = (): ReactElement => {
                 className={
                   state.formationFormData.paymentType === "ACH" ? "text-primary-dark text-bold" : ""
                 }
+                aria-label={`${costColumnHeader} ${getDollarValue(achCost)}`}
               >
                 {getDollarValue(achCost)}
               </td>
@@ -180,7 +185,11 @@ export const PaymentTypeTable = (): ReactElement => {
                 </div>
               </td>
               <td colSpan={1}>
-                <div className="text-align-right text-bold" aria-label={"Total"}>
+                <div
+                  className="text-align-right text-bold"
+                  data-testid="something"
+                  aria-label={`${Config.formation.fields.paymentType.costTotalLabel} ${getDollarValue(totalCost)}`}
+                >
                   {getDollarValue(totalCost)}
                 </div>
               </td>
