DSO Component Library

Accordion 

<div class="accordion" id="accordion">
    <div class="panel">
        <a class="section-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1" aria-expanded="false" aria-controls="panel1">
              <span class="toggle-icon"></span>
              <h2>Paneel 1<span class="fa fa-check" aria-hidden="true"></span></h2>
            </a>
        <div class="section-body collapse" id="panel1">
            <p>En dit is de inhoud van <strong>Paneel 1</strong></p>
        </div>
    </div>
    <div class="panel">
        <a class="section-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2" aria-expanded="false" aria-controls="panel2">
              <span class="toggle-icon"></span>
              <h2>Paneel 2</h2>
            </a>
        <div class="section-body collapse" id="panel2">
            <p>En dit is de inhoud van <strong>Paneel 2</strong></p>
        </div>
    </div>
    <div class="panel">
        <a class="section-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3" aria-expanded="false" aria-controls="panel3">
              <span class="toggle-icon"></span>
              <h2>Paneel 3</h2>
            </a>
        <div class="section-body collapse" id="panel3">
            <p>En dit is de inhoud van <strong>Paneel 3</strong></p>
        </div>
    </div>
</div>
 
{{#accordion}}
  {{#each panels }}
    {{#panel title this }}
      <p>En dit is de inhoud van <strong>{{ title }}</strong></p>
    {{/panel}}
  {{/each}}
{{/accordion}}
 
panels:
  - title: Paneel 1
    id: panel1
    icon: fa fa-check
  - title: Paneel 2
    id: panel2
  - title: Paneel 3
    id: panel3
  • Content: 
    // Notes:
// ------
// * Each change to this file needs a restart of the fractal instance
// * Exported methods are merged as helpers in fractal.js
// ToDo: Multiple accordion's are impossible: The @id of each .accordion is fixed.

module.exports = function (fractal) {
  const handlebars = fractal.components.engine().handlebars;

  return {
    accordion(options) {
      return `
        <div class="accordion" id="accordion">
          ${options.fn(this)}
        </div>
      `.trim();
    },

    panel(title, context, options) {
      let o = options || context;
      let icon = '';

      return handlebars
        .compile('{{> \'@icon\' }}')({ icon: context.icon })
        .then(i => {
          icon = context.icon && i.trim();

          return o.fn(context);
        })
        .then(content => `
          <div class="panel">
            <a class="section-toggle" data-toggle="collapse" data-parent="#accordion" href="#${context.id}" aria-expanded="false" aria-controls="${context.id}">
              <span class="toggle-icon"></span>
              <h2>${title}${icon || ''}</h2>
            </a>
            <div class="section-body collapse" id="${context.id}">
              ${content.trim()}
            </div>
          </div>
        `.trim());
    }
  };
};
  • URL: /components/raw/accordion/accordion.js
  • Filesystem Path: components\02-content\accordion\accordion.js
  • Size: 1.3 KB

There are no notes for this item.

WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1_A.G141

The heading structure is not logically nested. This h2 element appears to be the primary document heading, so should be an h1 element.

<h2>Paneel 1<span class="fa fa-check" aria-hidden="true"></span></h2>

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<h2>Paneel 1<span class="fa fa-check" aria-hidden="true"></span></h2>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Default

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81

Check that the link text combined with programmatically determined link context identifies the purpose of the link.

<a class="section-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1" aria-expanded="false" aria-controls="panel1"> <span class="toggle-icon"></span> <h2>Paneel 1<span class="fa fa-check" aria-hidden="true"></span></h2> </a>