DSO Component Library

Modal: Confirm 

<!-- When modal is open add .dso-modal-open to body -->

<body class="dso-modal-open">
    <!-- Modal markup. Can be placed anywhere inside <body> -->
    <div class="dso-modal dso-confirm" tabindex="-1" role="dialog" aria-labelledby="modal-confirm">
        <div class="dso-dialog" role="document">
            <div class="dso-header">
                <h2 id="modal-confirm">Activiteit toevoegen</h2>
            </div>
            <div class="dso-body">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
            </div>
            <div class="dso-footer">
                <button type="button" class="btn btn-default">
            Ja
          </button>
                <button type="button" class="btn btn-default">
            Nee
          </button>
            </div>
        </div>
    </div>

    <div class="container">
        <!-- Page content -->
        <form>
            <fieldset class="dso-form-fields">
                <legend class="sr-only"></legend>
                <fieldset>
                    <legend>Contact</legend>
                    <div class="form-group dso-input dso-input-text dso-required">
                        <div class="dso-label-container">
                            <label for="voornaam" class="control-label">
                    Voornaam
                  </label>
                        </div>
                        <div class="dso-field-container">
                            <input type="text" id="voornaam" class="form-control" required />
                        </div>
                    </div>
                    <div class="form-group dso-input dso-input-text">
                        <div class="dso-label-container">
                            <label for="achternaam" class="control-label">
                    Achternaam
                  </label>
                        </div>
                        <div class="dso-field-container">
                            <input type="text" id="achternaam" class="form-control" />
                            <p class="dso-help-block" id="helpTextId_achternaam">Mag ook de familienaam zijn</p>
                        </div>
                    </div>
                    <div class="form-group dso-static">
                        <div class="dso-label-container">
                            <label class="control-label">Geslacht</label>
                        </div>
                        <div class="dso-field-container">
                            <p>Man</p>
                        </div>
                    </div>
                    <div class="form-group dso-input dso-input-text has-feedback">
                        <div class="dso-label-container">
                            <label for="geboortedatum" class="control-label">
                    Geboortedatum
                  </label>
                        </div>
                        <div class="dso-field-container">
                            <input type="text" id="geboortedatum" class="form-control" />
                            <span class="fas fa-calendar form-control-feedback" aria-hidden="true"></span>
                        </div>
                    </div>
                    <div class="form-group dso-input dso-input-text dso-required">
                        <div class="dso-label-container">
                            <label for="email" class="control-label">
                    E-mailadres
                  </label>
                        </div>
                        <div class="dso-field-container">
                            <input type="text" id="email" class="form-control" required />
                        </div>
                    </div>
                    <div class="form-group dso-input dso-input-text">
                        <div class="dso-label-container">
                            <label for="password" class="control-label">
                    Wachtwoord
                  </label>
                        </div>
                        <div class="dso-field-container">
                            <input type="text" id="password" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group dso-input dso-input-text">
                        <div class="dso-label-container">
                            <label for="password_bevestig" class="control-label">
                    Wachtwoord (bevestig)
                  </label>
                        </div>
                        <div class="dso-field-container">
                            <input type="text" id="password_bevestig" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group dso-confirm">
                        <div class="dso-field-container">
                            <div class="dso-selectable">
                                <input type="checkbox" id="nieuwsbrief" name="" value="" />
                                <label for="nieuwsbrief">Stuur mij de maandelijkse nieuwsbrief</label>
                            </div>
                            <p class="dso-help-block" id="helpTextId_nieuwsbrief">Uw gegevens zullen niet worden gedeeld met derden</p>
                        </div>
                    </div>
                </fieldset>
            </fieldset>
            <div class="dso-form-buttons">
                <button type="submit" class="btn btn-primary">
          Verstuur
        </button>
            </div>
        </form>
    </div>
</body>
 
