USWDS - Bug: Validation requires alerts with icons for correct success mark alignment

[grubersjoe]

Describe the bug

When using the usa-validation component the horizontal alignment of success marks in the usa-checklist breaks if you use the usa-alert--no-icon class for the parent usa-alert. Success marks are rendered too far left at the edge of the alert box. See the screenshot.

Steps to reproduce the bug

<label
  class="usa-label"
  for="password"
>
  Code
</label>
<input
  id="password"
  class="usa-input"
  name="password"
  type="text"
  minlength="3"
  maxlength="3"
  pattern="^\d{3}$"
  required
  autocomplete="new-password"
  data-validation-element="#validate-code"
  data-validate-numbers="^\d{3}$"
  aria-describedby="validate-code"
/>

<!-- Note the usa-alert--no-icon class -->
<div class="usa-alert usa-alert--info usa-alert--no-icon usa-alert--validation">
  <div class="usa-alert__body">
    <h3 class="usa-alert__heading margin-bottom-3">Requirements</h3>
    <ul
      id="validate-code"
      class="usa-checklist"
    >
      <li
        class="usa-checklist__item"
        data-validator="numbers"
      >
        Exactly three numbers
      </li>
    </ul>
  </div>
</div>

Expected Behavior

I'm not sure if using an alert with icon is expected for the validation component but the documentation gives no hints about such a requirement. Consequently, I would expect that the success mark alignment works in either case: with and without icons in the parent alert (setting the usa-alert--no-icon class).

Related code

I've added this rule to my CSS to work around the issue:

.usa-alert--no-icon.usa-alert--validation .usa-checklist {
  padding-left: units(5);
}

Screenshots

Without an icon the alignment breaks:

With default alerts alignment is correct:

System setup

USWDS v3.4.1
mac OS Ventura
Chrome v112

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct.
• I checked the current issues for duplicate bug reports.

[amyleadem]

Confirming that using the "No icon" alert variant causes misalignment on the validation component. The code below created the following presentation:

      <form class="usa-form">
        <fieldset class="usa-fieldset">
          <legend class="usa-legend usa-legend--large">Enter a code</legend>
          <div class="usa-alert usa-alert--info usa-alert--no-icon usa-alert--validation">
            <div class="usa-alert__body">
              <h3 class="usa-alert__heading">Code requirements</h3>
              <ul class="usa-checklist" id="validate-code">
                <li class="usa-checklist__item" data-validator="uppercase">
                  Use at least one uppercase character
                </li>
                <li class="usa-checklist__item" data-validator="numerical">
                  Use at least one number
                </li>
              </ul>
            </div>
          </div>
          <label class="usa-label" for="code">Code</label>
          <input
            class="usa-input"
            id="code"
            name="code"
            data-validate-uppercase="[A-Z]"
            data-validate-numerical="\d"
            data-validation-element="validate-code"
          />
          <input class="usa-button" type="submit" value="Submit code" />
        </fieldset>
      </form>

We should discuss if we want users to be able to choose any variant of the alert when using the validation component.