Update Paragraph Spacing: WCAG 2.2

[StacyB2023]

Description:

As a mobile app user, I would like to ensure that accessibility requirements are met for Paragraph Spacing (Under Text Styling Criteria) to ensure the best experience when using the app.

As part of this story we have done a full review spike and noted the following are NOT in compliance. This ticket is to ensure updates/improvements are in compliance for the following:

1. 14px font size (which we should increase to the minimum 16px) should have at least 28px of space below
2. 16px font size should have at least 32px of space below
3. 20px font size should have at least 40px of space below
4. 26px font size should have at least 52px of space below

Acceptance Criteria:

[ AC1 ] For Paragraph spacing items (1-4 listed above), review and update to ensure accessibility criteria is met for Mobile. Note any bottlenecks

[ AC2 ] Add this change to the same Feature Build as #4929

[ AC3 ] Identify a way to componentize this change

[StacyB2023]

Spike for reference:

https://app.zenhub.com/workspaces/va-mobile-product-view-610035bc5395bb000e62e529/issues/gh/department-of-veterans-affairs/va-mobile-app/4687

[StacyB2023]

@brea11y @dumathane Also adding to FE ENG handoff.

[dumathane]

Hey team! Please add your planning poker estimate with Zenhub @alexandec @Sparowhawk @theodur @TimRoe

[rbontrager]

@Sparowhawk Here is the list of pages either missing spacing (based on what pages currently have spacing), with inconsistent spacing before and after the paragraph, and with different spacing sizes when the font is the same.

New Spacing Missing: -Sign in screen on first time login -Biometrics screen on first time login -Settings > manage account -Profile > Contact Information > Saving an incorrect address > Verify you address dropdown -Vaccines > No VA vaccines -Messaging > User has access but no messages -Messaging > Older than 45 days message > 'This conversation is too old...' dialog -Messaging > Terms and Conditions -Claims > User has no claims or appeals access -Claims > File request > Select photos > screen reader notice -Claims > File request description -Veterans Crisis Line -Health/Appointment dropdown for cerner patients -Direct deposit -Appointments > Confirmed appointment > Details > 'Do you need to cancel'/'Cancel this appointment' -Appointments > Confirmed VA Video Connect Home appointment > Details > 'Prepare for video visit' panel -Error Pages: -Messages > Compose > 'We can't match you with a provider' error message (User +54) -'VA Mobile App isn't working right now' error page -Other error pages as needed

Pages Missing Spaces before/after paragraph: -Payment > Payment Details > 'What if my payment information doesn't look right?' > Missing spacing after paragraph and before phone number -No Prescriptions > Missing spacing after paragraph and before phone number -Appointments > Pending appointment without all the providers contact info > Details > paragraph before 'Find your VA facility' -No Direct Deposit > Missing spacing after paragraph and before phone number -Messages > Compose Message > How to attach a file > Missing spacing after paragraph and before phone number -Contact VA > Missing spacing between 'Call MyVA411' and paragraph

Spacing sizing inconsistent between paragraphs: -Payment > 'What if I'm missing a payment?' > Spacing is bigger between bottom paragraph and phone number then between the paragraphs/header and first paragraph -Claims > Claim Details > 'What should I do if I disagree with VA's decision...' > Spacing is bigger between paragraph and link then between header and paragraph -Prescriptions > Prescriptions help -Claims > Appeals Details > Spacing under bullet points (there is no spacing under the last entry in claims details) -Disability Rating > 'Need Help?' section > Spacing is bigger between paragraph and phone number then between paragraph and header -Profile > Personal information > 'How to update or fix an error in your legal name' > Spacing is bigger between paragraph and phone number then spacing elsewhere -Profile > Personal information > 'How to fix an error in your date of birth' > Spacing is bigger between paragraph and phone number then spacing elsewhere -Not Currently Enrolled in Secure Messages > Spacing is bigger between bullet points and bullet points to the link -No military information

[rbontrager]

@Sparowhawk The new spacing caused just a couple issues on a few pages. List is below:

Pages Missing Spaces before/after paragraph: -Messages > Compose Message > How to attach a file > Missing spacing after paragraph and before phone number -Biometrics screen on first time login > no space after paragraph 'VA Mobile App isn't working right now' error page > Missing spacing after paragraph and before phone number Letters > Generic letter > no space after paragraph

