VACMS-19544: Adding Connect with Us Content Block

[davidmpickett]

Description

Relates to #19544

Testing done

Manual in tugboat

Screenshots

New Connect with Us content block interface


Current Office node Connect with Us interface


CLP Node view with old way showing VERY OBVIOUS DRAFT CONTENT while new way does not


BHLP Node view with old way showing VERY OBVIOUS DRAFT CONTENT while new way does not


QA steps

Part 1 - Create a new Connect with Us Block

1. Log into the Tugboat as a Content Admin
2. Go to Content > Blocks > And content block > Connect with us
3. Fill out the fields
   • You can copy and paste from the Connect With Us section of these 4 Office nodes
   • NCA
   • VACO
   • VBA
   • VHA
4. Save as published

Part 2 - Stress test the Connect with Us Block form

1. Log into the Tugboat as a Content Admin
2. Go to Content > Blocks > And content block > Connect with us
3. Attempt to save without entering information in any field
4. Confirm appropriate validation errors occur
5. Attempt to put invalid URLs in the URL field
6. Notice that the Link Text fields become required once something is entered in URL field
7. And vice versa with URL fields being required once text is entered in Link Text
8. Save it with every different moderation state

Part 3 - Compare it with the existing Office node form

1. Log into the Tugboat as a Content Admin
2. Go to Content > Add content > Office
3. Open the Connect with Us panel
4. Confirm that all the fields here are the same as the Connect with Us content block

Part 4 - Add it to a Benefit Hub Landing Page

1. Log into the Tugboat as a Content Admin
2. Go to Content and Filter by Content Type = Benefit Hub Landing Page
3. Choose a BHLP and edit it
4. In the right side bar, expand the Right Rail accordion
5. Scroll downnnn
6. Notice the Add a "Connect with us" block and Connect with us fields.
7. The first field is the old field - select an option
8. The second field is the new field - select a Connect with Us block you created in Step 1 or 2
9. Save as Published

Part 5 - Add it to a Campaign Landing Page

1. Log into the Tugboat as a Content Admin
2. Go to Content and Filter by Content Type = Campaign Landing Page
3. Choose a CLP and edit it
4. Scroll down to the Connect with Us accordion and open it
5. Notice the Add a "Connect with us" panel and Connect with us fields.
6. The first field is the old field - select an option
7. The second field is the new field - select a Connect with Us block you created in Step 1 or 2
8. Save as Published

Part 6 - Stress test the BHLP and CLP connection

1. Confirm that the Connect With Us fields works correctly on Node Add
   • [x] https://pr19770-drgsfxyuphduaugv2lfadosblcnwadfr.ci.cms.va.gov/node/add/campaign_landing_page
   • [x] https://pr19770-drgsfxyuphduaugv2lfadosblcnwadfr.ci.cms.va.gov/node/add/landing_page
