Design “Provide a Copy of Submission 1.0 release horizon” (HTML)

[mayacarrolluxa6]

1.0 Release Horizon - View HTML copy of submission from Confirmation Page

As a Veteran, I want to to view, print, or download a copy of my 526ez disability compensation claim application after submitting online, So that I can have a record of my submission and trust that my application has been received, even if my claim is unsuccessful.

As a Veteran who uses assistive technology, I want to view, print, or download an accessible a copy of my 526ez disability compensation claim application after submitting online, So that I can have a record of my submission and trust that my application has been received, even if my claim is unsuccessful.

Technical Constraints

• Unsure about this pattern and need to understand what the VFF template will/won't do from a technical perspective
• Pair w Eng on this as needed to understand technical lift

Resources

VADS - Keep a record of submitted information https://design.va.gov/patterns/help-users-to/keep-a-record-of-submitted-information

VADS Figma Template https://www.figma.com/design/4A3O3mVx4xDAKfHE7fPF1U/VADS-Templates%2C-Patterns%2C-and-Forms?node-id=2988-66786

Engineering Documentation https://github.com/department-of-veterans-affairs/vets-api/tree/master/modules/simple_forms_api/app/services/simple_forms_api/form_remediation/docs

Product Brief https://docs.google.com/document/d/1dxvs-nGCddbiUxyTrRgfrtuf25ZP6mCgqGInVtOmy40/edit?usp=sharing

HCD Brief https://docs.google.com/presentation/d/1C62SjntcIxkI7jSkDysKhU592T7Ns3ZsBPmqSK_Ag60/edit?usp=sharing

Meeting notes https://docs.google.com/document/d/18vrdirxBaEm1Dtg-AMWAQe04UYkTmv8h3UHx4bcOpCs/edit?usp=sharing

Discovery https://www.figma.com/design/RzYxoYowRtRXTPcEP3bkJM/(526ez)-Provide-a-copy-of-submission?node-id=63-25670

Acceptance Criteria

• 1.0 designs should live on this page in the Figma file
• Engineering and Product Management should be able to link directly to each frame in their GitHub tickets, ensuring that tickets won’t need updating if the 1.0 designs require revisions after Sprint 10.
• The designs include mockups of the "Information you submitted accordion" in both it's opened and closed states.
• This work is related to ZSF failures and does not need to go through a design intent or midpoint review.
• The design and content are consistent with the VFF confirmation page template, tailored specifically to meet the unique requirements of the 526ez form.

In Scope

• The HTML version in the accordion component is highest priority for our 1.0 increment because it is accessible for users of assistive technology.

Not In Scope

Reviewers for awareness and quality control

• [ ] OCTO Design Lead
• [ ] Product Manager
• [ ] DBEX HCD Leads
• [ ] HCD group
• [ ] Engineering Lead and engineering team
• [ ] Accessibility Lead

[pacerwow]

Slack thread: https://agilesix.slack.com/archives/C04MJV66ZPC/p1730850361617559

https://github.com/department-of-veterans-affairs/vets-website/blob/main/src/platform/forms-system/src/js/components/ConfirmationView/README.md#one-off-usage

I think I found more detailed docs on how to build the "Information you submitted on this form" accordion. If you scroll a little farther down, it looks like ChapterSectionCollection is where that section is mentioned.

[mayacarrolluxa6]

Progress Update:

• I completed a mockup of the confirmation page with the accordion closed.
• I started the mockup of the open accordion, but adding the content into this section is taking time due to the length of the 526. I won’t be able to finish this part today and will pick it up tomorrow.

Next steps include:

• Completing the headings and A11y annotations.

Reviewing the designs with:

• OCTO Design Lead
• Product Manager
• DBEX HCD Leads
• HCD Group
• Engineering Lead and Engineering Team
• Accessibility Lead

Additionally, Shannon suggested involving the Decision Reviews team in our discussions with DBEX-TREX engineers, as they’ve already implemented the Provide a Copy of Submission for the Decision Reviews form.

[mayacarrolluxa6]

Progress update:

• Completed the mockup of the confirmation page with the accordion sections expanded.
• Updated all mockups to condense extra information at the bottom of the page into accordion menus. These details currently exist in production but don’t fit neatly into the VFF template; condensing them into accordions improves page usability. I’m currently working with the DSVA accessibility help channel and consulting with Tracy to ensure this design change doesn’t negatively impact assistive technology users.
• Reviewed the work-in-progress design in the bi-weekly design sync with Shannon, Evelyn, Steven, and Ruben.
• Coordinated on Slack with the platform design system team and Eileen Chi, the designer for the Decision Reviews team.
• Learned that the Request Board Appeal Confirmation page created by the Decision Reviews team was designed before the VFF template release and does not use the HTML accordion component for submission copies. Therefore, this team won’t be able to provide the cross-team support and shared learnings we had hoped for.
• Scheduled a meeting next week with Jeana Clark from the VFF team and Eileen Chi to address any outstanding questions that can’t be resolved via Slack. Christine and Jared are looped into the meeting.
• Christine confirmed that no additional heading or accessibility annotations are needed on these designs, as these were already provided in the previous round of confirmation page designs.
• Incorporated Shannon’s preliminary feedback into the designs, adding elements like uploaded documents set to view-only and the signature component.
• Requested confirmation from the platform design system team on their design intent for the HTML accordion content from a technical perspective, specifically whether this content is generated similarly to the review and submit page.

