Improve UX and content quality for phone numbers

[kevwalsh]

Background

User Story or Problem Statement

The existing phone number paragraph type has a "phone number" field built with plain text, not the phone number field type. It's unclear what was behind that decision.

This presents a number of UX and data quality risk. We don't perform form validation on this, and it's unclear how to enter a phone number. There's help text, but it's less than ideal (users tend not to read help text, especially for common fields like phone numbers because they assume the system will autoformat or validate for them).

Current state

​ 

Ideal future state with localized input masks

 [some background on this approach](https://baymard.com/blog/input-masking-form-field)

Affected users and stakeholders

• Mainy VAMC editors now, but could be others in the future.

Hypothesis

We believe that a dedicate phone number field with input masking will improve the UX and data quality.

Constraints

• We need a phone number extension field
• We'll need to migrate data

(How will these assumptions be validated?)

Acceptance Criteria

• [ ] Existing data is maintained, via migration(will we need to do any data cleanup?)
• [ ] There's a path for including the phone number extension
• [ ] We can handle edge cases like Manila or non-US formatted numbers (and we have context somehow for doing so)

Design principles

Veteran-centered

• [ ] Single source of truth: Increase reliability and consistency of content on VA.gov by providing a single source of truth.
• [ ] Accessible, plain language: Provide guardrails and guidelines to ensure content quality.
• [x] Purposely structured content: Ensure Content API can deliver content whose meaning matches its structure.
• [ ] Content lifecycle governance: Produce tools, processes and policies to maintain content quality throughout its lifecycle.

Editor-centered

• [ ] Purpose-driven: Create an opportunity to involve the editor community in VA’s mission and content strategy goals.
• [x] Efficient: Remove distractions and create clear, straightforward paths to get the job done.
• [ ] Approachable: Offer friendly guidance over authoritative instruction.
• [ ] Consistent: Reduce user’s mental load by allowing them to fall back on pattern recognition to complete tasks.
• [ ] Empowering: Provide clear information to help editors make decisions about their work.

Possible runbook

• Spike
  • Design blue sky phone number paragraph
  • Proof of concept for input masking
  • determine how we handle edge cases (or not handle them) for localization of phone number number field (US vs Manila vs elsewhere)
  • How many non-USA phone numbers are currently on va.gov?
  • How should Drupal handle phone number extension field
  • Audit existing plain text phone number field for migratability / data cleanliness
• Create Integration branch
• Create new field as hidden and migrate/sync data from old to new
• Theme the new input mask

CMS Team

Please check the team(s) that will do this work.

• [ ] CMS Program
• [ ] Platform CMS Team
• [ ] Sitewide CMS Team (leave Sitewide unchecked and check the specific team instead)
  • [x] ⭐️ Content ops
  • [x] ⭐️ CMS experience
  • [ ] ⭐️ Offices
  • [ ] ⭐️ Product support
  • [ ] ⭐️ User support

[kevwalsh]

As mentioned on #8167, https://www.drupal.org/project/telephone_validation and https://www.drupal.org/project/mask look like great options.

[EWashb]

@kevwalsh I found this Phone numbers in rich text fields https://github.com/department-of-veterans-affairs/va.gov-cms/issues/1964

Should we close one in favor of another? Or move the above into this epic?