5103 - Notify Vets about what evidence they need to submit

[pacerwow]

As a Veteran I want to be able to view any information that the VA is required to tell me by law in regards to supporting evidence. The info component needs to be updated on both the Intro Page and the Supporting Evidence Page

Alert designs in Figma

https://www.figma.com/design/igOOQi5BOTgQQJYA9X2G3M/5103-equivalent-language?node-id=5559-6638&t=DhM3Da0S45LKl0Ra-4

• introduction page

  

• supporting-evidence/orientation page

  

Tasks

• Develop behind feature flag created in #87484
• Info component on both Intro and Supporting Evidence pages are updated
• User info/default style va-alert library component: https://design.va.gov/components/alert
• Link to specific page in the PDF (page 3), can be done via the page parameter in the linked url, e.g."#page=3"
• For the intro pages, embed alert into the process list: https://design.va.gov/components/process-list
• If needed, refer to the va-process-list component documentation

Front end tasks

• Ensure the page is styled according to design spec.
• Ensure the back end data from API is displayed in local and review instance
• Ensure unit tests are available.
• Ensure your code changes are covered by E2E tests
• Run axe checks using the Chrome or Firefox browser plugin
• Test for color contrast and color blindness issues
• Zoom layouts to 400% at 1280px width
• Test with 1 or 2 screen readers
• Navigate using the keyboard only

Acceptance Criteria

• [ ] Scenario: Notify Vets about required evidence
  • Given a user is logged in
  • When the Veteran views the 526 intro page - it will open in the same page
  • When the Veteran views the Supporting evidence page - it will open in a new tab
  • Then the user should see an alert component containing a link to the official requirements of the evidence they are required to submit to support their disability claim
  • And the user should be able to click on the link to view more details about it
• [ ] Designer comments on this issue to approve page styling
• [ ] Unit tests pass
• [ ] E2E tests cover current code and regression
• [ ] End-to-end tests show 0 violations.
• [ ] The data returned matches API response (for given user or scenario)
• [ ] All axe checks pass
• [ ] All color contrast checks pass
• [ ] All zoom testing passes
• [ ] All keyboard checks pass
• [ ] All screenreader checks pass

[pacerwow]

Related to work in #80767

[mchae-nava]

Example:
<va-alert status="info" visible uswds>
<h3 className="vads-u-font-size--h3 vads-u-margin-top--0">Notice of evidence needed</h3>
        <p className="vads-u-font-size--base">
          We’re required by law…
        </p>
      </va-alert>

Link: 
<a className="vads-u-font-size--base" href={PDF_URL}>
Review official requirements on VA Form 21-526EZ (PDF)</a>

[mchae-nava]

<li>
            <h3>Prepare</h3>
            <h4>To fill out this application, you’ll need your:</h4>
            <ul>
              <li>Social Security number (required)</li>
            </ul>
            <p>
              <strong>What if I need help filling out my application?</strong>{' '}
              An accredited representative, like a Veterans Service Officer
              (VSO), can help you fill out your claim.{' '}
              <a href="/disability-benefits/apply/help/index.html">
                Get help filing your claim
              </a>
            </p>
          </li>
          <li>
            <h3>Apply</h3>
            <p>Complete this Mock form form.</p>
            <p>
              After submitting the form, you’ll get a confirmation message. You
              can print this for your records.
            </p>
          </li>
          <li>
            <h3>VA Review</h3>
            <p>
              We process claims within a week. If more than a week has passed
              since you submitted your application and you haven’t heard back,
              please don’t apply again. Call us at.
            </p>
          </li>
          <li>
            <h3>Decision</h3>
            <p>
              Once we’ve processed your claim, you’ll get a notice in the mail
              with our decision.
            </p>
          </li>