Figma file: [](https://www.figma.com/design/RzYxoYowRtRXTPcEP3bkJM/(526ez)-Provide-a-copy-of-submission?node-id=421-79187&t=6r8pOCaFWaJUaJEQ-4)

Next steps:

• Review with PM, Engineering, and Accessibility Lead

[mayacarrolluxa6]

Updates:

Product Management Feedback from Jared Pace

• Let's share this work in Sprint Review.

• "I want to raise one concern focused on the UX: the content length creates a significant scroll depth that might make it harder for users to find and interact with important information. Could you also check that previous feedback regarding condensing information into the "how long will it take..." and "If I have dependents..." sections is advised? I vaguely recall some feedback long ago that asked us to keep these sections outside of accordions. I could be wrong. Re the scroll depth, given your experience with the design system, I'd love to explore ways we could maintain the design quality while creating a more compact experience. Could we grab 30 minutes to brainstorm some alternatives? I have some initial thoughts about content prioritization that might help." Unknown Technical Considerations

• What functionality is available in the template?

• What can we customize in the template?

• Are including the file names of uploaded evidence an extra engineering lift? Could this be descoped? Future Release Horizons

• 1.0 HTML copy of submission

• 1.1 HTML & PDF copy of submission

• 2.0 My VA Status card download PDF and show submission status

• 2.1 CST submission status in claims and appeals

Feedback from Jeana Clark on the VFF team Question Asked: "How is this information structured from a technical perspective? Is this content generated in the same way as the content on the Review and Submit page?"

[https://dsva.slack.com/archives/C01DBGX4P45/p1731426245099759?thread_ts=1731105818.809119&cid=C01DBGX4P45]

Jeana's response "Here is some technical documentation on the confirmation page. I am looking for more details for you.

But a very rudimentary high-level way of explaining how the data is structured, is

• For text inputs/text areas:
• Form Label
• field data
• For checkbox/radio groups
• Legend
• selected radio/checkbox
• selected radio/checkbox
• selected radio/checkbox"

Accessibility feedback from Tracy Tran [(https://dsva.slack.com/archives/C8E985R32/p1731422187191179?thread_ts=1731087955.805259&cid=C8E985R32)]

Question Asked: "In staging today, I see we are embedding download links in the accordions, so I assume that's been tested already. In VADS, it says "Make sure interactive elements (such as links) within the collapsible region are far enough from the header that users don’t accidentally trigger a collapse. (The exact distance will depend on the device.)" Do you have anything extra to add to that guidance?"

Well the main impact of putting the links in the accordion is that all users will be more likely to miss the download links. But for AT specifically… all of the content inside of a closed accordion should be hidden from assistive technology until it’s opened. If it’s key information then we’re forcing them to go hunting for it - find the relevant accordion, open it, then look for the link.

Screenreader users often use a shortcut to access a list of all headings, all links etc. If we know they’re going to need the link, might as well leave it out of the accordion so they can access it using Links shortcut to begin with. As for the second part - just make sure you have a decent target size for all of the touch points - [(https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html)]

Engineering Feedback Live walkthrough session is scheduled for tomorrow, 11.12.

[mayacarrolluxa6]

Progress Update:

• Walked DBEX-TREX engineers through proposed designs today and gathered feedback.
• Walked VFF team designer through proposed designs today and gathered feedback.
• Decision Reviews Team designer was a no-show.

Accessibility Feedback Resolved

• Resolved Tracy Tran's feedback about content.

Engineering Feedback Resolved

• Reverted back to a previous version of the design that does not include the net new accordions, as this might trigger a collab cycle check point. Sticking with New Confirmation page design that was originally implemented.
• Added callouts to clairfy that including the view only file names of evidence uploaded and the 5103 language / signature component are not hard requirements.

Product Management Feedback Unresolved

• Jared's feedback about the extreme length of the HTML accordion was not something that could be resolved before EOY 2024.
• We have tentative plans to conduct our own usability testing in 2026, exploring design solutions that deviate from the VFF confirmation page template with assistive technology users to guy buy-in for a custom confirmation page design.

Lessons Learned

• Although the design is complete, implementing the HTML accordion requires significant engineering effort. The component breaks on the Conditions page due to extensive customization, which is also present on many other pages within the 526.
• Upgrading to the v3 web components across the 526ez may be necessary to support the engineering implementation of this design. It's likely getting this component to work properly will require cross-team collaboration with the VFF team.
• Implementing the 5103 language component is not part of the out of the box VFF template and would require net new custom engineering that out of the scope of the mission of DBEX TREX.

3 Forms with Confirmation pages in staging

https://staging.va.gov/supporting-forms-for-claims/lay-witness-statement-form-21-10210/introduction

https://staging.va.gov/records/request-personal-records-form-20-10206/introduction

https://staging.va.gov/supporting-forms-for-claims/substitute-claimant-form-21P-0847/introduction

[mayacarrolluxa6]

Final Design Links for Product Management and Engineering:

Copy of claim submission (HTML) Accordion closed https://www.figma.com/design/RzYxoYowRtRXTPcEP3bkJM/(526ez)-Provide-a-copy-of-submission?node-id=421-59828&t=LaXQ5Rmlay0xYXRY-4

Copy of claim submission (HTML) Accordion open https://www.figma.com/design/RzYxoYowRtRXTPcEP3bkJM/(526ez)-Provide-a-copy-of-submission?node-id=421-59957&t=LaXQ5Rmlay0xYXRY-4