diff --git a/services/ui-src/src/components/tables/Table.tsx b/services/ui-src/src/components/tables/Table.tsx index 25c02d85a..fe9412695 100644 --- a/services/ui-src/src/components/tables/Table.tsx +++ b/services/ui-src/src/components/tables/Table.tsx @@ -13,7 +13,11 @@ import { // utils import { sanitizeAndParseHtml } from "utils"; // types -import { AnyObject, TableContentShape } from "types"; +import { + AnyObject, + ScreenReaderOnlyHeaderName, + TableContentShape, +} from "types"; export const Table = ({ content, @@ -37,15 +41,26 @@ export const Table = ({ {/* Head Row */} - {content.headRow.map((headerCell: string, index: number) => ( - - {sanitizeAndParseHtml(headerCell)} - - ))} + {content.headRow.map( + ( + headerCell: string | ScreenReaderOnlyHeaderName, + index: number + ) => ( + + {typeof headerCell === "object" ? ( + + {sanitizeAndParseHtml(headerCell.hiddenName)} + + ) : ( + sanitizeAndParseHtml(headerCell) + )} + + ) + )} )} diff --git a/services/ui-src/src/types/other.ts b/services/ui-src/src/types/other.ts index 442f1d229..c1691222c 100644 --- a/services/ui-src/src/types/other.ts +++ b/services/ui-src/src/types/other.ts @@ -42,9 +42,13 @@ export interface InputChangeEvent extends React.ChangeEvent {} export type { IconType } from "react-icons"; +export interface ScreenReaderOnlyHeaderName { + hiddenName: string; +} + export interface TableContentShape { caption?: string; - headRow?: string[]; + headRow?: Array; bodyRows?: string[][]; } diff --git a/services/ui-src/src/verbiage/pages/accordion.ts b/services/ui-src/src/verbiage/pages/accordion.ts index 7af3f2b9c..1057651fa 100644 --- a/services/ui-src/src/verbiage/pages/accordion.ts +++ b/services/ui-src/src/verbiage/pages/accordion.ts @@ -14,7 +14,7 @@ export default { props: { href: "https://www.ecfr.gov/current/title-42/chapter-IV/subchapter-C/part-438/subpart-B/section-438.74", target: "_blank", - ariaLabel: "Link opens in new tab", + "aria-label": "42 CFR § 438.74 (link opens in new tab)", }, }, { @@ -29,7 +29,7 @@ export default { props: { href: "https://www.ecfr.gov/current/title-42/chapter-IV/subchapter-C/part-438/subpart-A/section-438.8#p-438.8(k)", target: "_blank", - ariaLabel: "Link opens in new tab", + "aria-label": "42 CFR § 438.8(k) (link opens in new tab)", }, }, { @@ -40,11 +40,12 @@ export default { }, { type: "externalLink", - content: "Learn more", + content: "Learn more about the Medical Loss Ratio report", props: { href: "https://www.medicaid.gov/medicaid/managed-care/guidance/medicaid-and-chip-managed-care-reporting/index.html#MLR", target: "_blank", - ariaLabel: "Link opens in new tab", + "aria-label": + "Learn more about the Medical Loss Ratio report (link opens in new tab)", }, }, { @@ -74,7 +75,7 @@ export default { props: { href: "https://www.ecfr.gov/current/title-42/chapter-IV/subchapter-C/part-438/subpart-B/section-438.74", target: "_blank", - ariaLabel: "Link opens in new tab", + "aria-label": "42 CFR § 438.74 (link opens in new tab)", }, }, { @@ -89,7 +90,7 @@ export default { props: { href: "https://www.ecfr.gov/current/title-42/chapter-IV/subchapter-C/part-438/subpart-A/section-438.8#p-438.8(k)", target: "_blank", - ariaLabel: "Link opens in new tab", + "aria-label": "42 CFR § 438.8(k) (link opens in new tab)", }, }, { @@ -100,11 +101,12 @@ export default { }, { type: "externalLink", - content: "Learn more", + content: "Learn more about the Medical Loss Ratio report", props: { href: "https://www.medicaid.gov/medicaid/managed-care/guidance/medicaid-and-chip-managed-care-reporting/index.html#MLR", target: "_blank", - ariaLabel: "Link opens in new tab", + "aria-label": + "Learn more about the Medical Loss Ratio report (link opens in new tab)", }, }, { @@ -131,7 +133,7 @@ export default { props: { href: "https://www.ecfr.gov/current/title-42/chapter-IV/subchapter-C/part-438/subpart-A/section-438.8#p-438.8(k)", target: "_blank", - ariaLabel: "Link opens in new tab", + "aria-label": "42 CFR § 438.8(k) (link opens in new tab)", }, }, { @@ -146,7 +148,7 @@ export default { props: { href: "https://www.ecfr.gov/current/title-42/chapter-IV/subchapter-C/part-438/subpart-A/section-438.8#p-438.8(l)", target: "_blank", - ariaLabel: "Link opens in new tab", + "aria-label": "42 CFR § 438.8(l) (link opens in new tab)", }, }, { @@ -174,7 +176,8 @@ export default { props: { href: "https://www.medicaid.gov/federal-policy-guidance/downloads/cib073117.pdf", target: "_blank", - ariaLabel: "Link opens in new tab", + "aria-label": + "CMCS Informational Bulletin dated July 31, 2017 (link opens in new tab)", }, }, { diff --git a/services/ui-src/src/verbiage/pages/mcpar/mcpar-dashboard-without-yoy.ts b/services/ui-src/src/verbiage/pages/mcpar/mcpar-dashboard-without-yoy.ts index bff3819d3..1e6861327 100644 --- a/services/ui-src/src/verbiage/pages/mcpar/mcpar-dashboard-without-yoy.ts +++ b/services/ui-src/src/verbiage/pages/mcpar/mcpar-dashboard-without-yoy.ts @@ -18,7 +18,7 @@ export default { props: { href: "https://www.medicaid.gov/medicaid/managed-care/guidance/medicaid-and-chip-managed-care-reporting/index.html#AMCPR", target: "_blank", - "aria-label": "Learn more (link opens in new tab).", + "aria-label": "Learn more (link opens in new tab)", }, }, ], diff --git a/services/ui-src/src/verbiage/pages/mcpar/mcpar-dashboard.ts b/services/ui-src/src/verbiage/pages/mcpar/mcpar-dashboard.ts index c5af4e1f0..d1e776bc3 100644 --- a/services/ui-src/src/verbiage/pages/mcpar/mcpar-dashboard.ts +++ b/services/ui-src/src/verbiage/pages/mcpar/mcpar-dashboard.ts @@ -18,7 +18,7 @@ export default { props: { href: "https://www.medicaid.gov/medicaid/managed-care/guidance/medicaid-and-chip-managed-care-reporting/index.html#AMCPR", target: "_blank", - "aria-label": "Learn more (link opens in new tab).", + "aria-label": "Learn more (link opens in new tab)", }, }, ], @@ -27,13 +27,13 @@ export default { table: { caption: "MCPAR Programs", headRow: [ - "", + { hiddenName: "Edit report name and details" }, "Program name", "Due date", "Last edited", "Edited by", "Status", - "", + { hiddenName: "Actions" }, ], }, empty: diff --git a/services/ui-src/src/verbiage/pages/mcpar/mcpar-review-and-submit.ts b/services/ui-src/src/verbiage/pages/mcpar/mcpar-review-and-submit.ts index 17c5a3d5f..24e028e5f 100644 --- a/services/ui-src/src/verbiage/pages/mcpar/mcpar-review-and-submit.ts +++ b/services/ui-src/src/verbiage/pages/mcpar/mcpar-review-and-submit.ts @@ -11,7 +11,7 @@ export default { info: "Double check that everything in your MCPAR Report is accurate. You will be able to make edits after submitting, and resubmit. Once you’ve reviewed your report, certify that it’s in compliance with 42 CFR § 438.66(e).", }, table: { - headRow: ["Section", "Status", ""], + headRow: ["Section", "Status", { hiddenName: "Actions" }], }, modal: { structure: { diff --git a/services/ui-src/src/verbiage/pages/mlr/mlr-dashboard.ts b/services/ui-src/src/verbiage/pages/mlr/mlr-dashboard.ts index 56a790c4b..f324cacd5 100644 --- a/services/ui-src/src/verbiage/pages/mlr/mlr-dashboard.ts +++ b/services/ui-src/src/verbiage/pages/mlr/mlr-dashboard.ts @@ -17,13 +17,13 @@ export default { table: { caption: "MLR Submissions", headRow: [ - "", + { hiddenName: "Edit report name" }, "Submission name", "Last edited", "Edited by", "Status", "#", - "", + { hiddenName: "Actions" }, ], }, empty: diff --git a/services/ui-src/src/verbiage/pages/mlr/mlr-review-and-submit.ts b/services/ui-src/src/verbiage/pages/mlr/mlr-review-and-submit.ts index a3c39364c..296184024 100644 --- a/services/ui-src/src/verbiage/pages/mlr/mlr-review-and-submit.ts +++ b/services/ui-src/src/verbiage/pages/mlr/mlr-review-and-submit.ts @@ -21,7 +21,7 @@ export default { props: { href: "https://www.ecfr.gov/current/title-42/chapter-IV/subchapter-C/part-438/subpart-B/section-438.74", target: "_blank", - ariaLabel: "Link opens in new tab", + "aria-label": "42 CFR § 438.74 (link opens in new tab)", }, }, { @@ -31,6 +31,9 @@ export default { }, ], }, + table: { + headRow: ["Section", "Status", { hiddenName: "Actions" }], + }, modal: { structure: { heading: "Are you sure you want to submit MLR?",