Modals don't pass the `validateAccessibility` test

[caitlinshk]

Describe the bug It looks like our modals don't pass the validateAccessibility test.

If I update the test for our login upsell modal to include validateAccessibility:

// applicant_application_index.test.ts
  it('shows login prompt for guest users when they click apply', async () => {
    const {page} = ctx
    await validateAccessibility(page)

    // Click Apply on the primary program. This should show the login prompt modal.
    await page.click(
      `.cf-application-card:has-text("${primaryProgramName}") .cf-apply-button`,
    )
    expect(await page.textContent('html')).toContain(
      'Create an account or sign in',
    )
    await validateScreenshot(
      page,
      'apply-program-login-prompt',
      /* fullPage= */ false,
    )

    await validateAccessibility(page) // ONLY NEW LINE ADDED

Then I get this error:

    Expected no axe accessibility violations, found 1 violations:
     [
      {
        "id": "region",
        "impact": "moderate",
        "tags": [
          "cat.keyboard",
          "best-practice"
        ],
        "description": "Ensures all page content is contained by landmarks",
        "help": "All page content should be contained by landmarks",
        "helpUrl": "https://dequeuniversity.com/rules/axe/4.8/region?application=axeAPI",
        "nodes": [
          {
            "any": [
              {
                "id": "region",
                "data": {
                  "isIframe": false
                },
                "relatedNodes": [],
                "impact": "moderate",
                "message": "Some page content is not contained by landmarks"
              }
            ],
            "all": [],
            "none": [],
            "impact": "moderate",
            "html": "<div id=\"uuid-37cd10a2-a9c2-45d5-8ae9-e0f55d9d8214\" aria-labelledby=\"uuid-37cd10a2-a9c2-45d5-8ae9-e0f55d9d8214-title\" tabindex=\"0\" class=\"cf-modal absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-3xl shadow-xl bg-white max-h-screen overflow-y-auto w-11/12 lg:w-1/2\" only-show-once-group=\"programs_index_login_prompt\" bypass-url=\"/programs/3/review\">",
            "target": [
              "#uuid-37cd10a2-a9c2-45d5-8ae9-e0f55d9d8214"
            ],
            "failureSummary": "Fix any of the following:\n  Some page content is not contained by landmarks"
          }
        ]
      }
    ]

It would be great if we could update our modal code to pass this accessibility test.

[rockycodes]

Rather than edit our existing modal code, we should make sure the USWDS modals pass the validateAccessibility test: https://github.com/civiform/civiform/issues/6262

[caitlinshk]

Oh yes good call! (I think https://github.com/civiform/civiform/issues/6264 is the parent issue that tracks moving all modals, including the applicant-facing ones)