VACMS-19512: Drupal UX for phone numbers

[davidmpickett]

Description

Relates to #19512
Also fixing #16150 as a bonus

Testing done

Manual in Tugboat

Screenshots

Entity & state	Current UI	Updated UI
Staff profile (no phone)
Staff profile (with phone)
VAMC Billing & insurance (with phone)
VAMC Billing & insurance (no phone)
VAMC Facility mental health (with phone)
VAMC Facility mental health (no phone)
VAMC Facility mental health (FEATURE TOGGLE OFF)

QA steps

What needs to be checked to prove this works?
What needs to be checked to prove it didn't break any related things?
What variations of circumstances (users, actions, values) need to be checked?

Once per day setup

1. Log in as an admin
2. Go to Feature Toggle page
   • Check FEATURE_TELEPHONE_MIGRATION_V1
   • Click Save
3. Run Telephone migration (optional)
   • Go to Dashboard
   • Run each command below separately in php terminal
   • Total migration time should be 30-40 minutes.

time drush codit-batch-operations:run MigratePhoneFieldToParagraph
time drush codit-batch-operations:run MigrateVamcBillingInsurancePhoneFieldToParagraph
time drush codit-batch-operations:run MigrateVamcFacilityMentalHealthPhoneFieldToParagraph

Check Staff Profile

1. Log in to tugboat as a VAMC editor or Content Admin
2. Go to Content > Add Content > Staff Profile
3. Save a staff profile with no phone number
   • Fill in the required fields (First name, last name, section, related office)
   • In the contact information box, notice that by default, no phone number has been added
   • Add a revision message and save as draft
4. Save a staff profile with a phone number
   • Edit the staff profile you just created
   • In the contact information box click the Add Phone number button
   • Before filling out any of the phone number sub-fields, add a revision message and attempt save as draft
   • See validation error for not filling out the required phone number sub-field
   • Fill in the required fields
   • Save as draft
5. Remove a phone number from a staff profile
   • Edit the staff profile again
   • In the contact information box click the Remove button
   • Click confirm removal button (this is technically optional)
   • Add a revision message and save as draft

Check VAMC System Billing & Insurance

1. Log in to tugboat as a Content Admin
2. Go to Content > Add Content > VAMC System Billing and Insurance
3. Save a Billing & Insurance page with a phone number
   • Notice that in the "For inquiries by phone about copay balance" section, a phone number is added by default
   • Before filling out any of the phone number sub-fields, add a revision message and attempt save as draft
   • See validation error for not filling out the required phone number sub-field
   • Fill in other required fields
   • Save as draft
4. Remove a phone number from a Billing & Insurance page
   • Edit the page you just created
   • In the "For inquiries by phone about copay balance" section click the Remove button
   • Click confirm removal button (this is technically optional)
   • Add a revision message and save as draft
5. Add a phone number
   • Edit the page you just created
   • In the "For inquiries by phone about copay balance" section click the Add Phone number button
   • Confirm that the correct phone number fields populate
6. Verify change for 16150
   • Edit the page you just created
   • Notice that there is no longer an empty "Cashier's office" accordion

Check VAMC Facility - Mental Health Phone Number

1. Log in to tugboat as a Content Admin
2. Go to Content > Add Content > VAMC Facility
3. Save a VAMC facility page with a phone number
   • Notice that in the "Mental health phone number" section, a phone number is added by default
   • Before filling out any of the phone number sub-fields, add a revision message and attempt save as draft
   • See validation error for not filling out the required phone number sub-field
   • Fill in other required fields
   • Save as draft
4. Remove a phone number from a VAMC facility page
   • Edit the page you just created
   • In the "Mental health phone number" section click the Remove button
   • Click confirm removal button (this is technically optional)
   • Add a revision message and save as draft
5. Add a phone number
   • Edit the page you just created
   • In the "Mental health phone number" section click the Add Phone number button
   • Confirm that the correct phone number fields populate

Check VAMC Facility - Mental Health Phone Number TOGGLE OFF

1. Log in as an admin
2. Go to Feature Toggle page
   • Uncheck FEATURE_TELEPHONE_MIGRATION_V1
   • Click Save
3. Go to Content > Add Content > VAMC Facility
4. Notice the slightly changed interface compared to prod

Check other phone number paragraph types to make sure we didn't break their styling

