508-defect-2: Military service history needs design review (and possible redesign)

[joshkimux]

What happened?

The military service history needs a design review as:

• it uses a typeahead instead of the standard open text field
• it provides 50+ possible selections despite EVSS planning to only accept 23 in the future
• it's missing headings on added service history items
• it's missing unique labels for list loop buttons

For more on a11y problems with the list loop pattern, visit this ticket from coe.

https://user-images.githubusercontent.com/14154792/195929366-db11f5e8-4152-468f-a786-50a2e711109a.mov

Steps to Reproduce

• Use the unsigned in version of pre-need
• Select "other" for relationship to service member
• Reach the step military service and confirm that the sponsor's branch of service question has 50+ options

Desired behavior

• Uncertain what the desired behavior is. We should conduct a little secondary research to understand this better and figure out next steps.

Acceptance Criteria

• [ ] Designer reviews military service history page
• [ ] ??

How to configure this issue

• [ ] Attached to a Milestone (when will this be completed?)
• [ ] Attached to Epic (what body of work is this a part of? possibly Ongoing Maintenance)
• [ ] Labeled with Team (product support, analytics-insights, operations, triage, tools-improvements)
• [ ] Labeled with Practice Area (backend, frontend, devops, design, research, product, ia, qa, analytics, contact center, research, accessibility, content)
• [ ] Labeled with Bug

[sonntag-adam]

@ccruzgra @barron-charles

[ccruzgra]

@joshkimux In the desired Behavior where you state secondary research needs to be conducted to figure out what needs to be happening, is that Platform folks that need to do that or does that fall on my team?

[joshkimux]

@ccruzgra this would fall within your team 🙇

[MichelleDieudonne]

Jira work item link: https://vajira.max.gov/browse/MBMS-37682

[ccruzgra]

@coforma-terry Could you please clarify the issue above for it's missing unique labels for list loop buttons. Is that referring to the aria labels missing from the card's buttons?

Also, bullet 2 regarding EVSS does not apply to us as our Tech Lead confirmed we don't use EVSS.

[coforma-terry]

Hi @ccruzgra - let me check with one of the a11y specialists, this one's out of my wheelhouse :)

[eli-oat]

@ccruzgra thanks for this question!

this ticket provides more details about the list loop buttons. I am new to this specific ticket, so am not certain of the markup you are working with (is there a link to this in staging I could review?), but the tl;dr is that when building a list of distinct but similar data you need someway to distinguish between the duplicate date other than visually. Typically this is resolved with aria, but it could be done with heading grouping, I believe (I'd want to confirm that with DST before suggesting that as a diffinitive answer).

[ccruzgra]

Hi @eli-oat. This form is found at https://staging.va.gov/burials-and-memorials/pre-need/form-10007-apply-for-eligibility/introduction.

[barron-charles]

@eli-oat did you have a chance to speak with DST regarding this issue?

[eli-oat]

I haven't yet spoken with them, @barron-charles

• multiple responses
• VA Forms Library - How to work with Array Data (aka List Loops)

Sorry, I was speaking in the hypothetical and wasn't sure how you all wanted to proceed. I will reach out to them now and follow up.

[barron-charles]

Thanks you! It's much appreciated.

[eli-oat]

This has been a difficult one to determine definitively since there are a couple of list loop patterns at exist, including:

• Contact info list loop
• summary + add page list loop which is a lot like contact info, but there is only 1 add/edit page
• List loop + summary where the summary is shown after adding everything. The docs for this one are wicked minimal

That said, the issue initially flagged is still present, wherein you cannot clearly navigate items in any way other than visually.

The heading map shows this, too:

Apply Online For Pre-Need Determination Of Eligibility In A VA National Cemetery | Veterans Affairs
1 Apply for pre-need eligibility determination
    2 Step 2 of 6: Military historyWe’ll save your application on every change.
        3 New service period
    2 Need help?
    2 Veteran programs and services
    2 More VA resources
    2 Get VA updates
    2 In crisis? Talk to someone now
    2 Get answers
    2 Call us
    2 Visit a medical center or regional office
    2 Language assistance

When the heading map is compared to that screenshot of the form, you'll notice that the previous military history item isn't present -- this is similar to the experience in voice over, where it is difficult to navigate to the existing military history.