Open christinec-fftc opened 1 week ago
@christinec-fftc The Confirmation page design has been updated to align with the VFF template. You can find the latest designs on the page in the Figma file underlined in red.
A few notes from the our meeting with @pacerwow and @StevenStraily:
Mockup of Confirmation Page Design - Happy Path below 👇
Issue Description
Part 2 of scenario where
submit_all_claim
returns 200 success andsubmission_status
also returns 200 with a claim id.mocks: https://www.figma.com/design/qyTtKDOTHZPGU59PAfqVhq/(526ez)-New-Confirmation-Page-and-Email-Touchpoints?node-id=8405-81028
Move print button outside of blue card, add new content, styling to match designs
Modify remaining p (paragraph) content. This includes all the rest of the copy after the blue card. There's 4 sections here. (small sample screenshot here, refer to figma for full content)
Front end tasks
Acceptance Criteria
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 contentRun 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
product support
,analytics-insights
,operations
,service-design
,Console-Services
,tools-fe
)backend
,frontend
,devops
,design
,research
,product
,ia
,qa
,analytics
,contact center
,research
,accessibility
,content
)bug
,request
,discovery
,documentation
, etc.)