Merge pull request #270 from CBIIT/CRDCDH-633

CRDCDH-633 508 Compliance Audit (v2)
CBIIT · Jan 25, 2024 · 04fe26e · 04fe26e
2 parents f9ac8e8 + 22ee422
commit 04fe26e
Show file tree

Hide file tree

Showing 34 changed files with 155 additions and 119 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,13 +6,6 @@ import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import routeConfig from "./router";
 import StyledNotistackAlerts from './components/StyledNotistackAlerts';
 
-declare module '@mui/material/styles' {
-  interface PaletteOptions {
-    Rejected: PaletteOptions['primary'];
-    Approved: PaletteOptions['primary'] & PaletteOptions['secondary'];
-  }
-}
-
 const theme = createTheme({
   typography: {
     fontFamily: "'Nunito', sans-serif",
@@ -26,17 +19,6 @@ const theme = createTheme({
       xl: 1440,
     }
   },
-  palette: {
-    Rejected: {
-      main: "#E25C22",
-      contrastText: "#FFDBCB",
-    },
-    Approved: {
-      main: "#0B7F99",
-      contrastText: "#CDEAF0",
-      light: "#10EBA9",
-    }
-  },
 });
 
 const router = createBrowserRouter(routeConfig);

diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
@@ -51,6 +51,11 @@ const StyledWrapper = styled('div')({
   },
 });
 