2. Remove a Connect with us from a BHLP and CLP (set to none)
3. Save it with every different moderation state
4. Look at how stuff looks on Node View (I didn't make the new version as pretty as the old version)

Part 7 - See the different in published vs unpublished changes

1. Go to the Blocks list and edit the block you created in Step 1 and attached to a CLP and BHLP in Steps 4 & 5
2. Make some VERY OBVIOUS EDITS
3. Save this revision as DRAFT
4. Go to Content and Filter by Office
5. Select one of the four Offices with Connect with Us content (the same one you associated with a BHLP and CLP in Steps 4 & 5) and edit it
6. Make some VERY OBVIOUS EDITS
7. Save this revision as DRAFT
8. Go back to the BHLP and CLP nodes that are associated with this Block and Office
9. Notice on Node View that the old Connect With Us is showing the VERY OBVIOUS EDITS while the new Connect With Us is not, because it has a previous published revision
10. Party on, Garth

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.

[github-actions[bot]]

Checking composer.lock changes...

[github-actions[bot]]

Checking composer.lock changes...

[github-actions[bot]]

Checking composer.lock changes...

[github-actions[bot]]

Checking composer.lock changes...

[github-actions[bot]]

Checking composer.lock changes...

[github-actions[bot]]

Checking composer.lock changes...

[github-actions[bot]]

Checking composer.lock changes...

[laflannery]

Can we have the new one still say "Add a "Connect with us" block"? It's action oriented and a bit clearer as to what folks should do when they hit this dropdown. Or is there a technical reason why we can't have that any more?

[github-actions[bot]]

Checking composer.lock changes...

[github-actions[bot]]

Checking composer.lock changes...

[davidmpickett]

I see failing va/tests/phpunit (phpunit) tests:

I can't see what failed but based on what changed I suspect it is this test that failed.

I updated the test and now phpunit tests are passing. Thanks!

[davidmpickett]

Can we have the new one still say "Add a "Connect with us" block"? It's action oriented and a bit clearer as to what folks should do when they hit this dropdown. Or is there a technical reason why we can't have that any more?

Updated this on both BHLPs and CLPs. CLPs previously called it a panel, but block is more accurate

[thejordanwood]

@davidmpickett I've tested and it seems that everything is working as expected. Did you plan to leave the old label as "Add 'Connect with us' panel" on CLPs or were you going to change that to "block" as well? I could go either way on this.

[davidmpickett]

@davidmpickett I've tested and it seems that everything is working as expected. Did you plan to leave the old label as "Add 'Connect with us' panel" on CLPs or were you going to change that to "block" as well? I could go either way on this.

That label will be hidden in a follow up ticket, so I just left it as is for now.

[github-actions[bot]]

Checking composer.lock changes...

[va-cms-bot]

Accessibility Violations Found:

[
  {
    "route": "/test-data-sit",
    "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",
    "helpUrl": "https://dequeuniversity.com/rules/axe/4.7/button-name?application=axeAPI",
    "nodes": [
      {
        "any": [
          {
            "id": "button-has-visible-text",
            "data": null,
            "relatedNodes": [],
            "impact": "critical",
            "message": "Element does not have inner text that is visible to screen readers"
          },
          {
            "id": "aria-label",
            "data": null,
            "relatedNodes": [],
            "impact": "serious",
            "message": "aria-label attribute does not exist or is empty"
          },
          {
            "id": "aria-labelledby",
            "data": null,
            "relatedNodes": [],
            "impact": "serious",
            "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
          },
          {
            "id": "non-empty-title",
            "data": {
              "messageKey": "noAttr"
            },
            "relatedNodes": [],
            "impact": "serious",
            "message": "Element has no title attribute"
          },
          {
            "id": "presentational-role",
            "data": null,
            "relatedNodes": [],
            "impact": "minor",
            "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
          }
        ],
        "all": [],
        "none": [],
        "impact": "critical",
        "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>",
        "target": [
          ".field--name-field-intro-text-limited-html > .field__label > .proofing-element-help[role=\"tooltip\"]"
        ],
        "failureSummary": "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\""
      },
      {
        "any": [
          {
            "id": "button-has-visible-text",
            "data": null,
            "relatedNodes": [],
            "impact": "critical",
            "message": "Element does not have inner text that is visible to screen readers"
          },
          {
            "id": "aria-label",
            "data": null,
            "relatedNodes": [],
            "impact": "serious",
            "message": "aria-label attribute does not exist or is empty"
          },
          {
            "id": "aria-labelledby",
            "data": null,
            "relatedNodes": [],
            "impact": "serious",
            "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
          },
          {
            "id": "non-empty-title",
            "data": {
              "messageKey": "noAttr"
            },
            "relatedNodes": [],
            "impact": "serious",
            "message": "Element has no title attribute"
          },
          {
            "id": "presentational-role",
            "data": null,
            "relatedNodes": [],
            "impact": "minor",
            "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
          }
        ],
        "all": [],
        "none": [],
        "impact": "critical",
        "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.\">",
        "target": [
          ".field--name-field-table-of-contents-boolean > .field__label > .proofing-element-help[role=\"tooltip\"]"
        ],
        "failureSummary": "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\""
      },
      {
        "any": [
          {
            "id": "button-has-visible-text",
            "data": null,
            "relatedNodes": [],
            "impact": "critical",
            "message": "Element does not have inner text that is visible to screen readers"
          },
          {
            "id": "aria-label",
            "data": null,
            "relatedNodes": [],
            "impact": "serious",
            "message": "aria-label attribute does not exist or is empty"
          },
          {
            "id": "aria-labelledby",
            "data": null,
            "relatedNodes": [],
            "impact": "serious",
            "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
          },
          {
            "id": "non-empty-title",
            "data": {
              "messageKey": "noAttr"
            },
            "relatedNodes": [],
            "impact": "serious",
            "message": "Element has no title attribute"
          },
          {
            "id": "presentational-role",
            "data": null,
            "relatedNodes": [],
            "impact": "minor",
            "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
          }
        ],
        "all": [],
        "none": [],
        "impact": "critical",
        "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>",
        "target": [
          "button[data-proofing-help-title=\"About 'Main content' field\"]"
        ],
        "failureSummary": "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\""
      }
    ]
  },
  {
    "route": "/user/5323",
    "id": "color-contrast",
    "impact": "serious",
    "tags": [
      "cat.color",
      "wcag2aa",
      "wcag143",
      "ACT",
      "TTv5",
      "TT13.c"
    ],
    "description": "Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
    "help": "Elements must meet minimum color contrast ratio thresholds",
    "helpUrl": "https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=axeAPI",
    "nodes": [
      {
        "any": [
          {
            "id": "color-contrast",
            "data": {
              "fgColor": "#ffffff",
              "bgColor": "#02bfe7",
              "contrastRatio": 2.18,
              "fontSize": "9.8pt (13px)",
              "fontWeight": "bold",
              "messageKey": null,
              "expectedContrastRatio": "4.5:1"
            },
            "relatedNodes": [
              {
                "html": "<nav id=\"toolbar-bar\" role=\"navigation\" aria-label=\"Toolbar items\" class=\"toolbar-bar clearfix\" data-offset-top=\"\" style=\"background-color: rgb(2, 191, 231);\">",
                "target": [
                  "#toolbar-bar"
                ]
              }
            ],
            "impact": "serious",
            "message": "Element has insufficient color contrast of 2.18 (foreground color: #ffffff, background color: #02bfe7, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
          }
        ],
        "all": [],
        "none": [],
        "impact": "serious",
        "html": "<a href=\"/admin\" class=\"toolbar-icon toolbar-icon-menu trigger toolbar-item is-active\" data-drupal-subtrees=\"\" id=\"toolbar-item-administration\" data-toolbar-tray=\"toolbar-item-administration-tray\" role=\"button\" aria-pressed=\"false\">Manage</a>",
        "target": [
          "#toolbar-item-administration"
        ],
        "failureSummary": "Fix any of the following:
  Element has insufficient color contrast of 2.18 (foreground color: #ffffff, background color: #02bfe7, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
      },
      {
        "any": [
          {
            "id": "color-contrast",
            "data": {
              "fgColor": "#ffffff",
              "bgColor": "#02bfe7",
              "contrastRatio": 2.18,
              "fontSize": "9.8pt (13px)",
              "fontWeight": "bold",
              "messageKey": null,
              "expectedContrastRatio": "4.5:1"
            },
            "relatedNodes": [
              {
                "html": "<nav id=\"toolbar-bar\" role=\"navigation\" aria-label=\"Toolbar items\" class=\"toolbar-bar clearfix\" data-offset-top=\"\" style=\"background-color: rgb(2, 191, 231);\">",
                "target": [
                  "#toolbar-bar"
                ]
              }
            ],
            "impact": "serious",
            "message": "Element has insufficient color contrast of 2.18 (foreground color: #ffffff, background color: #02bfe7, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
          }
        ],
        "all": [],
        "none": [],
        "impact": "serious",
        "html": "<a href=\"/\" class=\"toolbar-icon toolbar-icon-toolbar-menu toolbar-icon-toolbar-menu-sections trigger toolbar-item\" data-drupal-subtrees=\"\" id=\"toolbar-item-toolbar-menu-sections\" data-toolbar-tray=\"toolbar-item-toolbar-menu-sections-tray\" role=\"button\" aria-pressed=\"false\" style=\"color: rgb(33, 33, 33);\">",
        "target": [
          "#toolbar-item-toolbar-menu-sections"
        ],
        "failureSummary": "Fix any of the following:
  Element has insufficient color contrast of 2.18 (foreground color: #ffffff, background color: #02bfe7, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
      },
      {
        "any": [
          {
            "id": "color-contrast",
            "data": {
              "fgColor": "#ffffff",
              "bgColor": "#02bfe7",
              "contrastRatio": 2.18,
              "fontSize": "9.8pt (13px)",
              "fontWeight": "bold",
              "messageKey": null,
              "expectedContrastRatio": "4.5:1"
            },
            "relatedNodes": [
              {
                "html": "<nav id=\"toolbar-bar\" role=\"navigation\" aria-label=\"Toolbar items\" class=\"toolbar-bar clearfix\" data-offset-top=\"\" style=\"background-color: rgb(2, 191, 231);\">",
                "target": [
                  "#toolbar-bar"
                ]
              }
            ],
            "impact": "serious",
            "message": "Element has insufficient color contrast of 2.18 (foreground color: #ffffff, background color: #02bfe7, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
          }
        ],
        "all": [],
        "none": [],
        "impact": "serious",
        "html": "<a href=\"/help\" class=\"toolbar-icon toolbar-icon-help toolbar-item\" style=\"color: rgb(33, 33, 33);\">Knowledge Base</a>",
        "target": [
          ".toolbar-icon-help"
        ],
        "failureSummary": "Fix any of the following:
  Element has insufficient color contrast of 2.18 (foreground color: #ffffff, background color: #02bfe7, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
      },
      {
        "any": [
          {
            "id": "color-contrast",
            "data": {
              "fgColor": "#ffffff",
              "bgColor": "#02bfe7",
              "contrastRatio": 2.18,
              "fontSize": "9.8pt (13px)",
              "fontWeight": "bold",
              "messageKey": null,
              "expectedContrastRatio": "4.5:1"
            },
            "relatedNodes": [
              {
                "html": "<nav id=\"toolbar-bar\" role=\"navigation\" aria-label=\"Toolbar items\" class=\"toolbar-bar clearfix\" data-offset-top=\"\" style=\"background-color: rgb(2, 191, 231);\">",
                "target": [
                  "#toolbar-bar"
                ]
              }
            ],
            "impact": "serious",
            "message": "Element has insufficient color contrast of 2.18 (foreground color: #ffffff, background color: #02bfe7, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
          }
        ],
        "all": [],
        "none": [],
        "impact": "serious",
        "html": "<a href=\"/user\" class=\"toolbar-icon toolbar-icon-user trigger toolbar-item\" id=\"toolbar-item-user\" data-toolbar-tray=\"toolbar-item-user-tray\" role=\"button\" aria-pressed=\"false\" style=\"color: rgb(33, 33, 33);\">test_Heber_Welch</a>",
        "target": [
          "#toolbar-item-user"
        ],
        "failureSummary": "Fix any of the following:
  Element has insufficient color contrast of 2.18 (foreground color: #ffffff, background color: #02bfe7, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
      }
    ]
  }
]