Demo

Willow-Modal is a small window that overlays (pops up over) the content of a webpage in order to draw the user’s attention to crucial information that requires action. The modal will halt the user from continuing until they provide the required action. Unlike the willow-dialog component, the modal cannot be closed by pressing escape or clicking outside of the window.

Examples: Confirming deletion of information, entering an email address to download something, agreeing to terms of use.

<div class="willow-modal">
  <section class="willow-modal__container" role="alertdialog">
    <h1 class="willow-modal__heading">Modal</h1>
    <div class="willow-modal__content">
        <!-- insert content components here -->
    </div>
    <ul class="willow-modal__actions">
      <li class="willow-modal__action"><!-- insert action component here --></li>
    </ul>
  </section>
</div>

• Required
• Restrictions
  • Should Contain: the willow-modal__container element

<section class="willow-modal" data-modal-close="true"> : closes the modal

• willow-modal produces a semi-transparent overlay over the page content to help a user focus on the modal and to stop interaction with the page until the user closes the modal
• clicking outside of the willow-modal__container should NOT trigger the willow-modal to close

• Required
• Restrictions
  • Should Contain: modal content elements (__heading, __content, and __actions)

• willow-modal__container contains all content and action based items for the modal
• clicking outside of the willow-modal__container window should NOT trigger the willow-modal to close
• The use of role="alertdialog" with the <section> element ensures that willow-modal__container is accessible for user agents that do not support HTML5. The use of both <section> and <role="alertdialog"> together may create a warning in an HTML validator but we left this pattern intact for now to cover all of our accessibility bases.

• Required
• Restrictions
  • Should Contain: text

• willow-modal__heading is visible by default, and even if it is hidden, it is required to meet accessibility standards
• To hide the willow-modal__heading add the sr-only utility class to the element

• Required
• Restrictions
  • Should Contain: one or more components

• Required
• Restrictions
  • Should Contain: one or more willow-modal__action elements

• Required
• Restrictions
  • Should Contain: one actionable component (such as willow-button or a link)

• completing the actionable component should record the response and trigger the willow-modal to close