VACMS-17863: Adds validation to ext field in phone paragraph.

[dsasser]

Description

Adds numeric validator and applies it to the extension field of the phone paragraph.

Also adds "input mask" for the extension field to ensure that only numbers (and some control characters) can be entered.

Relates to #17863

Testing done

Manual
Cypress
Unit

Screenshots

QA steps

Validate extension input mask when creating a new phone number:
As Content Admin

• Visit https://pr20651-ip9zgupiitvyfskhuiqm7kc688wxuhp3.ci.cms.va.gov/node/add/person_profile
• Fill out required fields
• Click the 'Add phone number' link in the Contact Info section
• Type a valid phone number
• Try to type an invalid phone extension, eg: x1234.
• Validate you cannot type an invalid phone extension.
• Visit https://pr20651-ip9zgupiitvyfskhuiqm7kc688wxuhp3.ci.cms.va.gov/node/add/media_list_images
• Fill out required fields
• Click the 'Add phone number' link in the Contact Info section
• Type a valid phone number
• Try to type an invalid phone extension, eg: x1234.
• Validate you cannot type an invalid phone extension.

Validate extension input mask when editing an existing phone number:

• Visit https://pr20651-ip9zgupiitvyfskhuiqm7kc688wxuhp3.ci.cms.va.gov/node/16297/edit
• Try to type an invalid phone extension, eg: x1234.
• Validate you cannot type an invalid phone extension.

Validate backend validation on extension field:

• Visit https://pr20651-ip9zgupiitvyfskhuiqm7kc688wxuhp3.ci.cms.va.gov/node/add/person_profile
• Fill out required fields
• Click the 'Add phone number' link in the Contact Info section
• Type a valid phone number
• Copy this extension to your clipboard x1234
• In the 'Extension number', right click and PASTE the extension into the 'Extension number' field
• Validate you see x1234 in the 'Extension number' field
• Save the form
• Validate you get the error message '1 error has been found: Extension number'
• Scroll down to the 'Extension number' field
• Validate you see the error message 'Enter an extension that contains only numeric characters (0-9).' under the 'Extension number' field.
• Validate that the 'Extension number' field has a red border
• Validate 'Extension number' is in red.

Definition of Done

• Documentation has been updated, if applicable.
• Tests have been added if necessary.
• Automated tests have passed.
• Code Quality Tests have passed.
• Acceptance Criteria in related issue are met.
• Manual Code Review Approved.
• If there are field changes, front end output has been thoroughly checked.

Select Team for PR review

• CMS Team
• Public websites
• Facilities
• User support
• Accelerated Publishing

Is this PR blocked by another PR?

Blocked by #20611

• DO NOT MERGE

Does this PR need review from a Product Owner

• Needs PO review

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[github-actions]

GitHub Workflows (.github/workflows/*.yml)

Have you...

• pinned all affected GitHub Actions at a specific commit by SHA?
• reviewed the source code of the action at the commit you are pinning?
• confirmed that no GitHub security measures are being bypassed?
• checked for any injection of user content into protected contexts?
• reviewed Security hardening for GitHub Actions?
• reviewed GitHub Workflows?

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[omahane]

Tabbing like crazy! Perfect.

[Shamiaalam]

@dsasser I run through screen reader, key board navigation. and some other A11y test with requirements! Also keyboard tabbing is perfectly fine. Approved ✅

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[va-cms-bot]

Cypress Accessibility Violations

/test-data-aut

ID: button-name
Impact: critical
Tags: cat.name-role-value, wcag2a, wcag412, section508, section508.22.a, TTv5, TT6.a, EN-301-549, EN-9.4.1.2, ACT
Description: Ensure 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 does not have an implicit (wrapped) <label>
  Element does not have an explicit <label>
  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 does not have an implicit (wrapped) <label>
  Element does not have an explicit <label>
  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 does not have an implicit (wrapped) <label>
  Element does not have an explicit <label>
  Element's default semantics were not overridden with role="none" or role="presentation"

[dsasser]

Christian let us know that the blocker for this PR, his phone extension migration scripts, have been run on prod so were are safe to merge.