VACMS-20320: adds CSS for better browser validation UX

[omahane]

Description

Relates to #20320

Testing done

Manually

Screenshots

Events before the CSS change

Events after the CSS change

QA steps

Set up QA Content Publisher

• Log in as an admin
• Assign the following Roles to QA Content Publisher
  • Content creator - VAMC
  • Content publisher
• Assign the following Section to QA Content Publisher
  • VA Boston health care

Fill out Event form incompletely to show new CSS

• Log in as QA Content Publisher
• Create a new Event
• Confirm that no fields are have a red border on page load
• Fill in no fields and click Save
• Confirm that the following fields have a red border:
  • Name
  • Date and Time Start
  • Date and Time End
  • Facility location
  • Revision log message
  • Note: this is consistent with the fields that are highlighted by Clientside Validation

Fill out Story form incompletely to show Clientside Validation as unaffected

• Create a new Event
• Confirm that no fields are have a red border on page load
• Fill in no fields and click Save
• Confirm that fields have a red border and red messaging underneath

Select Team for PR review

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

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[laflannery]

@omahane your screenshot above has the Event fields as proper and aligned, but I'm seeing them not, it's how they are currently in Prod. Should this alignment be updated?

[va-cms-bot]

Cypress Accessibility Violations

/test-data-aspernatur

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"