Add 508 compliance with aria description and patters to pie charts

cisagov · Jun 27, 2024 · d769f38 · d769f38
1 parent f301f4f
commit d769f38
Show file tree

Hide file tree

Showing 3 changed files with 429 additions and 195 deletions.
diff --git a/frontend/src/pages/Risk/Risk.tsx b/frontend/src/pages/Risk/Risk.tsx
@@ -6,7 +6,12 @@ import TopVulnerablePorts from './TopVulnerablePorts';
 import TopVulnerableDomains from './TopVulnerableDomains';
 import VulnerabilityPieChart from './VulnerabilityPieChart';
 import * as RiskStyles from './style';
-import { getSeverityColor, offsets, severities } from './utils';
+import {
+  getSeverityColor,
+  getServicesColor,
+  offsets,
+  severities
+} from './utils';
 import { useAuthContext } from 'context';
 import { geoCentroid } from 'd3-geo';
 import {
@@ -75,7 +80,7 @@ const Risk: React.FC = (props) => {
 
   const geoStateUrl = 'https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json';
 
-  const allColors = ['rgb(0, 111, 162)', 'rgb(0, 185, 227)'];
+  // const allColors = ['rgb(0, 111, 162)', 'rgb(0, 185, 227)'];
 
   const fetchStats = useCallback(
     async (orgId?: string) => {
@@ -272,7 +277,8 @@ const Risk: React.FC = (props) => {
                 <VulnerabilityPieChart
                   title={'Most Common Services'}
                   data={stats.domains.services}
-                  colors={allColors}
+                  // colors={allColors}
+                  colors={getServicesColor}
                   type={'services'}
                 />
               )}