Nested accordions

[dinkzilla]

There are two issues when nesting accordions within each other:

1. Multiple event listeners get assigned to each tab so that inner tabs will fire "toggle" multiple times when clicked. (I've created a pull request that fixes this.)
2. aria-multiselectable="false" does not distinguish between inner and outer tabs, so with this option on, clicking an inner accordion closes the outer accordion tab.

[leifoolsen]

Hello @dinkzilla. This issue has been "dead in the water" for a while.

The accordion component is in need of a complete overhaul.We have used the component in two different projects @ work, and it begins to reveal some weaknesses in the way it is programmed. A refactoring of code will be required. There will most likely be changes in CSS class names and markup structure. JavaScript code will be broken down into smaller modules, partly to prepare for MDL-2.

I will start by creating an expandable component which is in accordance with requirements of WAI-ARIA, described here Using the WAI-ARIA aria-expanded state to mark expandable and collapsible regions. I will then use this component to create an accordion component (with nesting). The same expandable component can then be used eg to create a tree view component and a tabbed view component.

I'll start this code refactoring now and therefore do not believe it serves no purpose to spend time to merge your PR. That said, you are welcome to contribute to the new component if you wish.

[leifoolsen]

See #86

[leifoolsen]

WAI-ARIA definition of accordion

An accordion is a vertically stacked set of elements, such as labels or thumbnails, that allow the user to toggle the display of sections of content. Each labeling element can be expanded or collapsed to reveal or hide its associated content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.

Accordion example

Open Ajax Alliance: Accordian1

Open Ajax Alliance: Accordian using ARIA CSS selectors

[leifoolsen]

Basic markup:

<ul>
  <li>
    <header>
      <p>A tab caption</p>
    </header>
    <section>
      <p>Content goes here ...</p>
    </section>
  </li>
</ul>

Nested accordion:

<ul>
  <li>
    <header>
      <p>A tab caption</p>
    </header>
    <section>
      <ul>
        <li>
          <header>
            <p>A nested tab caption</p>
          </header>
          <section>
            <p>Content nested accordion</p>
          </section>
        </li>
      </ul>
    </section>
  </li>
</ul>

[leifoolsen]

Create accordion based on collapsible groups (or regions)

<ul>
  <li>
    <header>
      <div id="button-1" role="button" aria-expanded="true" aria-controls="group-1"> 
        <p>Click to toggle</p>
      </div>  
    </header>
    <section id="group-1" role="group" aria-labelledby="button-1">
      <p>Content goes here ...</p>
    </section>
  </li>
  <li>
    <header>
      <div id="button-2" role="button" aria-expanded="true" aria-controls="group-2"> 
        <p>Click to toggle</p>
      </div>  
    </header>
    <section id="group-2" role="group" aria-labelledby="button-2">
      <p>Content goes here ...</p>
    </section>
  </li>
</ul>

Simplified

<div>
  <header>
    <div id="button-1" role="button" aria-expanded="true" aria-controls="group-1"> 
      <p>Click to toggle</p>
    </div>  
  </header>
  <section id="group-1" role="group" aria-labelledby="button-1">
     <p>Content goes here ...</p>
  </section>

  <header>
    <div id="button-2" role="button" aria-expanded="true" aria-controls="group-2"> 
      <p>Click to toggle</p>
    </div>  
  </header>
  <section id="group-2" role="group" aria-labelledby="button-2">
    <p>Content goes here ...</p>
  </section>
</div>

[leifoolsen]

Use definition list for accordion

<dl id="accordionGroup">
  <dt role="heading" aria-level="3">
    <div role="button" aria-expanded="false" aria-controls="sect1" id="accordion1id">
      <span>
        Personal Information
      </span>
    </div>
  </dt>
  <dd id="sect1" role="region" aria-labelledby="accordion1id">
    <div>
      <p>Content goes here</p>
    </div>
  </dd>
</dd>

[toby-1-kenobi]

It's still not possible to nest accordions?