Description:
The use of <button> without a type attribute prevents submission of forms using the enter key, when the accordion is included within the <form>.
This is because, when pressing the enter key while a form field is focused, it triggers the click event on the first submit button within a form. <button> elements without the type attribute are assumed to have the type="submit", so pressing the enter key will trigger the accordion buttons instead.
We can add type="button" to the “Open all…” button within our own markup, however, the accordion item header buttons are created in JS.
Steps to reproduce:
Include the accordion component inside a <form> with multiple fields, and a submit button at the end of the form.
With one of the form fields focused, press the enter key.
Description: The use of
<button>without atypeattribute prevents submission of forms using the enter key, when the accordion is included within the<form>.This is because, when pressing the enter key while a form field is focused, it triggers the
clickevent on the first submit button within a form.<button>elements without thetypeattribute are assumed to have thetype="submit", so pressing the enter key will trigger the accordion buttons instead.We can add
type="button"to the “Open all…” button within our own markup, however, the accordion item header buttons are created in JS.Steps to reproduce:
<form>with multiple fields, and a submit button at the end of the form.Expected result: The form submits.
Actual Result: The first accordion item opens.