+const removeAriaHidden = () => {
+  const elements = document.querySelectorAll(".react-multi-carousel-item");
+  elements.forEach((e) => e.removeAttribute("aria-hidden"));
+};
+
 /**
  * Provides a general carousel component for displaying multiple items
  * at the same time.
@@ -68,6 +73,7 @@ const ContentCarousel: FC<Props> = ({ children, ...props }: Props) => (
       centerMode
       arrows
       focusOnSelect
+      afterChange={removeAriaHidden}
       {...props}
     >
       {children}

diff --git a/src/components/DataSubmissions/DataSubmissionSummary.tsx b/src/components/DataSubmissions/DataSubmissionSummary.tsx
@@ -22,7 +22,7 @@ const StyledSummaryWrapper = styled("div")(() => ({
 }));
 
 const StyledSubmissionTitle = styled(Typography)(() => ({
-  color: "#1D91AB",
+  color: "#187A90",
   fontFamily: "'Nunito Sans', 'Rubik', sans-serif",
   fontSize: "13px",
   fontStyle: "normal",

diff --git a/src/components/DataSubmissions/GenericTable.tsx b/src/components/DataSubmissions/GenericTable.tsx
@@ -38,7 +38,7 @@ const StyledTableContainer = styled(TableContainer)({
 });
 
 const StyledTableHead = styled(TableHead)({
-  background: "#5C8FA7",
+  background: "#4D7C8F",
 });
 
 const StyledTableRow = styled(TableRow)({
@@ -302,7 +302,7 @@ const GenericTable = <T,>({
                   variant="h6"
                   align="center"
                   fontSize={18}
-                  color="#AAA"
+                  color="#757575"
                 >
                   {noContentText || "No existing data was found"}
                 </Typography>

diff --git a/src/components/DataSubmissions/RadioInput.tsx b/src/components/DataSubmissions/RadioInput.tsx
@@ -56,7 +56,7 @@ const StyledFormLabel = styled("label")(() => ({
 
 const StyledAsterisk = styled("span")(() => ({
   marginRight: "2px",
-  color: "#D54309",
+  color: "#C93F08",
 }));
 
 const StyledFormControlLabel = styled(FormControlLabel)(() => ({

diff --git a/src/components/DataSubmissions/ValidationStatistics.tsx b/src/components/DataSubmissions/ValidationStatistics.tsx
@@ -82,7 +82,7 @@ const StyledPrimaryTitle = styled(Typography)({
   fontSize: "13px",
   fontWeight: 600,
   textTransform: "uppercase",
-  color: "#1D91AB",
+  color: "#187A90",
 });
 
 const StyledSecondaryStack = styled(Stack)({
@@ -96,7 +96,7 @@ const StyledSecondaryTitle = styled(Typography)({
   fontSize: "13px",
   fontWeight: 600,
   textTransform: "uppercase",
-  color: "#1D91AB",
+  color: "#187A90",
 });
 
 const defaultFilters: LegendFilter[] = [

diff --git a/src/components/NodeChart/index.test.tsx b/src/components/NodeChart/index.test.tsx
@@ -0,0 +1,18 @@
+import 'jest-axe/extend-expect';
+
+import { axe } from 'jest-axe';
+import { render } from '@testing-library/react';
+import NodeChart from './index';
+
+it('should not have any accessibility violations', async () => {
+  const data = [
+    { label: 'Test1', value: 50, color: '#000000' },
+    { label: 'Test2', value: 25, color: '#ffffff' },
+    { label: 'Test3', value: 25, color: '#3b3b3b' },
+  ];
+  const { container } = render(<NodeChart label="Test Chart" centerCount={3} data={data} />);
+
+  const results = await axe(container);
+
+  expect(results).toHaveNoViolations();
+});
diff --git a/src/components/NodeChart/index.tsx b/src/components/NodeChart/index.tsx
@@ -72,6 +72,7 @@ const NodeChart: FC<Props> = ({ label, centerCount, data }: Props) => {
           innerRadius={40}
           fill="#f2f2f2"
           isAnimationActive={false}
+          aria-label={`${label} chart background`}
         >
           {(dataset.length === 0 && hoveredSlice === null) && <Label position="center" content={(<PieChartCenter title="Total" value={0} />)} />}
         </Pie>
@@ -85,6 +86,7 @@ const NodeChart: FC<Props> = ({ label, centerCount, data }: Props) => {
           innerRadius={40}
           onMouseOver={onMouseOver}
           onMouseLeave={onMouseLeave}
+          aria-label={`${label} chart`}
         >
           {dataset.map(({ label, color }) => (<Cell key={label} fill={color} />))}
           <Label

diff --git a/src/components/NodeTotalChart/index.tsx b/src/components/NodeTotalChart/index.tsx
@@ -52,6 +52,7 @@ const NodeTotalChart: FC<Props> = ({ data }) => {
           outerRadius={391 / 2}
           fill="#f2f2f2"
           isAnimationActive={false}
+          aria-label="Node Total background"
         >
           {(dataset.length === 0 && activeIndex === null) && <Label position="center" content={(<PieChartCenter title="Total" value={0} />)} />}
         </Pie>
@@ -67,6 +68,7 @@ const NodeTotalChart: FC<Props> = ({ data }) => {
           onMouseLeave={onMouseLeave}
           activeShape={ActiveArc}
           activeIndex={activeIndex}
+          aria-label="Node Total chart"
         >
           {dataset.map(({ label, color }) => (<Cell key={label} fill={color} />))}
           <Label

diff --git a/src/components/Questionnaire/AutocompleteInput.tsx b/src/components/Questionnaire/AutocompleteInput.tsx
@@ -92,7 +92,7 @@ const StyledFormLabel = styled("label")(() => ({
 }));
 
 const StyledAsterisk = styled("span")(() => ({
-  color: "#D54309",
+  color: "#C93F08",
   marginLeft: "2px",
 }));
 

diff --git a/src/components/Questionnaire/CheckboxInput.tsx b/src/components/Questionnaire/CheckboxInput.tsx
@@ -37,7 +37,7 @@ const StyledFormControl = styled(FormControl)(() => ({
 }));
 
 const StyledAsterisk = styled("span")(() => ({
-  color: "#D54309",
+  color: "#C93F08",
   marginLeft: "2px",
 }));
 

diff --git a/src/components/Questionnaire/DatePickerInput.tsx b/src/components/Questionnaire/DatePickerInput.tsx
@@ -41,7 +41,7 @@ const StyledFormControl = styled(FormControl)(() => ({
 }));
 
 const StyledAsterisk = styled("span")(() => ({
-  color: "#D54309",
+  color: "#C93F08",
   marginLeft: "2px",
 }));
 

diff --git a/src/components/Questionnaire/FormGroupCheckbox.tsx b/src/components/Questionnaire/FormGroupCheckbox.tsx
@@ -23,7 +23,7 @@ const StyledFormLabel = styled("label")(({ theme }) => ({
 }));
 
 const StyledAsterisk = styled("span")(() => ({
-  color: "#D54309",
+  color: "#C93F08",
   marginLeft: "2px",
 }));
 

diff --git a/src/components/Questionnaire/RadioYesNoInput.tsx b/src/components/Questionnaire/RadioYesNoInput.tsx
@@ -55,7 +55,7 @@ const StyledFormLabel = styled("label")(() => ({
 
 const StyledAsterisk = styled("span")(() => ({
   marginLeft: "2px",
-  color: "#D54309",
+  color: "#C93F08",
 }));
 
 type Props = {

diff --git a/src/components/Questionnaire/SectionGroup.tsx b/src/components/Questionnaire/SectionGroup.tsx
@@ -57,11 +57,11 @@ const StyledBeginAdornment = styled(Box)({
 });
 
 const StyledAsterisk = styled('span')({
-    color: "#D54309",
+    color: "#C93F08",
     marginLeft: "2px",
 });
 const StyledError = styled('div')({
-  color: "#D54309",
+  color: "#C93F08",
   textTransform: "none",
   fontFamily: 'Nunito',
   fontWeight: '400',

diff --git a/src/components/Questionnaire/SelectInput.tsx b/src/components/Questionnaire/SelectInput.tsx
@@ -46,7 +46,7 @@ const GridItem = styled(Grid)(() => ({
 }));
 
 const StyledAsterisk = styled("span")(() => ({
-  color: "#D54309",
+  color: "#C93F08",
   marginLeft: "2px",
 }));
 

diff --git a/src/components/Questionnaire/SwitchInput.tsx b/src/components/Questionnaire/SwitchInput.tsx
@@ -59,7 +59,7 @@ const GridStyled = styled(Grid)({
     fontWeight: 600,
     fontSize: "16px",
     lineHeight: "22px",
-    color: "#89A2A7",
+    color: "#5D7B7E",
     marginLeft: "6px",
     marginRight: "6px",
   },
@@ -78,7 +78,7 @@ const GridStyled = styled(Grid)({
     display: "none",
   },
   "& .asterisk": {
-    color: "#D54309",
+    color: "#C93F08",
     marginLeft: "2px",
   },
   "& .labelContainer": {

diff --git a/src/components/Questionnaire/TableFileTypeAndExtensionInput.tsx b/src/components/Questionnaire/TableFileTypeAndExtensionInput.tsx
@@ -38,7 +38,7 @@ const StyledTooltip = styled((props: TooltipProps) => (
 ))(() => ({
   "& .MuiTooltip-tooltip": {
     marginTop: "4px !important",
-    color: "#D54309",
+    color: "#C93F08",
     background: "#FFFFFF",
     border: "1px solid #2B528B",
   },

diff --git a/src/components/Questionnaire/TableTextInput.tsx b/src/components/Questionnaire/TableTextInput.tsx
@@ -22,7 +22,7 @@ const StyledTooltip = styled((props: TooltipProps) => (
   <Tooltip classes={{ popper: props.className }} {...props} />
 ))(() => ({
   "& .MuiTooltip-tooltip": {
-    color: "#D54309",
+    color: "#C93F08",
     background: "#FFFFFF",
     border: "1px solid #2B528B",
   },

diff --git a/src/components/Questionnaire/TextInput.tsx b/src/components/Questionnaire/TextInput.tsx
@@ -38,7 +38,7 @@ const StyledLabel = styled("label")(() => ({
 }));
 
 const StyledAsterisk = styled("span")(() => ({
-  color: "#D54309",
+  color: "#C93F08",
   marginLeft: "2px",
 }));
 

diff --git a/src/components/Shared/HistoryDialog.tsx b/src/components/Shared/HistoryDialog.tsx
@@ -36,7 +36,7 @@ const StyledDialogTitle = styled(DialogTitle)({
 });
 
 const StyledPreTitle = styled("p")({
-  color: "#98A7C6",
+  color: "#D5DAE7",
   fontSize: "13px",
   fontFamily: "Nunito Sans",
   lineHeight: "27px",

diff --git a/src/components/StatusBar/StatusBar.test.tsx b/src/components/StatusBar/StatusBar.test.tsx
@@ -94,7 +94,7 @@ describe("StatusBar > General Tests", () => {
   });
 
   // NOTE: We aren't using the root level reviewComment attribute, only the history level ones
-  // So we're testing against it's usage here
+  // So we're testing AGAINST it's usage here
   it("does not render the comments button for the Application.reviewComment attribute", () => {
     const data = {
       reviewComment: "This is a review comment",

diff --git a/src/components/StatusBar/components/HistorySection.tsx b/src/components/StatusBar/components/HistorySection.tsx
@@ -1,4 +1,4 @@
-import { FC, useMemo, useState } from "react";
+import { CSSProperties, FC, useMemo, useState } from "react";
 import {
   Avatar,
   Button,
@@ -21,6 +21,23 @@ import { useFormContext } from "../../Contexts/FormContext";
 import { HistoryIconMap } from "../../../assets/history/submissionRequest";
 import { FormatDate, SortHistory } from "../../../utils";
 
+/**
+ * Determines the text color for a History event based
+ *
+ * @param status The current Questionnaire's status
+ * @returns Color scheme to match the status
+ */
+const getStatusColor = (status: ApplicationStatus): CSSProperties["color"] => {
+  switch (status) {
+    case "Approved":
+      return "#10EBA9";
+    case "Rejected":
+      return "#E25C22";
+    default:
+      return "#fff";
+  }
+};
+
 const StyledDate = styled("span")({
   fontWeight: "600",
   fontSize: "16px",
@@ -59,7 +76,7 @@ const StyledDialogTitle = styled(DialogTitle)({
 });
 
 const StyledPreTitle = styled("p")({
-  color: "#98A7C6",
+  color: "#D5DAE7",
   fontSize: "13px",
   fontFamily: "Nunito Sans",
   lineHeight: "27px",
@@ -168,17 +185,12 @@ const StyledTimelineContent = styled(TimelineContent)({
   color: "#fff",
 });
 
-const StyledTypography = styled(Typography)<{ status?: ApplicationStatus }>(
-  ({ theme, status }) => ({
-    lineHeight: "2.5",
-    minWidth: "100px",
-    textAlign: "left",
-    color:
-      (status
-        ? theme.palette?.[status]?.light || theme.palette?.[status]?.main
-        : "#fff") || "#fff",
-  })
-);
+const StyledTypography = styled(Typography)<{ status?: ApplicationStatus }>(({ status }) => ({
+  lineHeight: "2.5",
+  minWidth: "100px",
+  textAlign: "left",
+  color: getStatusColor(status),
+}));
 
 const StyledAvatar = styled(Avatar)({
   background: "transparent",