Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Checkboxes that share the same name in different forms cause violations

See original GitHub issue

I have two nearly identical login forms on the same page (one for the navbar, one for the page content). They are nearly identical because I can use the same javascript/selenium code to implement and test both.

The issue with this is that I get the following violation from AXE:

1) Checkbox inputs with the same name attribute value must be part of a group: https://dequeuniversity.com/rules/axe/3.1/checkboxgroup?application=axeAPI
  a) ["#homeLoginStayLoggedIn"]
    Fix any of the following:
      All elements with the name "stayLoggedIn" do not reference the same element with aria-labelledby
      Element does not have a containing fieldset or ARIA group

Nav login:

<div class="form-group">
    <div class="form-check">
        <input type="checkbox" class="form-check-input loginStayLoggedIn" id="navbarLoginStayLoggedIn" name="stayLoggedIn" form="navbarLogin">
        <label class="form-check-label" for="navbarLoginStayLoggedIn">
            Remember me
        </label>
    </div>
</div>

Homepage Login:

<div class="form-group">
    <div class="form-check">
        <input type="checkbox" class="form-check-input loginStayLoggedIn" id="homeLoginStayLoggedIn" name="stayLoggedIn" form="homeLogin">
        <label class="form-check-label" for="homeLoginStayLoggedIn">
            Remember me
        </label>
    </div>
</div>

These are part of entirely different forms in different parts of the page. Am I missing something, or is it a bug that AXE associates these inputs?