Closed
Description
Description
When a button is placed within an accordion content div, the button gets assigned event listeners as if it were the usa-accordion-button. Clicking the button will trigger the accordion to close when it shouldn't.
In the changes since 0.9.x, it seems that care was taken to avoid some of the problems that were present in 0.8.x. However, it seems one line of code was missed.
Steps to reproduce the issue
- Use this code to test:
<ul class="usa-accordion">
<li>
<button class="usa-accordion-button" aria-expanded="false" aria-controls="formContent">View form</button>
<div id="formContent" class="usa-accordion-content">
<form>
<label for="my-input">Number between 1 and 5:</label>
<input id="my-input" type="number" min="1" max="5" />
<button type="submit">Submit</button>
</form>
</div>
</li>
</ul>
- Type in a number greater than 5
- Click the submit button
- The accordion closes, and a JS error occurs because it cannot render the validation message
Fixing the problem
In uswds.js line 656 does not have the same CSS selector as line 712:
var buttons = select('button', this.root); // line 656
var buttons = this.$('ul > li > button, .usa-accordion-button'); // line 712
Changing line 656 to the following solves the problem (tested locally):
var buttons = select('ul > li > button, .usa-accordion-button');