[Prod] Handle duplicate programs; test with CSS; merge duplicate AROs; update vulnerable dependencies

.circleci/config.yml

@@ -988,6 +988,7 @@ jobs:
                   REACT_APP_GTM_AUTH: $SANDBOX_GTM_AUTH
                   REACT_APP_GTM_PREVIEW: $SANDBOX_GTM_PREVIEW
                   REACT_APP_WEBSOCKET_URL: wss://tta-smarthub-sandbox.app.cloud.gov
+                  REACT_APP_INCLUDE_ACCESSIBILITY_CSS: 'false'
             - cf_deploy:
                 app_name: tta-smarthub-sandbox
                 auth_client_id: SANDBOX_AUTH_CLIENT_ID
@@ -1055,6 +1056,7 @@ jobs:
                   REACT_APP_GTM_AUTH: $DEV_GTM_AUTH
                   REACT_APP_GTM_PREVIEW: $DEV_GTM_PREVIEW
                   REACT_APP_WEBSOCKET_URL: wss://tta-smarthub-dev.app.cloud.gov
+                  REACT_APP_INCLUDE_ACCESSIBILITY_CSS: 'false'
             - cf_deploy:
                 app_name: tta-smarthub-dev
                 auth_client_id: DEV_AUTH_CLIENT_ID
@@ -1122,6 +1124,7 @@ jobs:
                   REACT_APP_GTM_AUTH: $STAGING_GTM_AUTH
                   REACT_APP_GTM_PREVIEW: $STAGING_GTM_PREVIEW
                   REACT_APP_WEBSOCKET_URL: wss://tta-smarthub-staging.app.cloud.gov
+                  REACT_APP_INCLUDE_ACCESSIBILITY_CSS: 'false'
             - cf_deploy:
                 app_name: tta-smarthub-staging
                 auth_client_id: STAGING_AUTH_CLIENT_ID
@@ -1187,6 +1190,7 @@ jobs:
                   REACT_APP_GTM_AUTH: $PROD_GTM_AUTH
                   REACT_APP_GTM_PREVIEW: $PROD_GTM_PREVIEW
                   REACT_APP_WEBSOCKET_URL: wss://ttahub.ohs.acf.hhs.gov
+                  REACT_APP_INCLUDE_ACCESSIBILITY_CSS: 'false'
             - cf_deploy:
                 app_name: tta-smarthub-prod
                 auth_client_id: PROD_AUTH_CLIENT_ID

frontend/.env

@@ -8,3 +8,5 @@ REACT_APP_GTM_ENABLED=false
 REACT_APP_GTM_ID=GTM-MKSDS7M
 REACT_APP_GTM_AUTH=mET4lHjc_AMQrlW4QXiCcA
 REACT_APP_GTM_PREVIEW=env-6
+
+REACT_APP_INCLUDE_ACCESSIBILITY_CSS=false

frontend/package.json

@@ -59,7 +59,7 @@
     "url-join": "^4.0.1",
     "use-deep-compare-effect": "^1.6.1",
     "uuid": "^8.3.2",
