Update toxic exposure page visibility logic

[freeheeling]

Issue Description

Utilize new attribute, includeToxicExposure, in formData prefilled by vets-api to determine whether to show toxic exposure section of form 526.

• update Form526EZApp to reference new attribute, replacing current toxic exposure toggle
• remove reading of toggle and setting of session storage
• in content/toxicExposure.jsx, update showToxicExposurePages to reference includeToxicExposure instead of toggle
• manually test
• update unit tests to key off formData in place of session storage
• update TE E2E test, refactoring to use formData in place of toggle

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

• [ ] ~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~
• [ ] Manually test running vets-api locally ensuring new form vs. IPF behaves as expected (IPF should not be presented with TE section, unless started with TE from new)

Appendix

Ensure your code changes are covered by E2E tests (expand)

- Add E2E tests if none exist for this addition/change. - Update existing E2E tests if this code will change functionality. - Include axe checks, including hidden content

Run axe checks using the Chrome or Firefox browser plugin (expand)

- Ensure no heading levels are skipped. - Ensure all buttons and labeled inputs use semantic HTML elements. - Ensure all buttons, labeled elements and images are identified using HTML semantic markers or ARIA roles. - Ensure form fields have clearly defined boundaries or outlines. - Ensure form fields do not use placeholder text. - Ensure form fields have highly visible and specific error states.

Test for color contrast and color blindness issues (expand)

- All text has appropriate contrast.

Zoom layouts to 400% at 1280px width (expand)

- Ensure readability and usability are supported when zoomed up to 400% at 1280px browser width - Ensure no content gets focused offscreen or is hidden from view.

Test with 1 or 2 screen readers (expand)

- Ensure the page includes a skip navigation link. - Ensure all links are properly descriptive. - Ensure screen reader users can hear the text equivalent for each image conveying information. - Ensure screen reader users can hear the text equivalent for each image button. - Ensure screen reader users can hear labels and instructions for inputs. - Ensure purely decorative images are not announced by the screenreader.

Navigate using the keyboard only (expand)

- Ensure all links (navigation, text and/or image), form controls and page functions can be reached with the tab key in a logical order. - Ensure all links (navigation, text and/or image), form controls and page functions can be triggered with the spacebar, enter key, or arrow keys. - Ensure all interactive elements can be reached with the tab key in a logical order - Ensure all interactive elements can be triggered with the spacebar, enter key, or arrow keys. - Ensure focus is always visible and appears in logical order. - Ensure each interactive element has visible focus state which appears in logical order.

---

How to configure this issue

• [ ] Attached to a Milestone (when will this be completed?)
• [ ] Attached to an Epic (what body of work is this a part of?)
• [ ] Labeled with Team (product support, analytics-insights, operations, service-design, Console-Services, tools-fe)
• [ ] Labeled with Practice Area (backend, frontend, devops, design, research, product, ia, qa, analytics, contact center, research, accessibility, content)
• [ ] Labeled with Type (bug, request, discovery, documentation, etc.)

[tblackwe]

@freeheeling please update this ticket to reflect the new design.

[freeheeling]

Ticket title and description have been updated to reflect new approach/design.

[freeheeling]

Utilize the presence of the includeToxicExposure attribute in formData to determine the form version to present to a user.

Confirm that with each PUT request to v0/disability_compensation_in_progress_forms/21-526EZ, the frontend is accepting and returning the new includeToxicExposure attribute in 'formData`, set and sent by vets-api when starting/creating a new IPF.

A user can choose to apply now from /disability/file-disability-claim-form-21-526ez/start and starts the Disability Compensation Application from the /disability/file-disability-claim-form-21-526ez/introduction, the latter of which includes the form expiration date.

Network requests on both pages get feature toggle data from /v0/feature_toggles?&cookie_id=<id>, indicating the toxic exposure Flipper state for the current user:

{
  "name": "disability526ToxicExposure",
  "value": boolean
},
{
  "name": "disability_526_toxic_exposure",
  "value": boolean
},

Selecting start application requests from /v0/disability_compensation_in_progress_forms/21-526EZ vets-api, which responds with formData that includes the includeToxicExposure attribute for a user whose disability_526_toxic_exposure Flipper is enabled.

Thus, the FE must first evaluate the feature toggle in determining which expiration date to display (note: the date change will be implemented after rollout is complete, and will therefore not be dependent on the feature toggle). Then, throughout the duration of an In Progress Form's existence, wherever the toggle would otherwise be evaluated, the presence of the includeToxicExposure attribute in the formData should be referenced in determining the form version.

[freeheeling]