DSO Component Library

# Progress Block

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes
- WCAG

`

    <div class="well progress-block" data-spy="affix" data-offset-top="245" data-offset-bottom="444">
        <h2>Aanvraag voorbereiden</h2>
        <p>Omgevingsvergunning</p>
        <ul>
            <li>
                Omschrijving project
            </li>
            <li>
                Aanvrager
            </li>
        </ul>
        <button type="submit" class="btn btn-primary">
        Aanvraag indienen
      </button>

    </div>

`
`

    {{#progressBlock}}
      <h2>Aanvraag voorbereiden</h2>
      <p>Omgevingsvergunning</p>
      <ul>
        <li>
          Omschrijving project
        </li>
        <li>
          Aanvrager
        </li>
      </ul>
      {{> '@button' type='submit' modifier='primary' label='Aanvraag indienen' }}
    {{/progressBlock}}

`
`

    /* No context defined for this component. */

`
File:

- Content:
  `

      // Notes:
      // ------
      // * Each change to this file needs a restart of the fractal instance
      // * Exported methods are merged as helpers in fractal.js

      module.exports = {
        progressBlock(options) {
          const offset = Object.assign({
            top: 245,
            bottom: 444
          }, options.hash);

          return `
            <div class="well progress-block" data-spy="affix" data-offset-top="${ offset.top }" data-offset-bottom="${ offset.bottom }">
              ${options.fn(this)}
            </div>
          `.trim();
        }
      };

  `
- URL: /components/raw/progress-block/progress-block.js
- Filesystem Path: components\02-content\progress-block\progress-block.js
- Size: 512 Bytes

- Handle: @progress-block
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\02-content\progress-block\progress-block.hbs
- References (1): @button

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>Aanvraag voorbereiden</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>Aanvraag voorbereiden</h2>`

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

Check that the title element describes the document.

`<title>Default`

### NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

`<button type="submit" class="btn btn-primary"> Aanvraag indienen </button>`