Update phone numbers in Facilities products to use component

[laflannery]

Description

The majority of telephone numbers within facilities products do not currently use the <va-telephone> component. This is something that should be updated. Some are using the component but need to be updated to include the message-aria-describedby prop to make these more accessible.

Considerations

• We should get a full list of everywhere phone numbers need to be updated within the products
• Max also wanted to update this so the component is wrapped in <p class="vads-u-margin-top--0"> vs a generic <div>

Where this needs to be updated

Important: When adding the component, we want to make sure that exts are being parsed correctly so they both display properly and are able to be called.

VAMC

• System
  • All phone numbers for each facility listed should use the component with the message-aria-describedby prop
• Locations
  • The main location number and the phone numbers for Health clinics need to be updated and should use the message-aria-describedby prop
  • The numbers under "Other nearby VA locations" are already using the proper component but need to be updated to use the message-aria-describedby prop
• Billing and Insurance
  • The first phone number, for copay questions, is not using the component but should be updated. Example page with an ext
• Facilities
  • I believe the only place this needs to be updated is the main contact info section and in this scenario the message-aria-describedby prop should be used.
  • The other phone numbers I'm seeing are either CMS content (which can't be updated) and Service info (which already is using the component).
• Staff Listing
• Staff Detail
• Detail page
  • I am not positive where the Staff Profile that shows on a Detail page lives but this has a phone number that needs to be updated. Example FE page, associated CMS page

Vet Centers

• On the main Vet center page, there is an alert with a phone number. This is not using the component. If this can be updated we should.

VBA

• VA benefits hotline number should be updated to use the message-aria-describedby prop
• Both phone numbers (Standard and TTY number) in the "Can't find services" alert should be updated

Confirm ext parsing

Some phone numbers are already using the component but we want to be sure that the exts are parsing properly. Places to confirm:

• Non-clinical service phone numbers on VAMC Register for Care
• Non-clinical service phone numbers on VAMC Medical Records
• Non-clinical service phone numbers on VAMC Billing and Insurance
• Health service phone numbers on VAMC Facility accordions

CMS Content

Templates where I do not believe we can use the component because the only phone numbers are coming from CMS content but I want to mention these in case I missed something and updates could happen:

• VAMC Operating status
• VAMC Health Services
• VAMC Policies
• VAMC Detail pages (except for the Staff profile mentioned above)

Acceptance Criteria

• [x] VAMC:
  • [x] All phone numbers on System template are updated to use the component with the message-aria-describedby prop
  • [x] Phone numbers on the Locations template have been updated to use the component with the message-aria-describedby prop
  • [x] On the Locations template, "Other nearby VA locations" have been updated with the message-aria-describedby prop
  • [x] Phone number on Billing and Insurance has been updated to use the component
  • [x] Phone numbers on the Facilities template have been updated to use the component with the message-aria-describedby prop
  • [x] Staff Listing template has been updated to use the component
  • [x] Staff Detail template has been updated to use the component
  • [x] Staff Profile phone number has been updated to use the component
• [ ] ~Phone number in the Vet center alert has been updated to use the component~
• [x] VBA Benefits Hotline number has been updated with message-aria-describedby prop
• [ ] ~Both phone numbers in VBA alert have been updated to use the component~
• [x] Exts in all phone numbers are parsed correctly
• [ ] Templates indicated as having CMS content only have been reviewed to ensure nothing has been missed
• [ ] component is wrapped in <p class="vads-u-margin-top--0"> vs a generic <div>
• [x] Update and run existing test(s).
• [x] If additional tests are needed, stub a ticket to note this for future work.
• [x] Updates are validated across VA Supported browsers
• [x] Requires accessibility review (Laura is tagged for PR review)

[swirtSJW]

Related slack conversation

[xiongjaneg]

This relies on the multiple sources of data being corrected at the source. Current work is being done in Drupal and Sandy's DB to correct these, so front end work should wait until that is done.

[swirtSJW]

CMS work is now complete on all migrated phone numbers so this is clear to proceed.

[xiongjaneg]

@aklausmeier Do you know or could you check the timing on the telephone component V3 update?

[xiongjaneg]

@xiongjaneg If V3 isn't happening soon, this ticket could be separate tickets since it covers a number of issues (template by template). Work with FE.

[aklausmeier]

@xiongjaneg confirmed with DST there are no plans for a V3 va-telephone component as this component does not exist with USWDS which is the push for any V3 component updates

[laflannery]

Noted in #16945 what is and is not using <va-telephone> within Vet Center product

[xiongjaneg]

@xiongjaneg move Max's note into the epic ticket

[xiongjaneg]

closing in favor of individual component update tickets

[jilladams]

Pivot! We need to be surgical about this fix on accessibility grounds, since we have an overload of Q2 priorities, and won't be able to tackle all of the V1/V3 component adoptions for impostor components in this quarter. Reopening this ticket.

[ian-sears]

From the CMS Help Desk I've had a Help Desk ticket opened for quite a while as this component becomes developed. Understanding the recent Pivot, I am simply dropping a sample link (from an Editor) and his comment describing the issue he discovered. Non-component phone numbers do not resolve correctly on mobile phones when clicked.

His sample link: https://www.va.gov/eastern-oklahoma-health-care/locations/yale-avenue-va-clinic/ His comment: "I’m not sure if this is happening Drupal-wide, but in particular I’ve noticed the main phone and mental health phone numbers on facility pages do not work as intended on mobile if they have an extension. As an example, if you click on either of those phone numbers on mobile from the Yale Ave clinic page, when your phone launches the call, it assigns numeric values to the letters and includes any punctuation like commas and periods. I’m pretty sure that won’t work correctly if I place the call.

Is there a way that we could have a separate place to list extensions or direct menu options? Just to ensure the mobile functionality works correctly.

Thanks for all the help!" -Tyler Moore" (reference Jira Help Desk ticket VAHELP-7084 February 22, 2024)

[jilladams]

@laflannery to help pull the telephone updates from impostor components epic over into this ticket.

[laflannery]

@jilladams This ticket has been updated and should be ready for the engineers to point now. Let me know if there's any questions on anything

[laflannery]

Adding a link to notes from phone number audit

[davidmpickett]

@eselkin Can you provide an update on the status of this ticket?

[eselkin]

Yes, I'm just verifying everything and getting it ready for two PRs. I said yesterday, the quantity of items to update was larger and more complex than first thought.

[eselkin]

Some updates. We cannot include most <va-telephone> in a <p> in most cases. Paragraph tags by nature produce a new line block and most of the <va-telephone> are inline.

The VBA alert and Vet-center alert content with phone numbers are coming in as links from CMS content that cannot be converted to the component.

Tests needed to be updated on vets-website.

[eselkin]

I created a liquid filter that attempts to process a number into <va-telephone> but if the string of numbers has alphabetic characters it falls back to an <a href="tel:"> element because va-telephone components cannot display those values

[eselkin]

I also updated the phone number template to use the sms, tty, and fax/not-clickable features of <va-telephone>

[laflannery]

For proper bookkeeping, I struckout the ACs for the phone numbers in both the Vet Center and the VBA alerts because these couldn't actually be updated, they are CMS content (from Eli's comment here)

[laflannery]

Confirmed telephone components on prod! closing