Links with summaries field in Spotlight section of CLP does not indicate it is required

[davidmpickett]

[2024-11-26] PR in flight (#19882 ) needs revisions from code review and is failing tests. #19945 has been opened to address the missing required field indicator on other CLP fields. If we decide to take a not-CSS approach for those, we may opt to close the existing PR and address all fields via the same method.

Describe the defect

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

1. Go to staging.cms.va.gov (or a Tugboat)
2. Create a new Campaign Landing Page
3. Fill out the required fields in the sections Hero banner, Why this matters, What you can do, VA Benefits
4. Save the node
5. Edit the node and click the "enable this page segment" box in the Spotlight section
6. Notice that while the first two fields have the red asterisk indicating they are required, there is nothing indicating the List of links with summaries field is required.
   
7. Fill in the Heading and Introduction fields, but do not add a Link teaser to Links with summaries
8. Save the node
9. Notice the error message at the top of the page. Notice that the link doesn't work
   
10. Scroll down to the Spotlight section and note that there is no error message
    
11. Add a link teaser
12. Save the node

AC / Expected behavior

• When creating / editing Campaign Landing Pages, clicking the link 'Links with summaries' that displays in the error message at the top of the page should take the user to the "Links with summaries' section.
• When creating / editing Campaign Landing Pages Required fields should have a red asterisk
• When creating / editing Campaign Landing Pages Fields with validation errors should have a visual indicator to make them easier to find, along with a validation message indicating the issue.

Additional context

The downloadable resources section has a similar sub field that doesn't have a required asterisk, but does get an validation error message.

The VA gov backend module governs the logic of making this field required, but it doesn't seem to be properly making that visible

[jv-agile6]

Midsprint update

Delayed on starting with complication in #18170. Task has been moved to in progress but almost full scope still needs to be completed.

[jv-agile6]

End of Sprint Update – Ticket #19163: Links with Summaries Field in Spotlight Section of CLP

Summary of Progress:

The work on Ticket #19163, which involves making the "Links with summaries" field in the Spotlight section of Campaign Landing Pages (CLP) visually indicate that it is a required field, is still in progress and has not been completed within this sprint.

Current Status:

We have identified that the issue lies in the paragraph type that governs the field's required status. However, the logic does not seem to be properly rendering the required field indicator (the red asterisk) or the validation error message for users.
The expected behavior, where required fields should display a red asterisk and trigger a validation message when not filled out, has not been fully implemented for this specific field. Currently, there is no visual cue indicating the "Links with summaries" field is required, and no validation message appears when the field is left empty.

Testing has been conducted on local environment, and the issue persists, with the field not displaying the necessary indicators.

Outstanding Work:

We need to address the paragraph logic governing the required status for the "Links with summaries" field and ensure that it correctly triggers both the red asterisk indicator and validation error messages.
The functionality to ensure the "Links with summaries" field becomes focusable and brings users directly to the section from the error message needs to be fully implemented.
Once this issue is resolved, further testing will be needed to confirm that the required field indicators are visible and that validation messages appear appropriately when the field is left incomplete.

Next Steps:

Collaborate with team to resolve the logic issue causing the missing required field indicators.
Implement the necessary changes to ensure that the validation message and field focus behavior work as expected.
Complete testing to verify the fix on staging.

Reason for Incompletion:

The task was initiated late into the sprint. The need to fix a paragraph issue related to the required field logic, and additional time is required to implement and test the solution.

We aim to prioritize this in the next sprint to ensure it is completed promptly.End of Sprint Update – Ticket #19163: Links with Summaries Field in Spotlight Section of CLP

[jv-agile6]

Found a bug while writing QA steps for PR. I will need to adjust the css specificity selector in local and make another push.

[jv-agile6]

Reverted scss code

/* Mark the label with a required asterisk (like a typical "required" field indication) */
[required] .field-label::after,
[required] .fieldset__label::after,
[required] .form-item__label::after,
strong.form-required::after,
.details-wrapper::after
{
  color: #F00; /* Red color for the asterisk */
  content: "  *"; /* Adds an asterisk before the label text */
}

added

#field-clp-spotlight-link-teasers-values .form-item__label::after
{
  color: #F00; /* Red color for the asterisk */
  content: "*"; /* Adds an asterisk before the label text */
}

[jv-agile6]

Pull request has been created for branch

[jv-agile6]

@FranECross This issues extends beyond the Spotlight section. Every section that uses the "Enable this Page Segment" (Video, Stories, Resources, Events and FAQ) is also missing the required asterisk that denotes a required field.

[FranECross]

@jv-agile6 Approved to ship as is, and I'll create a new ticket/tickets for the other sections. Thanks!

[FranECross]

@jilladams Here's the new story to handle the other sections that are missing the red asterisk. I'm not quite done with it yet, and would love additional eyes on it afterwards to ensure I have it correct.

[jilladams]

@FranECross FYI that I added a status to the top of this ticket to reflect that Jerry's PR is not mergeable and a little more effort will be required to close this. I moved it back to Refined & Ready, since we'll need to assign that work, and since Daniel will need to stay focused on real-time banners and ECA in next sprint.