Format aria labels for PDF table headers (#652)

Enterprise-CMCS · Jun 21, 2024 · 6e96102 · 6e96102
1 parent 05af13f
commit 6e96102
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 11 deletions.
diff --git a/services/ui-src/src/components/export/ExportedModalDrawerReportSection.test.tsx b/services/ui-src/src/components/export/ExportedModalDrawerReportSection.test.tsx
@@ -3,6 +3,7 @@ import { axe } from "jest-axe";
 import { useStore } from "utils";
 import {
   mockReportStore,
+  mockReportFieldData,
   RouterWrappedComponent,
 } from "utils/testing/setupJest";
 import { ModalDrawerReportPageVerbiage } from "types";
@@ -148,6 +149,33 @@ describe("ExportedModalDrawerReportSection table", () => {
     // renders "Not answered" for each quarter given no entity data
     expect(screen.queryAllByText("Not answered").length).toBe(12);
   });
+
+  test("renders aria labels for target populations with abbreviated names", async () => {
+    const mockReport = {
+      ...mockReportStore,
+      report: {
+        ...mockReportStore.report,
+        fieldData: {
+          ...mockReportFieldData,
+          entityType: [
+            {
+              transitionBenchmarks_targetPopulationName:
+                "A very long target population name",
+              transitionBenchmarks_targetPopulationName_short: "ABC",
+            },
+          ],
+        },
+      },
+    };
+
+    mockedUseStore.mockReturnValue(mockReport);
+    render(tableComponent);
+
+    expect(screen.getByText("ABC")).toBeVisible();
+    expect(
+      screen.getByLabelText("A very long target population name")
+    ).toBeVisible();
+  });
 });
 
 describe("ExportedModalDrawerReportSection", () => {

diff --git a/services/ui-src/src/components/export/ExportedModalDrawerReportSection.tsx b/services/ui-src/src/components/export/ExportedModalDrawerReportSection.tsx
@@ -16,16 +16,32 @@ export const ExportedModalDrawerReportSection = ({
   const entities = report?.fieldData?.[entityType];
   const { reportPeriod, reportYear } = report!;
 
-  // if Transition Benchmark Header title has an abbrev. just display that
   const getTableHeaders = () => {
     let headers = [];
-    const quarterHeader = "Pop. by Quarter";
-    const bodyHeaders = entities.map(
-      (entity: EntityShape) =>
-        entity.transitionBenchmarks_targetPopulationName_short ??
-        entity.transitionBenchmarks_targetPopulationName.slice(0, 29)
-    );
-    const totalHeader = "Total by Quarter";
+    let bodyHeaders = [];
+    const quarterHeader = {
+      displayName: "Pop. by Quarter",
+      ariaLabel: "Population by Quarter",
+    };
+
+    const totalHeader = {
+      displayName: "Total by Quarter",
+      ariaLabel: "Total by Quarter",
+    };
+
+    for (const entity of entities) {
+      const shortName = entity.transitionBenchmarks_targetPopulationName_short;
+      const longName = entity.transitionBenchmarks_targetPopulationName.slice(
+        0,
+        29
+      );
+      const ariaLabel = entity.transitionBenchmarks_targetPopulationName;
+
+      bodyHeaders.push({
+        displayName: shortName ?? longName,
+        ariaLabel: ariaLabel,
+      });
+    }
 
     headers.push(quarterHeader, ...bodyHeaders, totalHeader);
     return headers;
@@ -137,10 +153,19 @@ export const ExportedModalDrawerReportSection = ({
     return displayValue;
   };
 
+  const generateHeaderAriaLabels = () => {
+    let ariaHeaders = getTableHeaders().map((obj) => obj.ariaLabel);
+    return {
+      headRow: [...ariaHeaders],
+    };
+  };
+
   const generateMainTable = () => {
     // create new quarter value array
     let newQuarterValueArray = new Array(...quarterValueArray);
-    let tableHeadersArray = new Array(...getTableHeaders());
+
+    let tableHeadersArray = getTableHeaders().map((obj) => obj.displayName);
+
     {
       overflow === true ? tableHeadersArray.pop() : null;
     }
@@ -206,7 +231,7 @@ export const ExportedModalDrawerReportSection = ({
     let overflowQuarterValueArray = newQuarterValueArray.filter(
       (arr: string[]) => newQuarterValueArray.indexOf(arr) > 5
     );
-    let tableHeadersArray = new Array(...getTableHeaders());
+    let tableHeadersArray = getTableHeaders().map((obj) => obj.displayName);
 
     const formatBodyRow = () => {
       let bodyRows = [];
@@ -245,6 +270,7 @@ export const ExportedModalDrawerReportSection = ({
     const formatOverflowTableHeaders = () => {
       const overflowTableHeadersArray = [];
       overflowTableHeadersArray.push(tableHeadersArray[0]);
+
       tableHeadersArray.find((arr) => {
         if (tableHeadersArray.indexOf(arr) > 6) {
           overflowTableHeadersArray.push(arr);
@@ -294,7 +320,11 @@ export const ExportedModalDrawerReportSection = ({
         </>
       )}
       <Box sx={overflow ? sx.overflowStyles : {}}>
-        <Table sx={sx.table} content={generateMainTable()}></Table>
+        <Table
+          sx={sx.table}
+          content={generateMainTable()}
+          ariaOverride={generateHeaderAriaLabels()}
+        ></Table>
         {overflow && (
           <Table sx={sx.table} content={generateOverflowTable()}></Table>
         )}