Spacing sizing inconsistent between paragraphs: -Direct deposit > Spacing is bigger between 'Add, review, or change paragraph' and 'Direct Deposit Information' -Sign in screen on first time login > spacing size inconsistent between bullet point and 'continue to sign in' button -'VA Mobile App isn't working right now' error page > Spacing is larger between 'We're sorry' and 'App doesn't work' paragraph then elsewhere

In addition spacing should be removed for headers: Veterans Crisis Line Profile > Personal Info > How to update or fix an error in your legal name Profile > Personal Info > How to fix an error in your date of birth Profile > Contact Info > How we use your contact information Profile > Military Info > What if my military service info doesn't look right Profile > Settings > Manage Account Disability Ratings > Learn about VA disability ratings Disability Ratings > Need Help? Claims/Appeals > Need help? Claims > Why does VA sometimes combine claims? Claims > What should I do if I disagree with VA's decision on my disability claims Claims > File Request > Ask for your claim evaluation Claims > File Request > Review Evaluation details Claims > File Request > Request > Select a file Claims > File Request > Request > Take or select photos Claims > Appeal > Review past events (do not know if you did this but its got a weird space now so maybe?) No Claims and Appeals Letters > Benefit summary and service verification letter Letters > Generic letter No letters Appointments > Do you need to cancel Appointments > Prepare for video visit Prescription > Refill Request > What's next Prescription > Status Definition Prescription > We can't refill some of the prescriptions Prescription > Prescription Help Messages > Compose Message > How to attach file Messages > Compose Message > Attachments Messages > Compose Message > When will I get a reply Messages > No Messages Messages > Not Enrolled No VA Vaccines No Military No Payments Payments > What if I'm missing a payment Payments > Payment > Payment info doesn't look right

[rbontrager]

Just a couple more small areas where the original spacing between the header and the paragraph has been removed.

Profile > Personal Info > How to update or fix an error in your legal name Profile > Personal Info > How to fix an error in your date of birth Profile > Military Info > What if my military service info doesn't look right No Claims and Appeals No Payments Messages > No Messages Read more if you haven't yet verified in first time sign-in page

[rbontrager]

Additional Issues:

Appointments > Current Message > Reply > 'When will I get a reply' > Needs paragraph spacing between 'It can take up to three business days' and 'Important' Letters > Review Letters > Letter Details > Needs paragraph spacing between letter info and 'Review letter' button No Direct Deposit Access > Needs to have paragraph spacing between 'You'll need to sign in with a verified ID.me' header and 'We require this to protect bank account info' text Letters > Review Letters > Service Verification letter > Spacing to large after 'You can now use your Benefit summary letter' Prescriptions health > Spacing too large between 'Medications not included:' and bullets, bullets and text Newish Features that need paragraph spacing: Profile > Gender identity > Needs paragraph spacing between 'You can change your selection' paragraph and options Profile > Gender identify > 'What to know before you decide to share your gender identity' > Spacing too large between paragraphs Claims History > Claim with letter > 'We decided your claim' > Needs paragraph spacing between 'You can download your decision letter' and 'Get claim letters' Claims Letter > Needs paragraph spacing between 'You can download your claims letters' and list of letters

[Sparowhawk]

Appointments > Current Message > Reply > 'When will I get a reply' > Needs paragraph spacing between 'It can take up to three business days' and 'Important' - I don't think this exists anymore with update from develop

Letters > Review Letters > Letter Details > Needs paragraph spacing between letter info and 'Review letter' button - already there No Direct Deposit Access > Needs to have paragraph spacing between 'You'll need to sign in with a verified ID.me' header and 'We require this to protect bank account info' text - fixed Letters > Review Letters > Service Verification letter > Spacing to large after 'You can now use your Benefit summary letter' - fixed Prescriptions health > Spacing too large between 'Medications not included:' and bullets, bullets and text Newish Features that need paragraph spacing: - fixed Profile > Gender identity > Needs paragraph spacing between 'You can change your selection' paragraph and options - fixed Profile > Gender identify > 'What to know before you decide to share your gender identity' > Spacing too large between paragraphs - fixed Claims History > Claim with letter > 'We decided your claim' > Needs paragraph spacing between 'You can download your decision letter' and 'Get claim letters' - fixed Claims Letter > Needs paragraph spacing between 'You can download your claims letters' and list of letters - fixed

[rbontrager]

@Sparowhawk All issues above have been verified and I'm not seeing anything new.