Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Format aria labels for PDF table headers #652

Merged
merged 2 commits into from
Jun 21, 2024
Merged

Format aria labels for PDF table headers #652

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3e9389b
Format aria labels for PDF table headers
jessabean Jun 6, 2024
dc26bd2
Add test
jessabean Jun 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions services/ui-src/src/components/export/ExportedModalDrawerReportSection.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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", () => {
Expand Down
52 changes: 41 additions & 11 deletions services/ui-src/src/components/export/ExportedModalDrawerReportSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 = [];
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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>
)}
Expand Down