va-accordion: add custom event to expand/collapse all button

[jamigibbs]

Chromatic

https://2380-accordion-toggle-event--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

This will add a custom event accordionExpandCollapseAll that will fire when the expand/collapse button is clicked. This is so teams can keep track of the all accordion open/closed states when navigating between pages.

I attempted to solve this by firing the existing accordionItemToggled custom event when expand/collapse is clicked using MutationObserver. This way teams wouldn't have to do any changes to their current open/close state tracking logic and future teams wouldn't have to deal with multiple events.

Unfortunately, this creates a race condition because the parent va-accordion component is listening for that event too and doing some logic which is creating a loop.

Looking at the existing example from the forms-library, specifically here in the handleToggleChapter callback, I don't think it will be too much effort to modify the callback to include the expand/collapse all event and it might be wiser to keep these two events separate anyway.

Closes department-of-veterans-affairs/vets-design-system-documentation#2380

QA Checklist

• Component maintains 1:1 parity with design mocks
• Text is consistent with what's been provided in the mocks
• Component behaves as expected across breakpoints
• Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
• Designer has signed off on changes (if applicable. If not applicable provide reason why)
• Tab order and focus state work as expected
• Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
• New components are covered by e2e tests; updates to existing components are covered by existing test suite
• Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

document.addEventListener('accordionExpandCollapseAll', e => {
  console.log('accordionExpandCollapseAll event', e.detail);
});

Acceptance criteria

• QA checklist has been completed
• Screenshots have been attached that cover desktop and mobile screens

Definition of done

• Documentation has been updated, if applicable
• A link has been provided to the originating GitHub issue (or connected to it via ZenHub)