VAGOV-TEAM-97920: Form Builder Navbar #20149

ryguyk · 2024-12-20T16:15:14Z

Description

This PR adds a navbar (three tabs) to the Form Builder page template. More importantly, it sets things up to be able to pass custom data from each form to the wrapping page template. In this case, we needed that to be able to pass the activeTab value to the page template. It might be used for additional values as we go.

Closes department-of-veterans-affairs/va.gov-team#97920

Testing done

Unit tests added.
Manual tests done:
- Correct active tab on each page.

Screenshots

QA steps

Visit /form-builder/intro
- Ensure navbar with three tabs displays
- Ensure the "Forms" tab is active
Proceed to '/form-builder/start-conversion`
- Ensure navbar with three tabs displays
- Ensure the "Forms" tab is active
Fill out form and proceed to next page (name-and-dob)
- Ensure navbar with three tabs displays
- Ensure the "Content" tab is active
Visit some page outside Form Builder, like node/add/digital_form
- Ensure navbar with three tabs does not display.
- Ensure the page looks "right" (ensure no styling issues that might arise if our css styles were being applied outside our module).

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

Is this PR blocked by another PR?

DO NOT MERGE

Does this PR need review from a Product Owner

Needs PO review

CMS user-facing announcement

Is an announcement needed to let editors know of this change?

Yes, and it's written in issue ____ and queued for publication.
- Merge and ping the UX writer so they are ready to publish after deployment
Yes, but it hasn't yet been written
- Don't merge yet -- ping the UX writer to write and queue content
No announcement is needed for this code change.
- Merge & carry on unburdened by announcements

github-actions · 2024-12-20T16:15:36Z

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 · 2024-12-20T16:15:37Z

Checking composer.lock changes...

github-actions · 2024-12-20T17:01:46Z

Checking composer.lock changes...

derekhouck

LGTM. We already talked in-depth about these changes yesterday, and this looks in-line with what we discussed then. I appreciate the thorough testing.

derekhouck · 2024-12-20T17:11:08Z

docroot/modules/custom/va_gov_form_builder/templates/page--va-gov-form-builder.html.twig