<!-- When modal is open add .dso-modal-open to body -->
<body class="dso-modal-open">
  <!-- Modal markup. Can be placed anywhere inside <body> -->
  <div class="dso-modal{{#if confirm }} dso-confirm{{/if}}" tabindex="-1" role="dialog" aria-labelledby="{{ id }}">
    <div class="dso-dialog" role="document">
      <div class="dso-header">
        <h2 id="{{ id }}">{{ heading }}</h2>
        {{#if closeButton }}
          <button type="button" class="dso-close" aria-label="Sluiten"></button>
        {{/if}}
      </div>
      <div class="dso-body">
        <p>{{ body }}</p>
      </div>
      <div class="dso-footer">
        {{#each buttons }}
          {{> '@button' }}
        {{/each}}
      </div>
    </div>
  </div>

  <div class="container">
    <!-- Page content -->
    {{> '@form' }}
  </div>
</body>
 
id: modal-confirm
heading: Activiteit toevoegen
body: >-
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor. Aenean massa.
buttons:
  - name: yesButton
    type: button
    modifier: default
    label: Ja
  - name: noButton
    type: button
    modifier: default
    label: Nee
fieldsets:
  - legend: Contact
    groups:
      - id: voornaam
        inputType: input
        type: text
        label: Voornaam
        required: true
      - id: achternaam
        inputType: input
        type: text
        label: Achternaam
        helpText: Mag ook de familienaam zijn
      - inputType: static
        label: Geslacht
        value: Man
      - id: geboortedatum
        inputType: input
        type: text
        label: Geboortedatum
        inputIcon: fas fa-calendar
      - id: email
        inputType: input
        type: text
        label: E-mailadres
        required: true
      - id: password
        inputType: input
        type: text
        label: Wachtwoord
      - id: password_bevestig
        inputType: input
        type: text
        label: Wachtwoord (bevestig)
      - id: nieuwsbrief
        inputType: confirm
        label: Stuur mij de maandelijkse nieuwsbrief
        helpText: Uw gegevens zullen niet worden gedeeld met derden
submitButton:
  type: submit
  modifier: primary
  label: Verstuur
confirm: true

There are no notes for this item.

ERROR: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Fieldset.Name

This fieldset element does not have a name available to an accessibility API. Valid names are: legend element.

<fieldset class="dso-form-fields"> <legend class="sr-only"></legend> <fieldset> <legend>Contact</legend> <div class="form-group dso-input dso-input-text dso-required"> <div class="dso-label-container"> <label for="voornaam" class="control-label"> Voornaam </label> </div> <div class="dso-field-container"> <input type="text" id="voornaam" class="form-control" required=""> </div> </div> <div class="form-group dso-input dso-input-text"> <div class="dso-label-container"> <label for="achternaam" class="control-label"> Achternaam </label> </div> <div class="dso-field-container"> <input type="text" id="achternaam" class="form-control"> <p class="dso-help-block" id="helpTextId_achternaam">Mag ook de familienaam zijn</p> </div> </div> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Geslacht</label> </div> <div class="dso-field-container"> <p>Man</p> </div> </div> <div class="form-group dso-input dso-input-text has-feedback"> <div class="dso-label-container"> <label for="geboortedatum" class="control-label"> Geboortedatum </label> </div> <div class="dso-field-container"> <input type="text" id="geboortedatum" class="form-control"> <span class="fas fa-calendar form-control-feedback" aria-hidden="true"></span> </div> </div> <div class="form-group dso-input dso-input-text dso-required"> <div class="dso-label-container"> <label for="email" class="control-label"> E-mailadres </label> </div> <div class="dso-field-container"> <input type="text" id="email" class="form-control" required=""> </div> </div> <div class="form-group dso-input dso-input-text"> <div class="dso-label-container"> <label for="password" class="control-label"> Wachtwoord </label> </div> <div class="dso-field-container"> <input type="text" id="password" class="form-control"> </div> </div> <div class="form-group dso-input dso-input-text"> <div class="dso-label-container"> <label for="password_bevestig" class="control-label"> Wachtwoord (bevestig) </label> </div> <div class="dso-field-container"> <input type="text" id="password_bevestig" class="form-control"> </div> </div> <div class="form-group dso-confirm"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="nieuwsbrief" name="" value=""> <label for="nieuwsbrief">Stuur mij de maandelijkse nieuwsbrief</label> </div> <p class="dso-help-block" id="helpTextId_nieuwsbrief">Uw gegevens zullen niet worden gedeeld met derden</p> </div> </div> </fieldset> </fieldset>

WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1.H44.NonExistentFragment

This label's "for" attribute contains an ID that does not exist in the document fragment.

<label class="control-label">Geslacht</label>

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 id="modal-no-close">Activiteit toevoegen</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 id="modal-no-close">Activiteit toevoegen</h2>

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

Check that the title element describes the document.

<title>Modal

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"> Toevoegen </button>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_1.G83,G84,G85

If an input error is automatically detected in this form, check that the item(s) in error are identified and the error(s) are described to the user in text.

<form> <fieldset class="dso-form-fields"> <legend class="sr-only"></legend> <fieldset> <legend>Contact</legend> <div class="form-group dso-input dso-input-text dso-required"> <div class="dso-label-container"> <label for="voornaam" class="control-label"> Voornaam </label> </div> <div class="dso-field-container"> <input type="text" id="voornaam" class="form-control" required=""> </div> </div> <div class="form-group dso-input dso-input-text"> <div class="dso-label-container"> <label for="achternaam" class="control-label"> Achternaam </label> </div> <div class="dso-field-container"> <input type="text" id="achternaam" class="form-control"> <p class="dso-help-block" id="helpTextId_achternaam">Mag ook de familienaam zijn</p> </div> </div> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Geslacht</label> </div> <div class="dso-field-container"> <p>Man</p> </div> </div> <div class="form-group dso-input dso-input-text has-feedback"> <div class="dso-label-container"> <label for="geboortedatum" class="control-label"> Geboortedatum </label> </div> <div class="dso-field-container"> <input type="text" id="geboortedatum" class="form-control"> <span class="fas fa-calendar form-control-feedback" aria-hidden="true"></span> </div> </div> <div class="form-group dso-input dso-input-text dso-required"> <div class="dso-label-container"> <label for="email" class="control-label"> E-mailadres </label> </div> <div class="dso-field-container"> <input type="text" id="email" class="form-control" required=""> </div> </div> <div class="form-group dso-input dso-input-text"> <div class="dso-label-container"> <label for="password" class="control-label"> Wachtwoord </label> </div> <div class="dso-field-container"> <input type="text" id="password" class="form-control"> </div> </div> <div class="form-group dso-input dso-input-text"> <div class="dso-label-container"> <label for="password_bevestig" class="control-label"> Wachtwoord (bevestig) </label> </div> <div class="dso-field-container"> <input type="text" id="password_bevestig" class="form-control"> </div> </div> <div class="form-group dso-confirm"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="nieuwsbrief" name="" value=""> <label for="nieuwsbrief">Stuur mij de maandelijkse nieuwsbrief</label> </div> <p class="dso-help-block" id="helpTextId_nieuwsbrief">Uw gegevens zullen niet worden gedeeld met derden</p> </div> </div> </fieldset> </fieldset> <div class="dso-form-buttons"> <button type="submit" class="btn btn-primary"> Verstuur </button> </div> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_2.G131,G89,G184,H90

Check that descriptive labels or instructions (including for required fields) are provided for user input in this form.

<form> <fieldset class="dso-form-fields"> <legend class="sr-only"></legend> <fieldset> <legend>Contact</legend> <div class="form-group dso-input dso-input-text dso-required"> <div class="dso-label-container"> <label for="voornaam" class="control-label"> Voornaam </label> </div> <div class="dso-field-container"> <input type="text" id="voornaam" class="form-control" required=""> </div> </div> <div class="form-group dso-input dso-input-text"> <div class="dso-label-container"> <label for="achternaam" class="control-label"> Achternaam </label> </div> <div class="dso-field-container"> <input type="text" id="achternaam" class="form-control"> <p class="dso-help-block" id="helpTextId_achternaam">Mag ook de familienaam zijn</p> </div> </div> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Geslacht</label> </div> <div class="dso-field-container"> <p>Man</p> </div> </div> <div class="form-group dso-input dso-input-text has-feedback"> <div class="dso-label-container"> <label for="geboortedatum" class="control-label"> Geboortedatum </label> </div> <div class="dso-field-container"> <input type="text" id="geboortedatum" class="form-control"> <span class="fas fa-calendar form-control-feedback" aria-hidden="true"></span> </div> </div> <div class="form-group dso-input dso-input-text dso-required"> <div class="dso-label-container"> <label for="email" class="control-label"> E-mailadres </label> </div> <div class="dso-field-container"> <input type="text" id="email" class="form-control" required=""> </div> </div> <div class="form-group dso-input dso-input-text"> <div class="dso-label-container"> <label for="password" class="control-label"> Wachtwoord </label> </div> <div class="dso-field-container"> <input type="text" id="password" class="form-control"> </div> </div> <div class="form-group dso-input dso-input-text"> <div class="dso-label-container"> <label for="password_bevestig" class="control-label"> Wachtwoord (bevestig) </label> </div> <div class="dso-field-container"> <input type="text" id="password_bevestig" class="form-control"> </div> </div> <div class="form-group dso-confirm"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="nieuwsbrief" name="" value=""> <label for="nieuwsbrief">Stuur mij de maandelijkse nieuwsbrief</label> </div> <p class="dso-help-block" id="helpTextId_nieuwsbrief">Uw gegevens zullen niet worden gedeeld met derden</p> </div> </div> </fieldset> </fieldset> <div class="dso-form-buttons"> <button type="submit" class="btn btn-primary"> Verstuur </button> </div> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_3.G177

Check that this form provides suggested corrections to errors in user input, unless it would jeopardize the security or purpose of the content.

<form> <fieldset class="dso-form-fields"> <legend class="sr-only"></legend> <fieldset> <legend>Contact</legend> <div class="form-group dso-input dso-input-text dso-required"> <div class="dso-label-container"> <label for="voornaam" class="control-label"> Voornaam </label> </div> <div class="dso-field-container"> <input type="text" id="voornaam" class="form-control" required=""> </div> </div> <div class="form-group dso-input dso-input-text"> <div class="dso-label-container"> <label for="achternaam" class="control-label"> Achternaam </label> </div> <div class="dso-field-container"> <input type="text" id="achternaam" class="form-control"> <p class="dso-help-block" id="helpTextId_achternaam">Mag ook de familienaam zijn</p> </div> </div> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Geslacht</label> </div> <div class="dso-field-container"> <p>Man</p> </div> </div> <div class="form-group dso-input dso-input-text has-feedback"> <div class="dso-label-container"> <label for="geboortedatum" class="control-label"> Geboortedatum </label> </div> <div class="dso-field-container"> <input type="text" id="geboortedatum" class="form-control"> <span class="fas fa-calendar form-control-feedback" aria-hidden="true"></span> </div> </div> <div class="form-group dso-input dso-input-text dso-required"> <div class="dso-label-container"> <label for="email" class="control-label"> E-mailadres </label> </div> <div class="dso-field-container"> <input type="text" id="email" class="form-control" required=""> </div> </div> <div class="form-group dso-input dso-input-text"> <div class="dso-label-container"> <label for="password" class="control-label"> Wachtwoord </label> </div> <div class="dso-field-container"> <input type="text" id="password" class="form-control"> </div> </div> <div class="form-group dso-input dso-input-text"> <div class="dso-label-container"> <label for="password_bevestig" class="control-label"> Wachtwoord (bevestig) </label> </div> <div class="dso-field-container"> <input type="text" id="password_bevestig" class="form-control"> </div> </div> <div class="form-group dso-confirm"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="nieuwsbrief" name="" value=""> <label for="nieuwsbrief">Stuur mij de maandelijkse nieuwsbrief</label> </div> <p class="dso-help-block" id="helpTextId_nieuwsbrief">Uw gegevens zullen niet worden gedeeld met derden</p> </div> </div> </fieldset> </fieldset> <div class="dso-form-buttons"> <button type="submit" class="btn btn-primary"> Verstuur </button> </div> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_4.G98,G99,G155,G164,G168.LegalForms

If this form would bind a user to a financial or legal commitment, modify/delete user-controllable data, or submit test responses, ensure that submissions are either reversible, checked for input errors, and/or confirmed by the user.

<form> <fieldset class="dso-form-fields"> <legend class="sr-only"></legend> <fieldset> <legend>Contact</legend> <div class="form-group dso-input dso-input-text dso-required"> <div class="dso-label-container"> <label for="voornaam" class="control-label"> Voornaam </label> </div> <div class="dso-field-container"> <input type="text" id="voornaam" class="form-control" required=""> </div> </div> <div class="form-group dso-input dso-input-text"> <div class="dso-label-container"> <label for="achternaam" class="control-label"> Achternaam </label> </div> <div class="dso-field-container"> <input type="text" id="achternaam" class="form-control"> <p class="dso-help-block" id="helpTextId_achternaam">Mag ook de familienaam zijn</p> </div> </div> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Geslacht</label> </div> <div class="dso-field-container"> <p>Man</p> </div> </div> <div class="form-group dso-input dso-input-text has-feedback"> <div class="dso-label-container"> <label for="geboortedatum" class="control-label"> Geboortedatum </label> </div> <div class="dso-field-container"> <input type="text" id="geboortedatum" class="form-control"> <span class="fas fa-calendar form-control-feedback" aria-hidden="true"></span> </div> </div> <div class="form-group dso-input dso-input-text dso-required"> <div class="dso-label-container"> <label for="email" class="control-label"> E-mailadres </label> </div> <div class="dso-field-container"> <input type="text" id="email" class="form-control" required=""> </div> </div> <div class="form-group dso-input dso-input-text"> <div class="dso-label-container"> <label for="password" class="control-label"> Wachtwoord </label> </div> <div class="dso-field-container"> <input type="text" id="password" class="form-control"> </div> </div> <div class="form-group dso-input dso-input-text"> <div class="dso-label-container"> <label for="password_bevestig" class="control-label"> Wachtwoord (bevestig) </label> </div> <div class="dso-field-container"> <input type="text" id="password_bevestig" class="form-control"> </div> </div> <div class="form-group dso-confirm"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="nieuwsbrief" name="" value=""> <label for="nieuwsbrief">Stuur mij de maandelijkse nieuwsbrief</label> </div> <p class="dso-help-block" id="helpTextId_nieuwsbrief">Uw gegevens zullen niet worden gedeeld met derden</p> </div> </div> </fieldset> </fieldset> <div class="dso-form-buttons"> <button type="submit" class="btn btn-primary"> Verstuur </button> </div> </form>