Check for submit buttons outside of form element, associated using form attribute

[fuzzbomb]

(Expanding on of an issue originally filed to pa11y: pa11y/pa11y#419)

HTML5 introduced the form attribute to buttons (and other form controls) so they could be associated with a <form>, and trigger form submission, without actually having to be nested inside the <form> element itself. See Association of controls and forms in the HTML5 recommendation.

When a <button> has a form attribute, but is outside the <form> element itself, you get the error about a missing submit button:

This form does not contain a submit button, which creates issues for those who cannot submit the form using the keyboard. Submit
buttons are INPUT elements with type attribute "submit" or "image", or BUTTON elements with type "submit" or omitted/invalid.

The following code only checks for submit buttons that are inside the form element. Note that querySelectorAll() is called on the form element, so it only looks for descendants. (In Standards/WCAG2AAA/Sniffs/Principle3/Guideline3_2/3_2_2.js).

/**
     * Test for forms that don't have a submit button of some sort (technique H32).
     *
     * @param {DOMNode} form The form to test.
     */
    checkFormSubmitButton: function(form)
    {
        var ok = false;

        // Test for INPUT-based submit buttons. The type must be specified, as
        // the default for INPUT is text.
        var inputButtons = form.querySelectorAll('input[type=submit], input[type=image]');
        if (inputButtons.length > 0) {
            ok = true;
        } else {
            // Check for BUTTONs that aren't reset buttons, or normal buttons.
            // If they're blank or invalid, they are submit buttons.
            var buttonButtons    = form.querySelectorAll('button');
            var nonSubmitButtons = form.querySelectorAll('button[type=reset], button[type=button]');
            if (buttonButtons.length > nonSubmitButtons.length) {
                ok = true;
            }
        }//end if

I propose this test can be extended to look for submit buttons outside the form element, which are associated correctly using a form attribute.

[fuzzbomb]

I think this would be easy enough by adding another test after the existing checks.

Pseudocode:

// ... exisiting checks for buttons inside the form

if (!ok) {
   // look for buttons outside this form
   if (form has ID) {
       // look in entire document for buttons associated with this form by ID
       // TODO: needs a comprehensive selector for all button types
       externalSubmitButtons = document.querySelectorAll('input[type=submit][form=ID]')
       if (externalSubmitButtons.length > 0) {
          ok = true;
        }
    }
}

This is just a brain-dump for now. I might take a crack at a PR myself, but I'll leave this here in case someone else wants to try it.

[ironikart]

Thanks @fuzzbomb. I'm going to mark this as an enhancement since the project pre-dates the HTML 5.2 spec. It doesn't look difficult to add, but we've got a body of work pending for WCAG 2.1 support so if we don't have a pull request it'll likely be rolled into that.

[fuzzbomb]

I got this working. First it looks for buttons which have form attributes, then does a couple more checks on each one to confirm it's a submit button for the form in question.

[ironikart]

Hi @fuzzbomb, thanks for submitting the pull request. It works great, I've merged it in master for the next release.

[fuzzbomb]

That's great, thanks. I got involved in this by answering an accessibility question on StackOverflow - submit button in a different component creating Accessibility issue. It was a fun rabbit hole to go down :-)