VAModalPicker pattern update

[htcollier]

Description

The picker overlay used throughout our app for selectboxes (VAModalPicker) contains both a Cancel and a Done, but should not. This is causing some issues with error handling as well as allowing users to make an invalid selection, causing an error.

We want to bring the pattern in line with standard iOS pickers and prevent unnecessary errors by not offering an invalid choice as a forward-moving option. To do that, we recommend the following update to the picker:

Picker: Single choice selection (example: Profile - Country)

• Name in code: VAModalPicker
• Appearance: In a picker overlay in which it is only possible to select a single row, show a Cancel in the top left.
• Interaction:
  • Selecting a row results in closing the picker and populating the form with that choice.
  • Tapping outside the picker, swiping down, or pressing Cancel closes the picker (without displaying an inline error).
• Errors: Appears upon pressing submit on the entire form if a choice was required, but wasn't made.

This change affects all pickers in the app, including (but not limited to):

• Profile - State
• Profile - Country
• Secure Messaging - To
• Secure Messaging - Subject
• Claims - Document Type
• Payments History - Select a Year

Acceptance Criteria

- [ ] In a picker overlay in which it is only possible to select a single row, it shows a Cancel in the top left. - [ ] Selecting a row results in closing the picker and populating the form with that choice. - [ ] ~~Tapping outside the picker, swiping down, or~~ pressing Cancel closes the picker - [ ] Closing the picker without making a choice but before pressing Submit does not trigger an inline error. - [ ] An error appears upon pressing submit on the entire form if a choice was required, but wasn't made. **Accessibility Requirements** - [ ] AC 1 - [ ] AC 2 - [ ] AC 3 ## Notes & Open Questions iOS Single choice selection picker example  - Dependencies/Roadblocks: - Any internal/external dependencies? - Test accounts needed? - Does this require QA? - Dev Notes: ## Ticket Checklist - [x] Acceptance criteria defined - [ ] Labels added (front-end, back-end, feature) - [ ] Linked to an Epic

[bischoffa]

Per Binny - 'Tapping outside the picker, swiping down,...' This is not part of our picker functionality right now, as a general callout. We'd need another ticket to include that part or could maybe include it on this ticket depending on the scope we want to set.

[htcollier]

Redacted the 'Tapping outside the picker, swiping down,...' for now

[htcollier]

@jessicawoodin to take care of adding the updated component to the Figma DL when the time comes

[kellylein]

The use of a Picker is a pattern, not a component, so this would stay with the Global team.