UX discovery: Phone numbers in rich text fields

[kevwalsh]

User story

As an editor, i want to make phone numbers added to a rich text field clickable and accessible, per the content style guide

"As an editor I can put in a phone number in a rich text area and 'it just works'"

Context

Editors struggle with...

• Formatting aria labels
• Extensions
• Technical knowledge necessary to follow all the style guidelines

Constraints

• We can't go back and correct incorrectly formatted phone numbers, so the approach is to put guardrails in place going forward
• Building for CKeditor

VA.gov content guidelines for phone numbers:

• Use hyphens between numbers, and don’t use parentheses to set off the area code: 212-123-1234
• Hyperlink all phone numbers, including TTY numbers - could generate programmatically
• Use the following source code for 508 accessibility (aria label) - could probably automatically generate
• For phone numbers with an extension, use ext. at the end: 202-123-1234, ext. 9.
• SMS - checkbox for editor to select that it's sms
• TTY - could add checkbox to allow editors to select that it's tty (so folks can confirm that they are trying to do tty). Aria label should have tty
• We don’t use vanity phone numbers in body copy. We use and hyperlink only the numeric phone number in body copy. (Exception: right rail promo content) - add validation / don't allow alpha characters. Input masking would take care of this.

Problem statement

1. The VA.gov standards for accessible phone numbers are admirably high, originally designed for product teams who write phone numbers in code
2. There are X thousand phone numbers added to rich text fields in CMS.
3. The current rich text editor used by 100s of CMS editors does not make it easy for editors meet this standard, and some rely on an XLS spreadsheet to help them write good phone number href tags and then paste into the source of the rich text editor.

How might we make it easier for editors to add accessible phone numbers?

• We could add a phone number widget to the Rich text editor, asking for various fields.
• Drupal could process plain text phone numbers as part of its rich text processing
• FE could process plain text phone number in a liquid template

Etc.

Worth doing an analysis of how others have handled this with CKeditor

Dave: the FE has the ability (as I understand it) to put a 'filter' on text to essentially detect phone numbers and render them correctly during the build. However I think this may fail when it comes to including extensions. See Slack thread for more context

Need to consider SMS and other "actionable numbers" -- how can we move away from reliance on the FE to render numbers this way?

Related epic: https://github.com/department-of-veterans-affairs/va.gov-cms/issues/7963

ACs

• [ ] UX recommendations about workflow/UI considerations to help editors understand
• [ ] and format actionable numbers correctly following https://design.va.gov/components/telephone

[EWashb]

Removed CKeditor5 as a blocker since there may be more dependencies to that implementation. The solution for this issue does not need to solely rely on CKeditor

[rachel-kauff]

4/26 Process definition -- Focus for Sprint 57 --

• [ ] Refine definitions of the use cases based on:
  • VA.gov style guidelines
  • What we know people are doing (wrong)
  • What people are trying to do
  • Where the situation applies (what content types)
• [ ] Look at what CKeditor5 has to offer - Cindy and Kauff
• [ ] Install CKeditor5 in a Tubgoat so we can play with it - Lynn
• [ ] Micro user stories - designers, validate w/ devs

--- Will spill into Sprint 58:---

• [ ] Wireframe editor workflow - Designers, validate w/ devs
• [ ] Write out functionality requirements - devs, validate w/ designers
• [ ] Build a prototype version of CKeditor5 to wireframe/prototype with (hifi or lofi?) - Designers
• [ ] Feasibility review - Designers + devs
• [ ] (possibly) design iteration based on feasibility review
• [ ] Provide any additional design assets (prob just icons) - Designers
• [ ] build phone number plugin for CKeditor5

Decisions

• Don't style anything - out of scope!

[laflannery]

Editor Advanced link This is definitely a viable option for helping with phone numbers Works with D10 and CKeditor 5

• I couldn't find anything that had a link type option, something that would let you choose that you were creating a tel: link
• I also couldn't find a more specific phone number widget for the CKEditor. We could possibly make our own if we felt this would be helpful something with individual fields that the WYSIWYG could then format correctly
  • Individual phone number and ext field and then could we auto process this into the correct code in the WYSIWYG with the proper aria-label and href?

[laflannery]

Closing this in favor of more recent tickets and direction