• VAMC System VA Police
• VBA Facility Service (service location)

Definition of Done

• Automated tests have passed.
• Code Quality Tests have passed.
• Acceptance Criteria in related issue are met.
• Manual Code Review Approved.

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[jilladams]

QA notes

Basic behavior

• Content with no phone number: add phone, save: 🟢
• Content with a phone number: remove phone number, save: 🟢
• Field validations work as expected: 🟢

Label field weirdness 🔴 - now ticketed as #19623

On Staff profile, I removed an existing phone number, added a new one and saved with max char length to test. After removing phone, clicking to Add phone, I see a Label field (across all content types). To reproduce:

• Remove an existing phone #
• Add phone - new fields appear: Type, Phone Number, Extension number, Label.
  • Refresh page without populating fields:
    • Label field disappears
  • OR, save content in the field.
    • Node view shows the Label field value
    • Node edit hides the Label field

https://pr19607-h5ubpjxulma3zyqeq8hayikh80scnqhu.ci.cms.va.gov/node/73936

https://pr19607-h5ubpjxulma3zyqeq8hayikh80scnqhu.ci.cms.va.gov/node/73936/edit

Test content (FE is building on Fri pm and can be verified on Monday):

• Staff profile node: https://pr19607-h5ubpjxulma3zyqeq8hayikh80scnqhu.ci.cms.va.gov/sheridan-health-care/staff-profiles/esther-reece
  • Staff profile FE: https://web-h5ubpjxulma3zyqeq8hayikh80scnqhu.ci.cms.va.gov/sheridan-health-care/staff-profiles/esther-reece
• B&I node: https://pr19607-h5ubpjxulma3zyqeq8hayikh80scnqhu.ci.cms.va.gov/central-western-massachusetts-health-care/billing-and-insurance
  • B&I FE: https://web-h5ubpjxulma3zyqeq8hayikh80scnqhu.ci.cms.va.gov/central-western-massachusetts-health-care/billing-and-insurance -- Extension and label do not print. (To be expected since this FE work is WIP.)
• VA clinic MH: https://pr19607-h5ubpjxulma3zyqeq8hayikh80scnqhu.ci.cms.va.gov/spokane-health-care/locations/spokane-valley-va-clinic
  • FE: https://web-h5ubpjxulma3zyqeq8hayikh80scnqhu.ci.cms.va.gov/spokane-health-care/locations -- Extension and label do not print
• Mobile clinic: https://pr19607-h5ubpjxulma3zyqeq8hayikh80scnqhu.ci.cms.va.gov/southern-arizona-health-care/locations/tucson-va-mobile-clinic
  • https://web-h5ubpjxulma3zyqeq8hayikh80scnqhu.ci.cms.va.gov/southern-arizona-health-care/locations/tucson-va-mobile-clinic -- Extension and label do not print.
• VAMC: https://pr19607-h5ubpjxulma3zyqeq8hayikh80scnqhu.ci.cms.va.gov/alaska-health-care/locations/joint-base-elmendorf-richardson-va-medical-center
  • https://web-h5ubpjxulma3zyqeq8hayikh80scnqhu.ci.cms.va.gov/alaska-health-care/locations/joint-base-elmendorf-richardson-va-medical-center -- Extension prints as ext 1, label does not

This probably blocks the PR, until we prove whether the label prints in the FE or not.

Remove confirmation / truncated text 🟡

Removal confirmation is technically optional per the QA steps.

When I use the "remove" button to remove, I get a confirmation prompt with truncated text. Loom that shows the experience: https://www.loom.com/share/7f203fbc6650489288d51f85a0e3dd09

This doesn't have to block the PR, but is not great UX debt to add while trying to improve the experience, so I do think it needs follow up. If the confirmation is optional, can we remove it? Or do we need to keep it and address the truncated text? (Updating .js .paragraph-type-top .paragraph-type-title to > 25% displays the full text.)

Empty Cashier's office accordion on B&I

Observed that Cashier's office accordion is empty. That's a documented defect: #16150

[jilladams]

I'm a goofy person, and we cannot test what happens in the fe, because the FE isn't using the new phone number structure yet. I think. Not sure what that means for troubleshooting / fixing labels and whether or not this can merge.

[davidmpickett]

Label field weirdness 🔴

