Modal: Progress

Component preview opent in nieuw tabblad

Soms is het wenselijk de flow van de gebruiker te onderbreken, omdat een applicatie bv. gegevens moet inladen. Voor die gevallen is het wenselijk een progress indicator in een modal op te kunnen nemen. De modal moet daartoe op een non-interactieve manier kunnen worden ingezet.

Gedrag en toegankelijkheid

  • De modal fungeert als alert, en heeft derhalve geen aria-label, aria-labelledby, aria-describedby
  • De tab focus moet beperkt zijn tot de modal (keyboard trap).
  • Een modal die voor dit doel wordt ingezet kan niet gesloten worden door op de sluitknop te klikken.

Modal Progress role: alert

Is de modal bedoeld om de gebruiker erop te wijzen dat een actie even gaat duren, dan is een role="alert" op zijn plaats. Voor de overige toepassingen van de modal: Modal Dialog.

<!-- 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" tabindex="-1" role="alert">
        <div class="dso-dialog" role="document">

            <div class="dso-body">

                <div class="dso-progress-indicator dso-small dso-block" role="progressbar" aria-labelledby="prg-in-dialog">
                    <div class="dso-progress-indicator-spinner"></div><span id="prg-in-dialog" class="dso-progress-indicator-label">Resultaten laden. Een moment geduld.</span>
                </div>

            </div>

        </div>
    </div>

    <section class="dso-banner alert-danger" role="alert">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="dso-rich-content">
                        <h2>Storingsmelding:</h2>
                        <p>
                            Op dit moment ervaren wij een storing in de Vergunningcheck. U kunt wel een aanvraag of melding indienen.
                        </p>
                    </div>
                    <button type="button" class="dso-tertiary">
                        <span class="sr-only">Sluiten storingsmelding</span><svg class="di di-times">
                            <use href="../../dso-icons.svg#times" />
                        </svg>

                    </button>
                </div>
            </div>
        </div>
    </section>

    <div class="container">
        <!-- Page content -->

        <form>

            <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" aria-describedby="helpTextId_achternaam">

                        <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">
                        <span class="control-label">Geslacht</span>

                    </div>
                    <div class="dso-field-container">
                        Man

                    </div>
                </div>

            </fieldset>

        </form>

    </div>

    <script type="module" src="../../@dso-toolkit/core/dso-toolkit/dso-toolkit.esm.js"></script>
    <script nomodule src="../../@dso-toolkit/core/dso-toolkit/dso-toolkit.js"></script>

</body>
<!-- When modal is open add .dso-modal-open to body -->
<body {{ className('dso-modal-open') }}>
  <!-- Modal markup. Can be placed anywhere inside <body> -->
  {% render '@dialog', {body: body, dialog: dialog, progress: progress} %}

  <section class="dso-banner alert-danger" role="alert">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div class="dso-rich-content">
            <h2>Storingsmelding:</h2>
            <p>
              Op dit moment ervaren wij een storing in de Vergunningcheck. U kunt wel een aanvraag of melding indienen.
            </p>
          </div>
          <button type="button" class="dso-tertiary">
            <span class="sr-only">Sluiten storingsmelding</span>{% render '@icon-css', {icon: 'times'} %}
          </button>
        </div>
      </div>
    </div>
  </section>

  <div class="container">
    <!-- Page content -->
    {% render '@form', {fieldsets: fieldsets} %}
  </div>

  <script type="module" src="{{ '/@dso-toolkit/core/dso-toolkit/dso-toolkit.esm.js' | path }}"></script>
  <script nomodule src="{{ '/@dso-toolkit/core/dso-toolkit/dso-toolkit.js' | path }}"></script>

</body>
__title: Modal with progress indicator
body: >-
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
  parturient montes, nascetur ridiculus mus.
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
dialog: false
progress:
  label: Resultaten laden. Een moment geduld.