VACMS-17200 PACT Act web components (#28227)

* VACMS-17200 PACT Act web components

* revising components to our use case

* fixing focus

* fixing hint style and focus outline

* fixing hint text

src/applications/pact-act/containers/HomePage.jsx

@@ -48,9 +48,10 @@ const HomePage = ({ router, setIntroPageViewed }) => {
       </p>
       <p>
         Are you the surviving family member of a Veteran?{' '}
-        <a href="/resources/the-pact-act-and-your-va-benefits/#information-for-survivors">
-          Get PACT Act information for survivors
-        </a>
+        <va-link
+          href="/resources/the-pact-act-and-your-va-benefits/#information-for-survivors"
+          text="Get PACT Act information for survivors"
+        />
       </p>
     </>
   );

src/applications/pact-act/containers/questions/CheckboxGroup.jsx

@@ -1,17 +1,18 @@
 import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import {
   VaButtonPair,
   VaCheckbox,
+  VaCheckboxGroup,
 } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import {
   navigateBackward,
   navigateForward,
 } from '../../utilities/page-navigation';
 import { updateFormStore } from '../../actions';
 import { cleanUpAnswers } from '../../utilities/answer-cleanup';
+import { applyFocus } from '../../utilities/page-setup';
 
 /**
  * Produces a variable group of checkboxes
@@ -33,6 +34,7 @@ const CheckboxGroup = ({
   valueSetter,
 }) => {
   const [valueHasChanged, setValueHasChanged] = useState(false);
+  const [headerHasFocused, setHeaderHasFocused] = useState(false);
 
   const onValueChange = event => {
     const { value } = event?.target;
@@ -57,6 +59,7 @@ const CheckboxGroup = ({
           name={shortName}
           value={response}
           onVaChange={onValueChange}
+          uswds
         />
       );
     });
@@ -82,33 +85,24 @@ const CheckboxGroup = ({
 
   return (
     <>
-      <div
-        className={classNames('vads-u-margin-bottom--3', {
-          'pact-act-form-question-error': formError,
-        })}
+      <VaCheckboxGroup
+        data-testid={testId}
+        error={formError ? 'Select a location.' : null}
+        hint="Select all that apply"
+        id="paw-checkbox"
+        label={h1}
+        label-header-level="1"
+        onLoad={applyFocus(
+          'paw-checkbox',
+          headerHasFocused,
+          setHeaderHasFocused,
+        )}
+        uswds
       >
-        <h1
-          className="pact-act-form-question-header"
-          id="pact-act-form-question"
-        >
-          {h1}
-        </h1>
-        <fieldset
-          aria-labelledby="pact-act-form-question pact-act-form-instructions"
-          data-testid={testId}
-        >
-          {formError && (
-            <span className="usa-error-message" role="alert">
-              <div className="pact-act-form-text-error">
-                <span className="usa-sr-only">Error</span> Select a location.
-              </div>
-            </span>
-          )}
-          <p id="pact-act-form-instructions">Select all that apply.</p>
-          {createCheckboxes()}
-        </fieldset>
-      </div>
+        {createCheckboxes()}
+      </VaCheckboxGroup>
       <VaButtonPair
+        class="vads-u-margin-top--3"
         data-testid="paw-buttonPair"
         onPrimaryClick={onContinueClick}
         onSecondaryClick={onBackClick}

src/applications/pact-act/containers/questions/TernaryRadios.jsx

@@ -1,15 +1,19 @@
 import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { snakeCase } from 'lodash';
-import { VaButtonPair } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
+import {
+  VaButtonPair,
+  VaRadio,
+  VaRadioOption,
+} from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import {
   navigateBackward,
   navigateForward,
 } from '../../utilities/page-navigation';
 import { updateFormStore } from '../../actions';
 import { cleanUpAnswers } from '../../utilities/answer-cleanup';
 import { SHORT_NAME_MAP } from '../../constants/question-data-map';
+import { applyFocus } from '../../utilities/page-setup';
 
 /**
  * Produces a set of 3 radio options
@@ -32,6 +36,7 @@ const TernaryRadios = ({
   valueSetter,
 }) => {
   const [valueHasChanged, setValueHasChanged] = useState(false);
+  const [headerHasFocused, setHeaderHasFocused] = useState(false);
 
   const onContinueClick = () => {
     if (!formValue) {
@@ -66,47 +71,34 @@ const TernaryRadios = ({
   const renderRadioOptions = () => {
     return responses.map((response, index) => {
       return (
-        <div key={index}>
-          <input
-            type="radio"
-            checked={formValue === response}
-            data-testid="va-radio-option"
-            id={snakeCase(`${response}_input`)}
-            name={shortName}
-            onChange={() => onValueChange(response)}
-            value={response}
-          />
-          <label
-            className="pact-act-form-label"
-            htmlFor={snakeCase(`${response}_input`)}
-          >
-            <span>{response}</span>
-          </label>
-        </div>
+        <VaRadioOption
+          key={index}
+          checked={formValue === response}
+          data-testid="va-radio-option"
+          label={response}
+          name="group"
+          value={response}
+          uswds
+        />
       );
     });
   };
 
   return (
     <>
-      <div
-        className={
-          formError
-            ? 'vads-u-margin-bottom--3 pact-act-form-question-error'
-            : 'vads-u-margin-bottom--3'
-        }
+      <VaRadio
+        data-testid={testId}
+        form-heading={h1}
+        form-heading-level={1}
+        error={formError ? 'Select a response.' : null}
+        id="paw-radio"
+        onVaValueChange={e => onValueChange(e.detail.value)}
+        onLoad={applyFocus('paw-radio', headerHasFocused, setHeaderHasFocused)}
+        use-forms-pattern="single"
+        uswds
       >
-        <h1
-          className="pact-act-form-question-header"
-          id="pact-act-form-question"
-        >
-          {h1}
-        </h1>
         {shortName === SHORT_NAME_MAP.ORANGE_2_2_2 && (
-          <div
-            className="vads-u-margin-top--1"
-            data-testid="paw-orange-2-2-2-info"
-          >
+          <div id="paw-orange-2-2-2-info" data-testid="paw-orange-2-2-2-info">
             <va-additional-info
               trigger="Learn more about C-123 airplanes"
               uswds
@@ -123,28 +115,11 @@ const TernaryRadios = ({
             </va-additional-info>
           </div>
         )}
-        {locationList ? (
-          <div id="pact-act-form-instructions">{locationList}</div>
-        ) : null}
-        <fieldset
-          aria-labelledby={
-            locationList
-              ? 'pact-act-form-question pact-act-form-instructions'
-              : 'pact-act-form-question'
-          }
-          data-testid={testId}
-        >
-          {formError && (
-            <span className="usa-error-message" role="alert">
-              <div className="pact-act-form-text-error">
-                <span className="usa-sr-only">Error</span> Select a response.
-              </div>
-            </span>
-          )}
-          {renderRadioOptions()}
-        </fieldset>
-      </div>
+        {renderRadioOptions()}
+        <div slot="form-description">{locationList}</div>
+      </VaRadio>
       <VaButtonPair
+        class="vads-u-margin-top--3"
         data-testid="paw-buttonPair"
         onPrimaryClick={onContinueClick}
         onSecondaryClick={onBackClick}

src/applications/pact-act/sass/pact-act.scss

@@ -1,7 +1,6 @@
 @import "~@department-of-veterans-affairs/formation/sass/shared-variables";
 
 .pact-act-app {
-
   h1:focus {
     outline: none;
   }
@@ -22,36 +21,15 @@
     }
   }
 
-  .pact-act-form-question-header {
-    font-family: "Bitter", "Georgia", "Cambria", "Times New Roman", "Times", serif;
-    font-size: 2em;
-    line-height: 1.5;
-    margin-bottom: 0;
-  }
-
-  .pact-act-form-question-error {
-    border-left: 0.4rem solid $color-secondary-dark;
-    padding-left: 2rem;
-    position: relative;
-  }
-
-  .pact-act-form-text-error {
-    color: $color-secondary-dark;
-    font-weight: bold;
-  }
-
-  .pact-act-form-label {
-    margin-top: 1rem;
-    padding-left: 6px;
+  #paw-orange-2-2-2-info {
+    margin-top: -22px;
   }
 
   va-button-pair {
-    margin-left: -4px;
-    margin-right: -4px;
+    margin-left: 4px;
+  }
 
-    @media screen and (min-width: 480px) {
-      margin-left: 4px;
-      margin-right: 4px;
-    }
+  .usa-hint {
+    color: $color-gray-medium;
   }
 }

src/applications/pact-act/tests/cypress/helpers.js

@@ -83,12 +83,6 @@ export const clickResultsBack = () =>
     .click();
 
 export const verifyFormErrorNotShown = selector =>
-  cy
-    .findByTestId(selector)
-    .get('span[role="alert"]')
-    .should('not.exist');
-
-export const verifyFormErrorNotShownCheckBox = selector =>
   cy
     .findByTestId(selector)
     .get('span[role="alert"]')

src/applications/pact-act/tests/cypress/service-period-during-both/form-validation.cypress.spec.js

@@ -70,13 +70,13 @@ describe('PACT Act', () => {
 
       // ORANGE_2_2_B --------------------------------
       h.verifyUrl(ROUTES.ORANGE_2_2_B);
-      h.verifyFormErrorNotShownCheckBox(h.ORANGE_2_2_B_INPUT);
+      h.verifyFormErrorNotShown(h.ORANGE_2_2_B_INPUT);
 
       h.clickContinue();
-      h.checkFormAlertText(h.ORANGE_2_2_B_INPUT, 'Error Select a location.');
+      h.checkFormAlertText(h.ORANGE_2_2_B_INPUT, 'ErrorSelect a location.');
 
       h.selectCheckbox(h.ORANGE_2_2_B_INPUT, 0);
-      h.verifyFormErrorNotShownCheckBox(h.ORANGE_2_2_B_INPUT);
+      h.verifyFormErrorNotShown(h.ORANGE_2_2_B_INPUT);
       h.clickBack();
 
       // ORANGE_2_2_A --------------------------------
@@ -98,13 +98,13 @@ describe('PACT Act', () => {
 
       // ORANGE_2_2_1_B -----------------------------
       h.verifyUrl(ROUTES.ORANGE_2_2_1_B);
-      h.verifyFormErrorNotShownCheckBox(h.ORANGE_2_2_1_B_INPUT);
+      h.verifyFormErrorNotShown(h.ORANGE_2_2_1_B_INPUT);
 
       h.clickContinue();
-      h.checkFormAlertText(h.ORANGE_2_2_1_B_INPUT, 'Error Select a location.');
+      h.checkFormAlertText(h.ORANGE_2_2_1_B_INPUT, 'ErrorSelect a location.');
 
       h.selectCheckbox(h.ORANGE_2_2_1_B_INPUT, 0);
-      h.verifyFormErrorNotShownCheckBox(h.ORANGE_2_2_1_B_INPUT);
+      h.verifyFormErrorNotShown(h.ORANGE_2_2_1_B_INPUT);
       h.clickBack();
 
       // ORANGE_2_2_1_A ------------------------------
@@ -146,13 +146,13 @@ describe('PACT Act', () => {
 
       // RADIATION_2_3_B -----------------------------
       h.verifyUrl(ROUTES.RADIATION_2_3_B);
-      h.verifyFormErrorNotShownCheckBox(h.RADIATION_2_3_B_INPUT);
+      h.verifyFormErrorNotShown(h.RADIATION_2_3_B_INPUT);
 
       h.clickContinue();
-      h.checkFormAlertText(h.RADIATION_2_3_B_INPUT, 'Error Select a location.');
+      h.checkFormAlertText(h.RADIATION_2_3_B_INPUT, 'ErrorSelect a location.');
 
       h.selectCheckbox(h.RADIATION_2_3_B_INPUT, 0);
-      h.verifyFormErrorNotShownCheckBox(h.RADIATION_2_3_B_INPUT);
+      h.verifyFormErrorNotShown(h.RADIATION_2_3_B_INPUT);
       h.clickBack();
 
       // RADIATION_2_3_A ------------------------------

src/applications/pact-act/utilities/page-setup.js

@@ -1,6 +1,41 @@
 import { waitForRenderThenFocus } from '@department-of-veterans-affairs/platform-utilities/ui';
 import { customizeTitle } from './customize-title';
 
+// source: https://github.com/department-of-veterans-affairs/component-library/blob/main/packages/storybook/stories/wc-helpers.jsx#L285-L290
+export const applyFocus = (parentId, headerHasFocused, setHeaderHasFocused) => {
+  if (!headerHasFocused) {
+    setTimeout(() => {
+      const header = document
+        .getElementById(parentId)
+        ?.shadowRoot?.querySelector('h1');
+
+      if (header) {
+        const tabindex = header.getAttribute('tabindex');
+
+        if (header.tabIndex !== 0) {
+          header.setAttribute('tabindex', '-1');
+
+          if (typeof tabindex === 'undefined' || tabindex === null) {
+            header.addEventListener(
+              'blur',
+              () => {
+                header.removeAttribute('tabindex');
+              },
+              { once: true },
+            );
+          }
+        }
+
+        header.addEventListener('focus', () => {
+          header.style.outline = 'none';
+        });
+
+        header?.focus();
+        setHeaderHasFocused(true);
+      }
+    }, 500);
+  }
+};
 export const pageSetup = H1 => {
   window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
   waitForRenderThenFocus('h1');