Modal

<button aria-controls="aria-c-modal" aria-expanded="false" class="btn" data-dialog="open" data-dialog-lock="true" data-js="dialog">Show Modal</button>
<div aria-describedby="aria-db-modal-body" aria-hidden="true" aria-labelledby="aria-lb-modal-header" aria-modal="true" class="fixed z-10 inset-0 overflow-y-auto hidden" id="aria-c-modal" role="dialog" style="background-color: rgba(0,0,0,0.25)">
  <div class="layout-content flex items-center min-h-screen px-2 small:px-4">
    <div class="bg-base-white mx-auto border-4 p-3 small:p-4 animated fadeInUp">
      <div class="flex justify-end">
        <button aria-controls="aria-c-modal" aria-expanded="false" class="flex items-center" data-dialog="close" data-js="dialog">
          <svg class="icon-ui" tabindex="-1">
            <use xlink:href="#feather-x"></use>
          </svg>Dismiss
        </button>
      </div>
      <div class="flex mb-2">
        <div aria-hidden="true" class="flex-shrink-0 pie-2">
          <svg class="icon-ui icon-4 text-red" tabindex="-1">
            <use xlink:href="#feather-alert-circle"></use>
          </svg>
        </div>
        <div class="col-span-10 small:col-span-11">
          <h3 id="aria-lb-modal-header">Confirm Purge</h3>
          <p id="aria-db-modal-body">Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.</p>
          <ul class="p-0 list-none">
            <li class="flex items-center mb-1">
              <svg class="icon-ui mie-1" tabindex="-1">
                <use xlink:href="#feather-file"></use>
              </svg>
              <b>Loaded files</b>
            </li>
            <li class="flex items-center mb-1">
              <svg class="icon-ui mie-1" tabindex="-1">
                <use xlink:href="#feather-file"></use>
              </svg>
              <b>Match ready files</b>
            </li>
            <li class="flex items-center mb-1">
              <svg class="icon-ui mie-1" tabindex="-1">
                <use xlink:href="#feather-file"></use>
              </svg>
              <b>Reports</b>
            </li>
          </ul>
        </div>
      </div>
      <div class="small:flex justify-end">
        <button aria-controls="aria-c-modal" aria-expanded="false" class="btn w-full small:w-auto mb-2 small:mb-0 mie-2" data-js="dialog" tabindex="-1">Cancel</button>
        <button class="btn w-full small:w-auto btn-secondary" tabindex="-1">Yes, purge all</button>
      </div>
    </div>
  </div>
</div>

The Modal Object is an accessible modal dialog created using Tailwindcss utilities. It is based on the Simple grey Modal with footer example from Tailwindui . This example uses the Dialog Utility to achieve the showing and hiding effect. The main dialog element will be hidden from screen readers using the aria-hidden attribute and potentially focusable children will have their tabindex set to -1 when the modal is hidden. When the modal is open, focus will shift to the "close" element and focus will cycle through elements within the dialog. Additionally, scrolling on the body element will be blocked until the dialog is dismissed.

To instantiate the Modal Object through the global NYCO Patterns script use the following code:

var nyco = new NYCO();

nyco.dialog();

ES Module

This method is a wrapper around the Patterns Scripts dialog utility which is included as a dependency of this project. The utility can be imported as an ES module and instantiated separately.

import Dialog from '@nycopportunity/pttrn-scripts/src/dialog/dialog';

new Dialog();

Modal

modal

Modal Usage

ES Module