+
+            <li class="form-builder-navbar__tab form-builder-navbar__tab--forms
+              {{
+                active_tab == 'forms' ? 'form-builder-navbar__tab--active'


I wish this was less verbose, but it makes sense for guaranteeing that our active styles are isolated to this module.

I agree entirely. I started to abstract it a bit, and it started to feel like something with not enough ROI, at least in the moment. There's not a real good, easy way to do it. But I don't love this at all.

derekhouck · 2024-12-20T17:15:23Z

tests/phpunit/va_gov_form_builder/functional/Form/StartConversionTest.php

+    // Successful submission should take user to next page.
+    $nextPageUrl = $this->getSession()->getCurrentUrl();
+    $this->assertStringContainsString('/name-and-dob', $nextPageUrl);


Great fix for this test.

github-actions · 2024-12-21T14:41:13Z

Checking composer.lock changes...

github-actions · 2024-12-21T15:01:57Z

Checking composer.lock changes...

github-actions · 2024-12-21T15:49:41Z

Checking composer.lock changes...

- Renames form-builder theme and sets it as page-level theme.

github-actions · 2024-12-24T00:34:27Z

Checking composer.lock changes...

va-cms-bot · 2024-12-28T09:02:02Z

Tugboat has finished building the preview for this pull request!

Links:

Dashboard:

https://tugboat.vfs.va.gov/676598155134c90adaca37ad

va-cms-bot · 2024-12-28T10:06:43Z

Cypress Accessibility Violations

`/user/5393`

ID: color-contrast
Impact: serious
Tags: cat.color, wcag2aa, wcag143, TTv5, TT13.c, EN-301-549, EN-9.1.4.3, ACT
Description: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: Elements must meet minimum color contrast ratio thresholds
Nodes:

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="background-color: rgb(2, 191, 231); border-bottom: 0px; color: rgb(33, 33, 33);">
Impact: serious
Target: #toolbar-item-toolbar-menu-sections
Summary: 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
HTML: <a href="/help" class="toolbar-icon toolbar-icon-help toolbar-item" style="background-color: rgb(2, 191, 231); border-bottom: 0px; color: rgb(33, 33, 33);">Knowledge Base</a>
Impact: serious
Target: .toolbar-icon-help
Summary: 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
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="background-color: rgb(2, 191, 231); border-bottom: 0px; color: rgb(33, 33, 33);">test_Carmella_McKenzie</a>
Impact: serious
Target: #toolbar-item-user
Summary: 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

`/test-data-repellat`

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"

ryguyk requested a review from a team as a code owner December 20, 2024 16:15

va-cms-bot temporarily deployed to Tugboat December 20, 2024 16:15 Destroyed

ryguyk requested a review from derekhouck December 20, 2024 16:57

ryguyk force-pushed the VAGOV-TEAM-97920-form-builder-navbar branch from 2d942c6 to d9ec28a Compare December 20, 2024 16:59

va-cms-bot temporarily deployed to Tugboat December 20, 2024 17:00 Destroyed

derekhouck previously approved these changes Dec 20, 2024

View reviewed changes

va-cms-bot temporarily deployed to Tugboat December 21, 2024 08:46 Destroyed

va-cms-bot temporarily deployed to Tugboat December 21, 2024 14:41 Destroyed

ryguyk force-pushed the VAGOV-TEAM-97920-form-builder-navbar branch from 7513753 to ceb6802 Compare December 21, 2024 15:01

va-cms-bot temporarily deployed to Tugboat December 21, 2024 15:01 Destroyed

ryguyk dismissed derekhouck’s stale review via ab92cd4 December 21, 2024 15:49

va-cms-bot temporarily deployed to Tugboat December 21, 2024 15:49 Destroyed

va-cms-bot temporarily deployed to Tugboat December 22, 2024 08:43 Destroyed

ryguyk mentioned this pull request Dec 22, 2024

VAGOV-TEAM-97922: Adds sidebar placeholder #20155

Open

23 tasks

va-cms-bot temporarily deployed to Tugboat December 23, 2024 08:43 Destroyed

derekhouck approved these changes Dec 23, 2024

View reviewed changes

ryguyk added 8 commits December 23, 2024 18:34

VAGOV-TEAM-97920:

f655661

- Renames form-builder theme and sets it as page-level theme.

Allows for active tab to be set on each path.

4992fea

Updates page template and styles for navbar

36cc077

Removes unnecessary properties from base form.

9f9af5c

Adds id class to each navbar tab

1c629dc

Adds unpkg external stylesheet to the module-defined library.

3acfeb3

Attaches styles at page level rather than form level.

f733513

Adds unit test for libraries.yml.

fee620c

ryguyk added 2 commits December 23, 2024 18:34

Updates existing test suites.

7f13a1d

Updates class names in test to reflect changes in template.

987c603

ryguyk force-pushed the VAGOV-TEAM-97920-form-builder-navbar branch from ab92cd4 to 987c603 Compare December 24, 2024 00:34

va-cms-bot temporarily deployed to Tugboat December 24, 2024 00:34 Destroyed

va-cms-bot temporarily deployed to Tugboat December 24, 2024 08:48 Destroyed

va-cms-bot temporarily deployed to Tugboat December 25, 2024 08:44 Destroyed

va-cms-bot temporarily deployed to Tugboat December 26, 2024 08:43 Destroyed

va-cms-bot temporarily deployed to Tugboat December 27, 2024 08:42 Destroyed

va-cms-bot deployed to Tugboat December 28, 2024 08:43 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

VAGOV-TEAM-97920: Form Builder Navbar #20149

VAGOV-TEAM-97920: Form Builder Navbar #20149

ryguyk commented Dec 20, 2024 •

edited by derekhouck

Loading

github-actions bot commented Dec 20, 2024

github-actions bot commented Dec 20, 2024

github-actions bot commented Dec 20, 2024

derekhouck left a comment

derekhouck Dec 20, 2024

ryguyk Dec 20, 2024 •

edited

Loading

derekhouck Dec 20, 2024

github-actions bot commented Dec 21, 2024

github-actions bot commented Dec 21, 2024

github-actions bot commented Dec 21, 2024

github-actions bot commented Dec 24, 2024

va-cms-bot commented Dec 28, 2024

va-cms-bot commented Dec 28, 2024

VAGOV-TEAM-97920: Form Builder Navbar #20149

Are you sure you want to change the base?

VAGOV-TEAM-97920: Form Builder Navbar #20149

Conversation

ryguyk commented Dec 20, 2024 • edited by derekhouck Loading

Description

Testing done

Screenshots

QA steps

Definition of Done

Select Team for PR review

Is this PR blocked by another PR?

Does this PR need review from a Product Owner

CMS user-facing announcement

github-actions bot commented Dec 20, 2024

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

github-actions bot commented Dec 20, 2024

github-actions bot commented Dec 20, 2024

derekhouck left a comment

Choose a reason for hiding this comment

derekhouck Dec 20, 2024

Choose a reason for hiding this comment

ryguyk Dec 20, 2024 • edited Loading

Choose a reason for hiding this comment

derekhouck Dec 20, 2024

Choose a reason for hiding this comment

github-actions bot commented Dec 21, 2024

github-actions bot commented Dec 21, 2024

github-actions bot commented Dec 21, 2024

github-actions bot commented Dec 24, 2024

va-cms-bot commented Dec 28, 2024

va-cms-bot commented Dec 28, 2024

Cypress Accessibility Violations

/user/5393

/test-data-repellat

ryguyk commented Dec 20, 2024 •

edited by derekhouck

Loading

ryguyk Dec 20, 2024 •

edited

Loading

`/user/5393`

`/test-data-repellat`