// Accordion
//
// - Buttons are used as the accordions so that they are tab-able by keyboard users and accessible to screen readers.
// - Each accordion button and realted content has a unique `id` associated with its `aria-controls`.
// - Each button has an `aria-expanded` attribute on it that is toggled between true and false. If `aria-expanded='true'`, the content associated with it is shown, and if `aria-expanded='false'` the content is hidden.
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#accordion_guide">WCAG 2.1 Guidelines</a></h3><div id="accordion_guide" class="atblock__panel guidelines"><p><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-focus-order" target="_blank">2.4.3 Focus Order</a> - If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-mult-loc" target="_blank">2.4.5 Multiple Ways</a> - More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process. (Level AA)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-focus-visible" target="_blank">2.4.7 Focus Visible</a> - Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-location" target="_blank">2.4.8 Location</a> - Information about the user's location within a set of Web pages is available. (Level AAA)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-ensure-compat-rsv" target="_blank">4.1.2 Name, Role, Value</a> - For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)</p></div><div class="markup"></div></section>
//
//
//
// Markup: accordion.twig
//
// Style guide: Navigation.accordion

// Import site utilities.
@import '../../global/utils/init';

.accordion {

  &__heading {
    margin: 0;
  }

  &__trigger {
    background-repeat: no-repeat;
    background-image: url('#{$asset-path}/plus_round_red.png'); // replace with plus
    background-size: 28px;
    background-position: 97% 50%;
    box-shadow: none;
    line-height: 1.5;
    margin: $padding-xsm 0;
    width: 100%;
    text-align: left;
    padding: 10px 40px 10px 16px;
    font-size: 1rem;
    color: $color-charcoal;
    background-color: $color-alabaster;
    border: 1px solid $color-silver;
    display: block;
    text-decoration: none;
    text-transform: none;

    @include breakpoint($bp-sm) {
      background-size: 32px;
      background-position: 98% 50%;
    }

    &[aria-expanded='true'] {
      content: '';
      background: url('#{$asset-path}/minus_round_red.png'); // replace with minus
      background-size: 28px;
      background-repeat: no-repeat;
      background-position: 97% 50%;
      background-color: $color-alabaster;

      @include breakpoint($bp-sm) {
        background-size: 32px;
        background-position: 98% 50%;
      }
    }

    &:hover,
    &:focus {
      background-color: $color-cherry;
      border: 1px solid $color-ruby;
    }
  }

  &__content {
    display: none;
    padding: 10px 16px;
  }
}
