CT-EYB: Update Estimate Your Benefits section for VETTEC institutions.

[dneel-bah]

As a Comparison Tool user, I need to be aware of changes to the benefits estimator panel while I am modifying the form inputs so that I can be fully aware of what my benefits are after answering all relevant questions.

Assumptions:

1. This work is completed behind a feature flag #7780.
2. The desktop interactive prototype is for UI/Layout reference but is overruled by supporting artifact # 1.
3. The mobile interactive prototype is for UI/Layout reference but is overruled by supporting artifact # 2.
4. Update e2e to test new functionality of calculator on VET TEC profile pages.

Acceptance Criteria:

1. The "Approved Programs" table: a. Does not have selectable rows. b. The row of the program that the user selected in search results to view the profile page of has a green check mark. c. The 508 ~text for the green checkmark is "[Name of program] Selected Program"~ format for the green checkmark suggested by copenut is

   <i aria-hidden="true" role="presentation"></i>
   [Name of program]
   <span class="sr-only">Selected program</span>

2. The "Use the fields below to update your tuition and fees or to add a scholarship." text is replaced with: "Use the fields below to calculate your benefits".
3. The first question in the "Estimate Your Benefits" section is: "Choose the training program you'd like to attend" a. The answers available to the user are the program names displayed in the "Approved Programs" section table. b. If there are 5 or less programs, they are displayed as radio buttons. c. If there are 6 or more programs, they are displayed as a drop down list. d. The value selected is pre-populated based on the program that the user selected on the search results page to enter the profile page. e. When changing the answer, the "Tuition and fees for program" input is updated with the corresponding "Tuition" amount from the "Approved Programs" section table.
4. When changing the answer to ANY of the questions, no change is made to the "Your estimated benefits" panel in the "Estimate Your Benefits" section.
5. The user has the ability to initiate a recalculation of their estimated benefits by clicking the "Calculate benefits" button. a. The recalculation updates the "Your estimated benefits" panel. b. Focus is set on the "Your estimated benefits" panel after recalculation. c. The "Your estimated benefits" header does not get the yellow focus halo on focus. d. The title on the "Your estimated benefits panel" changes to match the selected training program. e. The selected programs corresponding row in the "Approved Programs" table is marked with a green checkmark.
6. The layout of the "Estimate Your Benefits" section on mobile matches Supporting Artifact # 2.
7. The "Select a program below to view your estimated benefits." text in the "Approved programs" section above the programs table is replaced with the following text: "The following training programs are approved for VET TEC:"

Supporting Artifacts:

1. Desktop Design Document: VETTEC EYB Update
2. Mobile Design Document: gibct-eyb-vettec-mobile-v0.1-20200424.pdf
3. Desktop Sketch
4. Mobile Sketch

[amyknox]

@hughes-dustin updated AC-1c with 508 input per copenut. Including here for visibility:

Suggested 508 format for the green checkmark which indicates a selected program

<i aria-hidden="true" role="presentation"></i>
    [Name of program]
<span class="sr-only">Selected program</span>

[hughes-dustin]

branch: bah-7842 PR: https://github.com/department-of-veterans-affairs/vets-website/pull/12488

[delli-gatti-michael]

---

[delli-gatti-michael]

Local testing complete

[desireeturner]

@department-of-veterans-affairs/uxbah the review of the radio buttons can be started now, but there is currently a bug preventing testing of more than 5 programs that we are working to resolve: https://github.com/department-of-veterans-affairs/va.gov-team/issues/8910.

[amyknox]

UX has completed the review of the radio button implementation

[amyknox]

@dneel-bah

Issues identified during Radio Button review (2 high priority, 1 low)

https://app.zenhub.com/files/133843125/3529af5a-8bb9-450d-98a6-2fdaa4cd469c/download https://app.zenhub.com/files/133843125/0923c0d1-3bd4-4715-afcf-dc7dbf70de32/download)

[hughes-dustin]

Fixes:

PR: https://github.com/department-of-veterans-affairs/vets-website/pull/12600

Branch: bah-7842-2

[delli-gatti-michael]

Changes are in staging and all blockers have been resolved. Closing this issue