On Staff profile, I removed an existing phone number, added a new one and saved with max char length to test. After removing phone, clicking to Add phone, I see a Label field (across all content types). To reproduce:

• Remove an existing phone #

• Add phone - new fields appear: Type, Phone Number, Extension number, Label.

  • Refresh page without populating fields:

    • Label field disappears

  • OR, save content in the field.

    • Node view shows the Label field value
    • Node edit hides the Label field

I also noticed this behavior when I was doing QA. However, this behavior is not specific to my PR. I flipped the feature toggle on my demo tugboat and confirmed that the label field shows up if you add, remove, and re-add.

Fixing this should be a separate ticket.

[github-actions]

Checking composer.lock changes...

[davidmpickett]

Remove confirmation / truncated text 🟡

Removal confirmation is technically optional per the QA steps.

When I use the "remove" button to remove, I get a confirmation prompt with truncated text. Loom that shows the experience: https://www.loom.com/share/7f203fbc6650489288d51f85a0e3dd09

This doesn't have to block the PR, but is not great UX debt to add while trying to improve the experience, so I do think it needs follow up. If the confirmation is optional, can we remove it? Or do we need to keep it and address the truncated text? (Updating .js .paragraph-type-top .paragraph-type-title to > 25% displays the full text.)

I just committed a change to increase that to 40%, but then that makes this PR need CMS platform review since that's changing a more fundamental property in the system. I'm also not sure how we would go about verifying that increasing this percentage doesn't create problems elsewhere in the CMS.

Per scrum discussion: out of scope

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[omahane]

Sorry, one more thing. On VAMC Facility content type. When the paragraph field is present I see "Phone number" but then when I remove it this label changes to "Mental health phone number". Was that intentional? Can it remain "Phone number"? !

This is a known bug in the old paragraph widget, which we are using here:
https://www.drupal.org/project/paragraphs/issues/3067178

If we want, we could go back to using the newer one, which has its own UX oddities.

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[laflannery]

@omahane Then that's fine, it's not a deal breaker, thanks!

[dsasser]

Code changes look good!

[dsasser]

Noting this change is expected as it resolves #16150 which is included in this PR.

[github-actions]

Checking composer.lock changes...

[va-cms-bot]

Cypress Accessibility Violations

/test-data-deleniti

ID: button-name
Impact: critical
Tags: cat.name-role-value, wcag2a, wcag412, section508, section508.22.a, ACT, TTv5, TT6.a
Description: Ensures buttons have discernible text
Help: Buttons must have discernible text
Nodes:

• HTML: <button class="proofing-element-help" role="tooltip" data-proofing-help-title="About 'Page introduction' field" data-proofing-help="Add an introduction that helps visitors understand if information on the page is relevant to them."> <span aria-hidden="true">i</span> </button>
  Impact: critical
  Target: .field--name-field-intro-text-limited-html > .field__label > .proofing-element-help[role="tooltip"]
  Summary: Fix any of the following:
  Element does not have inner text that is visible to screen readers
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element's default semantics were not overridden with role="none" or role="presentation"

• HTML: <button class="proofing-element-help" role="tooltip" data-proofing-help-title="About 'Generate a table of contents from major headings' field" data-proofing-help="By checking this box, all h2's below this point on the page will be linked with with anchor links. This helps users navigate content on very long pages. Do not check this box unless there is at least 2 h2's on the page.">
  Impact: critical
  Target: .field--name-field-table-of-contents-boolean > .field__label > .proofing-element-help[role="tooltip"]
  Summary: Fix any of the following:
  Element does not have inner text that is visible to screen readers
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element's default semantics were not overridden with role="none" or role="presentation"

• HTML: <button class="proofing-element-help" role="tooltip" data-proofing-help-title="About 'Main content' field" data-proofing-help="The main body of the page, which appears below the featured content."> <span aria-hidden="true">i</span> </button>
  Impact: critical
  Target: button[data-proofing-help-title="About 'Main content' field"]
  Summary: Fix any of the following:
  Element does not have inner text that is visible to screen readers
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element's default semantics were not overridden with role="none" or role="presentation"

[omahane]

I can't save a new VAMC System Billing and Insurance:

It's fine. The phone validation worked correctly.

[omahane]

I didn't see the point in testing with the toggle off, as we've already migrated and have moved over to the new paragraph phone field in production.