[Accordion]: Accordions should not treat every button as a toggle

[humancompanion]

Description

Currently, the accordion.js file treats any button it finds inside of .usa-accordion as a toggle for that accordion.

this.$('button').each(function () {...

This creates a few inconveniences:

1. All buttons, at any level, inside of the accordion will toggle the accordion and are treated as a drawer face (for lack of a better term). Thus using another button inside of the accordion that should not act as a toggle isn't possible. For example, if I have a form inside of an accordion the buttons associated with the form will toggle the accordion.
2. Using another element to toggle the accordion is not possible. If I want to use another HTML element to trigger the accordion I cannot. Or more to the point if I want to have an additional element trigger the accordion to close I'd need to write additional JS code to trigger the close.
3. If I nest an accordion, or more commonly a drawer of my own making inside an accordion, then again any button I use inside the drawer may inadvertently trigger the accordion.

Ideally, the JS code would look for a data attribute, or failing that a specific class name, that establishes the element as a toggle for the accordion. Perhaps we are abusing the accordion component by using it in a way that it wasn't intended to be used. In that case, we'd love a drawer component. :-)

As a side note, the .usa-unstyled-list class that is often added to the unordered list element that houses an accordion also applies it styles a bit too widely. .usa-unstyled-list li::before removes the bullet from all lists at any level that appear within rather than just first level of list items (i.e. .usa-unstyled-list > li::before. Thus any unordered list that appears inside an accordion's content loses the list item bullets.

[juliaelman]

Thank you for your interest and contributing to the Draft U.S. Web Design Standards! We have received notification of your contribution and are currently triaging the work.