-    "micromatch": "^4.0.7"
+    "micromatch": "^4.0.8"
   },
   "engines": {
     "node": "18.20.3"
@@ -101,7 +101,8 @@
     "yaml": "^2.2.2",
     "semver": "^7.5.3",
     "es5-ext": "^0.10.63",
-    "braces": "^3.0.3"
+    "braces": "^3.0.3",
+    "path-to-regexp": "^1.9.0"
   },
   "eslintConfig": {
     "root": true,

frontend/public/accessibility-errors.css

@@ -0,0 +1,109 @@
+/**
+
+Approach & code taken from Heydon Pickering's article on testing HTML with modern CSS
+https://heydonworks.com/article/testing-html-with-modern-css/
+
+**/
+
+:root {
+    --error-outline: 0.25rem solid red;
+    --warning-outline: 0.25rem solid orange;
+}
+
+a:not([href]) {
+    outline: var(--error-outline);
+    --error: 'The link does not have an href. Did you mean to use a <button>?';
+}
+
+a[href^="javascript"] {
+    outline: var(--error-outline);
+    --error-javascript-href: 'The href does not appear to include a location. Did you mean to use a <button>?';
+}
+
+a[disabled] {
+    outline: var(--error-outline);
+    --error-anchor-disabled: 'The disabled property is not valid on anchors (links). Did you mean to use a <button>?';
+}
+
+label:not(:has(:is(input,output,textarea,select))):not([for]) {
+    outline: var(--error-outline);
+    --error-unassociated-label: 'The <label> neither uses the `for` attribute nor wraps an applicable form element'
+}
+
+input:not(form input) {
+    outline: var(--warning-outline);
+    --error-input-orphan: 'The input is outside a <form> element. Users may benefit from <form> semantics and behaviors.'
+}
+
+body :not(:is(header,nav,main,[role="main"],aside,footer)):not(:is(header,nav,[role="main"],main,aside,footer) *):not(.skip-link) {
+    outline: var(--error-outline);
+    --error-content-outside-landmark: 'You have some content that is not inside a landmark (header, nav, main, aside, or footer)';
+}
+
+/**
+* Crazy tabindexing
+----------------------------------------------------------------------
+*/
+
+[tabindex]:not([tabindex="0"]):not([tabindex="-1"]) {
+    outline: var(--error-outline);
+    --error-bad-tabindexing: 'Do not disrupt the natural tab order';
+}
+
+/**
+* <div>s in the wrong places
+----------------------------------------------------------------------
+*/
+
+abbr div, b div, i div, span div, em div, 
+strong div, small div, cite div, q div, code div, 
+label div {
+    outline: var(--error-outline);
+    --error-divs-inside-inline: 'Do not put <div>s inside inline elements.';
+}
+
+/**
+* List errors
+----------------------------------------------------------------------
+*/
+
+ol > *:not(li), 
+ul > *:not(li) {
+    outline: var(--error-outline);
+    --error-invalid-list-children: 'Only <li> can be a direct child of <ul> or <ol>.';
+}
+
+dl > *:not(dt):not(dd) {
+    outline: var(--error-outline);
+    --error-invalid-elements-inside-definition-list: 'This element does not belong directly inside a definition list.';
+}
+
+dt + *:not(dd) {
+    outline: var(--error-outline);
+    --error-definition-must-follow-title: 'Definitions must follow definition titles.';
+}
+
+/**
+* Empty elements
+----------------------------------------------------------------------
+*/
+
+*:empty:not(script):not(input):not(br):not(img):not(link):not(hr):not(embed):not(area):not(command):not(col):not(param):not(source):not(track):not(wbr):not(base):not(keygen):not([aria-hidden="true"]):not(svg):not(svg *) {
+    outline: var(--warning-outline);
+    --warning-empty-element: 'This element is empty. Why?';
+}
+
+/**
+* Form errors
+----------------------------------------------------------------------
+*/
+
+form:not([action]) {
+    outline: var(--error-outline);
+    --error-form-missing-action: 'Forms must have action attributes.';
+}
+
+fieldset > *:first-child:not(legend) {
+    outline: var(--error-outline);
+    --error-fieldset-missing-legend: 'Place a legend as the first element in this fieldset.';
+}

frontend/public/index.html

@@ -53,5 +53,10 @@
       })(window,document,'script','dataLayer', '%REACT_APP_GTM_ID%');</script>
       <!-- End Google Tag Manager -->
     <% } %> 
+
+    <% if (process.env.REACT_APP_INCLUDE_ACCESSIBILITY_CSS === 'true') { %>
+      <link rel="stylesheet" href="%PUBLIC_URL%/accessibility-errors.css">
+    <% } %> 
+
   </body>
 </html>