Merge pull request #2364 from HHS/main

[Prod] Fix modal validation announcements

frontend/src/components/CloseSuspendReasonModal.js

@@ -72,10 +72,10 @@ const CloseSuspendReasonModal = ({
         >
           <FormGroup error={showValidationError} className="margin-top-0">
             <Fieldset>
-              {showValidationError ? <ErrorMessage>{`Please select a reason for ${reasonDisplayStatus} goal.`}</ErrorMessage> : null}
-              {
-                generateReasonRadioButtons()
-              }
+              <ErrorMessage>
+                { showValidationError ? `Please select a reason for ${reasonDisplayStatus} goal.` : ''}
+              </ErrorMessage>
+              {generateReasonRadioButtons()}
             </Fieldset>
           </FormGroup>
           <FormGroup>

frontend/src/components/GoalCards/ObjectiveCard.js

@@ -12,7 +12,6 @@ import { updateObjectiveStatus } from '../../fetchers/objective';
 import ObjectiveSuspendModal from '../ObjectiveSuspendModal';
 import colors from '../../colors';
 import './ObjectiveCard.css';
-import { ERROR_FORMAT } from '../../pages/ActivityReport/Pages/components/constants';
 
 function ObjectiveCard({
   objective,
@@ -99,9 +98,6 @@ function ObjectiveCard({
     await onChangeStatus(newStatus);
   };
 
-  const suspendError = suspendReasonError ? (
-    ERROR_FORMAT('Select a reason for suspension')) : <></>;
-
   const modalIdentifier = uniqueId('objective-suspend-identifier-');
 
   return (
@@ -188,7 +184,7 @@ function ObjectiveCard({
         onChangeSuspendContext={(e) => setLocalCloseSuspendContext(e.target.value)}
         onChangeStatus={onChangeStatus}
         setError={setSuspendReasonError}
-        error={suspendError}
+        error={suspendReasonError}
       />
       )}
     </>

frontend/src/components/ObjectiveSuspendModal.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { GOAL_SUSPEND_REASONS } from '@ttahub/common';
 import {
   Textarea, Fieldset, Label, FormGroup, Button, Radio, ModalToggleButton,
+  ErrorMessage,
 } from '@trussworks/react-uswds';
 import VanillaModal from './VanillaModal';
 
@@ -23,7 +24,9 @@ export default function ObjectiveSuspendModal({
 }) {
   const onClick = () => {
     if (!objectiveSuspendReason) {
-      setError(true);
+      setError({
+        message: 'Reason for suspension is required',
+      });
       return;
     }
 
@@ -46,11 +49,13 @@ export default function ObjectiveSuspendModal({
       modalRef={modalRef}
     >
       <Fieldset>
-        <FormGroup error={error.props.children}>
+        <FormGroup error={!!(error)}>
           <Label className="usa-sr-only" htmlFor={`suspend-objective-${objectiveId}-reason`}>
             Reason for suspension
           </Label>
-          { error }
+          <ErrorMessage>
+            { error ? error.message : ''}
+          </ErrorMessage>
           { SUSPEND_REASONS.map((r) => (
             <Radio
               id={`suspend-objective-${objectiveId}-reason-${r.trim().replace(' ', '-').toLowerCase()}`}

frontend/src/components/ReopenReasonModal.js

@@ -8,7 +8,10 @@ import {
 import Modal from './Modal';
 
 const ReopenReasonModal = ({
-  modalRef, goalId, onSubmit, resetValues,
+  modalRef,
+  goalId,
+  onSubmit,
+  resetValues,
 }) => {
   const [reopenReason, setReopenReason] = useState('');
   const [reopenContext, setReopenContext] = useState('');

frontend/src/components/SiteNavDisclosureGroup.css

@@ -1,3 +1,8 @@
+/** hide the left arrows on safari **/
+.ttahub-site-nav--disclosure-group summary::-webkit-details-marker {
+  display: none;
+}
+
 .ttahub-site-nav--disclosure-group summary {
   box-sizing: border-box;
   cursor: pointer;

frontend/src/pages/ActivityReport/Pages/components/Objective.js

@@ -444,9 +444,7 @@ export default function Objective({
         onChangeSuspendContext={onChangeSuspendContext}
         onChangeStatus={onChangeStatus}
         setError={setStatusReasonError}
-        error={errors.closeSuspendReason
-          ? ERROR_FORMAT(errors.closeSuspendReason.message)
-          : NO_ERROR}
+        error={errors.closeSuspendReason}
       />
 
       <ObjectiveStatus

frontend/src/pages/ActivityReport/__tests__/index.js

@@ -1174,7 +1174,8 @@ describe('ActivityReport', () => {
     });
 
     const errors = document.querySelectorAll('.usa-error-message');
-    expect(errors.length).toBe(0);
+    expect(errors.length).toBe(1);
+    // they'll be one at least (objective suspend reason modal error sits in the dom at all times)
 
     await waitFor(() => {
       expect(fetchMock.called('/api/activity-reports/1', { method: 'PUT' })).toBe(true);

frontend/src/widgets/GoalStatusGraph.js

@@ -37,8 +37,8 @@ function Bar({
   };
 
   return (
-    <div className="ttahub-goal-bar-container display-flex flex-justify flex-1">
-      <div className="ttahub-goal-bar height-3 bg-base-lightest width-full" aria-hidden="true">
+    <div className="ttahub-goal-bar-container display-flex flex-justify flex-1" aria-hidden="true">
+      <div className="ttahub-goal-bar height-3 bg-base-lightest width-full">
         <div className="ttahub-goal-bar-color height-full width-full" style={style} />
       </div>
     </div>
@@ -82,6 +82,7 @@ export function GoalStatusChart({ data, loading }) {
       color: STATUS_COLORS[index],
       count: data[status],
       total: data.total,
+      readableRatio: `${data[status]} of ${data.total} goals`,
     }));
 
     setBars(newBars);
@@ -157,13 +158,14 @@ export function GoalStatusChart({ data, loading }) {
               </p>
               <div className="display-flex flex-justify">
                 <div>
-                  {bars.map(({ label }) => (
+                  {bars.map(({ label, readableRatio }) => (
                     <div key={label} className="display-flex height-6 margin-right-1">
                       <span>{label}</span>
+                      <span className="usa-sr-only">{readableRatio}</span>
                     </div>
                   ))}
                 </div>
-                <div className="flex-1">
+                <div className="flex-1" aria-hidden="true">
                   {bars.map(({ label, percentage, color }) => (
                     <div key={label} className="display-flex height-6">
                       <div className="display-flex width-full" key={color}>
@@ -176,10 +178,10 @@ export function GoalStatusChart({ data, loading }) {
                     </div>
                   ))}
                 </div>
-                <div>
-                  {bars.map(({ label, ratio, readableRatio }) => (
+                <div aria-hidden="true">
+                  {bars.map(({ label, ratio }) => (
                     <div key={label} className="display-flex height-6 margin-left-1">
-                      <span aria-label={readableRatio}>{ratio}</span>
+                      <span>{ratio}</span>
                     </div>
                   ))}
                 </div>

frontend/yarn-audit-known-issues

@@ -3,6 +3,6 @@
 {"type":"auditAdvisory","data":{"resolution":{"id":1097682,"path":"react-scripts>jest>jest-cli>@jest/core>jest-config>jest-runner>jest-environment-jsdom>jsdom>tough-cookie","dev":false,"optional":false,"bundled":false},"advisory":{"findings":[{"version":"4.0.0","paths":["react-scripts>jest>@jest/core>jest-config>jest-environment-jsdom>jsdom>tough-cookie","react-scripts>jest>jest-cli>@jest/core>jest-config>jest-environment-jsdom>jsdom>tough-cookie","react-scripts>jest>jest-cli>@jest/core>jest-config>jest-runner>jest-environment-jsdom>jsdom>tough-cookie"]}],"metadata":null,"vulnerable_versions":"<4.1.3","module_name":"tough-cookie","severity":"moderate","github_advisory_id":"GHSA-72xf-g2v4-qvf3","cves":["CVE-2023-26136"],"access":"public","patched_versions":">=4.1.3","cvss":{"score":6.5,"vectorString":"CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:L/I:L/A:N"},"updated":"2024-06-21T21:33:53.000Z","recommendation":"Upgrade to version 4.1.3 or later","cwe":["CWE-1321"],"found_by":null,"deleted":null,"id":1097682,"references":"- https://nvd.nist.gov/vuln/detail/CVE-2023-26136\n- https://github.com/salesforce/tough-cookie/issues/282\n- https://github.com/salesforce/tough-cookie/commit/12d474791bb856004e858fdb1c47b7608d09cf6e\n- https://github.com/salesforce/tough-cookie/releases/tag/v4.1.3\n- https://security.snyk.io/vuln/SNYK-JS-TOUGHCOOKIE-5672873\n- https://lists.debian.org/debian-lts-announce/2023/07/msg00010.html\n- https://lists.fedoraproject.org/archives/list/[email protected]/message/3HUE6ZR5SL73KHL7XUPAOEL6SB7HUDT2\n- https://lists.fedoraproject.org/archives/list/[email protected]/message/6PVVPNSAGSDS63HQ74PJ7MZ3MU5IYNVZ\n- https://security.netapp.com/advisory/ntap-20240621-0006\n- https://github.com/advisories/GHSA-72xf-g2v4-qvf3","created":"2023-07-01T06:30:16.000Z","reported_by":null,"title":"tough-cookie Prototype Pollution vulnerability","npm_advisory_id":null,"overview":"Versions of the package tough-cookie before 4.1.3 are vulnerable to Prototype Pollution due to improper handling of Cookies when using CookieJar in `rejectPublicSuffixes=false` mode. This issue arises from the manner in which the objects are initialized.","url":"https://github.com/advisories/GHSA-72xf-g2v4-qvf3"}}}
 {"type":"auditAdvisory","data":{"resolution":{"id":1099520,"path":"react-scripts>webpack-dev-server>express>body-parser","dev":false,"optional":false,"bundled":false},"advisory":{"findings":[{"version":"1.20.2","paths":["react-scripts>webpack-dev-server>express>body-parser"]}],"metadata":null,"vulnerable_versions":"<1.20.3","module_name":"body-parser","severity":"high","github_advisory_id":"GHSA-qwcr-r2fm-qrc7","cves":["CVE-2024-45590"],"access":"public","patched_versions":">=1.20.3","cvss":{"score":7.5,"vectorString":"CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:N/I:N/A:H"},"updated":"2024-09-10T19:01:11.000Z","recommendation":"Upgrade to version 1.20.3 or later","cwe":["CWE-405"],"found_by":null,"deleted":null,"id":1099520,"references":"- https://github.com/expressjs/body-parser/security/advisories/GHSA-qwcr-r2fm-qrc7\n- https://github.com/expressjs/body-parser/commit/b2695c4450f06ba3b0ccf48d872a229bb41c9bce\n- https://nvd.nist.gov/vuln/detail/CVE-2024-45590\n- https://github.com/advisories/GHSA-qwcr-r2fm-qrc7","created":"2024-09-10T15:52:39.000Z","reported_by":null,"title":"body-parser vulnerable to denial of service when url encoding is enabled","npm_advisory_id":null,"overview":"### Impact\n\nbody-parser <1.20.3 is vulnerable to denial of service when url encoding is enabled. A malicious actor using a specially crafted payload could flood the server with a large number of requests, resulting in denial of service.\n\n### Patches\n\nthis issue is patched in 1.20.3\n\n### References\n","url":"https://github.com/advisories/GHSA-qwcr-r2fm-qrc7"}}}
 {"type":"auditAdvisory","data":{"resolution":{"id":1099525,"path":"react-scripts>webpack-dev-server>express>send","dev":false,"optional":false,"bundled":false},"advisory":{"findings":[{"version":"0.18.0","paths":["react-scripts>webpack-dev-server>express>send","react-scripts>webpack-dev-server>express>serve-static>send"]}],"metadata":null,"vulnerable_versions":"<0.19.0","module_name":"send","severity":"moderate","github_advisory_id":"GHSA-m6fv-jmcg-4jfg","cves":["CVE-2024-43799"],"access":"public","patched_versions":">=0.19.0","cvss":{"score":5,"vectorString":"CVSS:3.1/AV:N/AC:H/PR:N/UI:R/S:U/C:L/I:L/A:L"},"updated":"2024-09-10T19:42:42.000Z","recommendation":"Upgrade to version 0.19.0 or later","cwe":["CWE-79"],"found_by":null,"deleted":null,"id":1099525,"references":"- https://github.com/pillarjs/send/security/advisories/GHSA-m6fv-jmcg-4jfg\n- https://nvd.nist.gov/vuln/detail/CVE-2024-43799\n- https://github.com/pillarjs/send/commit/ae4f2989491b392ae2ef3b0015a019770ae65d35\n- https://github.com/advisories/GHSA-m6fv-jmcg-4jfg","created":"2024-09-10T19:42:41.000Z","reported_by":null,"title":"send vulnerable to template injection that can lead to XSS","npm_advisory_id":null,"overview":"### Impact\n\npassing untrusted user input - even after sanitizing it - to `SendStream.redirect()` may execute untrusted code\n\n### Patches\n\nthis issue is patched in send 0.19.0\n\n### Workarounds\n\nusers are encouraged to upgrade to the patched version of express, but otherwise can workaround this issue by making sure any untrusted inputs are safe, ideally by validating them against an explicit allowlist\n\n### Details\n\nsuccessful exploitation of this vector requires the following:\n\n1. The attacker MUST control the input to response.redirect()\n1. express MUST NOT redirect before the template appears\n1. the browser MUST NOT complete redirection before:\n1. the user MUST click on the link in the template\n","url":"https://github.com/advisories/GHSA-m6fv-jmcg-4jfg"}}}
+{"type":"auditAdvisory","data":{"resolution":{"id":1099525,"path":"react-scripts>webpack-dev-server>express>serve-static>send","dev":false,"optional":false,"bundled":false},"advisory":{"findings":[{"version":"0.18.0","paths":["react-scripts>webpack-dev-server>express>send","react-scripts>webpack-dev-server>express>serve-static>send"]}],"metadata":null,"vulnerable_versions":"<0.19.0","module_name":"send","severity":"moderate","github_advisory_id":"GHSA-m6fv-jmcg-4jfg","cves":["CVE-2024-43799"],"access":"public","patched_versions":">=0.19.0","cvss":{"score":5,"vectorString":"CVSS:3.1/AV:N/AC:H/PR:N/UI:R/S:U/C:L/I:L/A:L"},"updated":"2024-09-10T19:42:42.000Z","recommendation":"Upgrade to version 0.19.0 or later","cwe":["CWE-79"],"found_by":null,"deleted":null,"id":1099525,"references":"- https://github.com/pillarjs/send/security/advisories/GHSA-m6fv-jmcg-4jfg\n- https://nvd.nist.gov/vuln/detail/CVE-2024-43799\n- https://github.com/pillarjs/send/commit/ae4f2989491b392ae2ef3b0015a019770ae65d35\n- https://github.com/advisories/GHSA-m6fv-jmcg-4jfg","created":"2024-09-10T19:42:41.000Z","reported_by":null,"title":"send vulnerable to template injection that can lead to XSS","npm_advisory_id":null,"overview":"### Impact\n\npassing untrusted user input - even after sanitizing it - to `SendStream.redirect()` may execute untrusted code\n\n### Patches\n\nthis issue is patched in send 0.19.0\n\n### Workarounds\n\nusers are encouraged to upgrade to the patched version of express, but otherwise can workaround this issue by making sure any untrusted inputs are safe, ideally by validating them against an explicit allowlist\n\n### Details\n\nsuccessful exploitation of this vector requires the following:\n\n1. The attacker MUST control the input to response.redirect()\n1. express MUST NOT redirect before the template appears\n1. the browser MUST NOT complete redirection before:\n1. the user MUST click on the link in the template\n","url":"https://github.com/advisories/GHSA-m6fv-jmcg-4jfg"}}}
 {"type":"auditAdvisory","data":{"resolution":{"id":1099527,"path":"react-scripts>webpack-dev-server>express>serve-static","dev":false,"optional":false,"bundled":false},"advisory":{"findings":[{"version":"1.15.0","paths":["react-scripts>webpack-dev-server>express>serve-static"]}],"metadata":null,"vulnerable_versions":"<1.16.0","module_name":"serve-static","severity":"moderate","github_advisory_id":"GHSA-cm22-4g7w-348p","cves":["CVE-2024-43800"],"access":"public","patched_versions":">=1.16.0","cvss":{"score":5,"vectorString":"CVSS:3.1/AV:N/AC:H/PR:N/UI:R/S:U/C:L/I:L/A:L"},"updated":"2024-09-10T19:42:34.000Z","recommendation":"Upgrade to version 1.16.0 or later","cwe":["CWE-79"],"found_by":null,"deleted":null,"id":1099527,"references":"- https://github.com/expressjs/serve-static/security/advisories/GHSA-cm22-4g7w-348p\n- https://nvd.nist.gov/vuln/detail/CVE-2024-43800\n- https://github.com/expressjs/serve-static/commit/0c11fad159898cdc69fd9ab63269b72468ecaf6b\n- https://github.com/expressjs/serve-static/commit/ce730896fddce1588111d9ef6fdf20896de5c6fa\n- https://github.com/advisories/GHSA-cm22-4g7w-348p","created":"2024-09-10T19:42:33.000Z","reported_by":null,"title":"serve-static vulnerable to template injection that can lead to XSS","npm_advisory_id":null,"overview":"### Impact\n\npassing untrusted user input - even after sanitizing it - to `redirect()` may execute untrusted code\n\n### Patches\n\nthis issue is patched in serve-static 1.16.0\n\n### Workarounds\n\nusers are encouraged to upgrade to the patched version of express, but otherwise can workaround this issue by making sure any untrusted inputs are safe, ideally by validating them against an explicit allowlist\n\n### Details\n\nsuccessful exploitation of this vector requires the following:\n\n1. The attacker MUST control the input to response.redirect()\n1. express MUST NOT redirect before the template appears\n1. the browser MUST NOT complete redirection before:\n1. the user MUST click on the link in the template\n","url":"https://github.com/advisories/GHSA-cm22-4g7w-348p"}}}
 {"type":"auditAdvisory","data":{"resolution":{"id":1099529,"path":"react-scripts>webpack-dev-server>express","dev":false,"optional":false,"bundled":false},"advisory":{"findings":[{"version":"4.19.2","paths":["react-scripts>webpack-dev-server>express"]}],"metadata":null,"vulnerable_versions":"<4.20.0","module_name":"express","severity":"moderate","github_advisory_id":"GHSA-qw6h-vgh9-j6wx","cves":["CVE-2024-43796"],"access":"public","patched_versions":">=4.20.0","cvss":{"score":5,"vectorString":"CVSS:3.1/AV:N/AC:H/PR:N/UI:R/S:U/C:L/I:L/A:L"},"updated":"2024-09-10T19:41:07.000Z","recommendation":"Upgrade to version 4.20.0 or later","cwe":["CWE-79"],"found_by":null,"deleted":null,"id":1099529,"references":"- https://github.com/expressjs/express/security/advisories/GHSA-qw6h-vgh9-j6wx\n- https://nvd.nist.gov/vuln/detail/CVE-2024-43796\n- https://github.com/expressjs/express/commit/54271f69b511fea198471e6ff3400ab805d6b553\n- https://github.com/advisories/GHSA-qw6h-vgh9-j6wx","created":"2024-09-10T19:41:04.000Z","reported_by":null,"title":"express vulnerable to XSS via response.redirect()","npm_advisory_id":null,"overview":"### Impact\n\nIn express <4.20.0, passing untrusted user input - even after sanitizing it - to `response.redirect()` may execute untrusted code\n\n### Patches\n\nthis issue is patched in express 4.20.0\n\n### Workarounds\n\nusers are encouraged to upgrade to the patched version of express, but otherwise can workaround this issue by making sure any untrusted inputs are safe, ideally by validating them against an explicit allowlist\n\n### Details\n\nsuccessful exploitation of this vector requires the following:\n\n1. The attacker MUST control the input to response.redirect()\n1. express MUST NOT redirect before the template appears\n1. the browser MUST NOT complete redirection before:\n1. the user MUST click on the link in the template\n","url":"https://github.com/advisories/GHSA-qw6h-vgh9-j6wx"}}}
-{"type":"auditAdvisory","data":{"resolution":{"id":1099525,"path":"react-scripts>webpack-dev-server>express>serve-static>send","dev":false,"optional":false,"bundled":false},"advisory":{"findings":[{"version":"0.18.0","paths":["react-scripts>webpack-dev-server>express>send","react-scripts>webpack-dev-server>express>serve-static>send"]}],"metadata":null,"vulnerable_versions":"<0.19.0","module_name":"send","severity":"moderate","github_advisory_id":"GHSA-m6fv-jmcg-4jfg","cves":["CVE-2024-43799"],"access":"public","patched_versions":">=0.19.0","cvss":{"score":5,"vectorString":"CVSS:3.1/AV:N/AC:H/PR:N/UI:R/S:U/C:L/I:L/A:L"},"updated":"2024-09-10T19:42:42.000Z","recommendation":"Upgrade to version 0.19.0 or later","cwe":["CWE-79"],"found_by":null,"deleted":null,"id":1099525,"references":"- https://github.com/pillarjs/send/security/advisories/GHSA-m6fv-jmcg-4jfg\n- https://nvd.nist.gov/vuln/detail/CVE-2024-43799\n- https://github.com/pillarjs/send/commit/ae4f2989491b392ae2ef3b0015a019770ae65d35\n- https://github.com/advisories/GHSA-m6fv-jmcg-4jfg","created":"2024-09-10T19:42:41.000Z","reported_by":null,"title":"send vulnerable to template injection that can lead to XSS","npm_advisory_id":null,"overview":"### Impact\n\npassing untrusted user input - even after sanitizing it - to `SendStream.redirect()` may execute untrusted code\n\n### Patches\n\nthis issue is patched in send 0.19.0\n\n### Workarounds\n\nusers are encouraged to upgrade to the patched version of express, but otherwise can workaround this issue by making sure any untrusted inputs are safe, ideally by validating them against an explicit allowlist\n\n### Details\n\nsuccessful exploitation of this vector requires the following:\n\n1. The attacker MUST control the input to response.redirect()\n1. express MUST NOT redirect before the template appears\n1. the browser MUST NOT complete redirection before:\n1. the user MUST click on the link in the template\n","url":"https://github.com/advisories/GHSA-m6fv-jmcg-4jfg"}}}