AlaskaAirlines / auro-accordion

Custom element that allows users to toggle the display for sections of content
https://auro.alaskaair.com/components/auro/accordion
Apache License 2.0
1 stars 1 forks source link

auro-accordion: bundled group not working as expected #5

Closed blackfalcon closed 3 years ago

blackfalcon commented 3 years ago

Describe the bug

When using the CDN bundled version of auro-accordion-group, the group is not working as expected. The open/close feature is operating correctly, but when used in a group, the auto-closing of an accordion when another in the group is opened is not happening.

<link rel="stylesheet" href="https://unpkg.com/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css" />
<link rel="stylesheet" href="https://unpkg.com/@alaskaairux/webcorestylesheets@latest/dist/bundled/essentials.css" />

<script src="https://unpkg.com/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.es5.js" nomodule></script>
<script src="https://unpkg.com/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
<auro-accordion-group>
<auro-accordion id="flightNotice">
  <span slot="trigger">Flight notifications</span>

  <auro-radio-group required>
    <span slot="legend">Choose the level of notifications that’s best for you:</span>
    <auro-radio id="radio1" label="No notifications" name="notifications" value="No notifications" checked></auro-radio>
    <auro-radio id="radio2" label="Standard (flight delays, cancellations, and gate changes)" name="notifications" value="Standard"></auro-radio>
    <auro-radio id="radio3" label="Extended (Standard plus pre-flight status and arrival)" name="notifications" value="Extended"></auro-radio>
  </auro-radio-group>

  <p>By enabling flight notifications, I agree to the terms and conditions.</p>

  <auro-button>Save</auro-button>
</auro-accordion>

<auro-accordion id="dealsPromotions">
  <span slot="trigger">Deals and promotions</span>

  <auro-checkbox-group>
    <span slot="legend">Please select an option if applicable</span>
    <auro-checkbox id="optionOne" name="exampleOptions" value="option one">Deals and announcements</auro-checkbox>
    <auro-checkbox id="optionTwo" name="exampleOptions" value="option two">Insider newsletter</auro-checkbox>
  </auro-checkbox-group>
</auro-accordion>
</auro-accordion-group>

To Reproduce

Steps to reproduce the behavior:

  1. Copy/paste the above code into an HTML document
  2. Open in any modern browser
  3. Open 1st accordion
  4. Open 2nd accordion
  5. Notice how the 1st DID NOT auto close

Expected behavior

The 1st accordion in this sequence should close automatically

Additional context

While this is not a breaking experience, it is an incorrect experience.

AuroDesignSystem commented 3 years ago

:tada: This issue has been resolved in version 1.2.3 :tada:

The release is available on:

Your semantic-release bot :package::rocket: