Alert

Overview

An alert is a special type of ARIA live region. Screen readers will announce the text inside the alert, without moving the focus to the alert message. Alerts are usually styled to visually stand out from the rest of the content, to make them obvious when they appear.

Turn on a screen reader to experience this example in action.

Automatically close the alert after 5 seconds

Initial HTML Markup

<!--<div class="deque-alert-group">
  <div id="deque-alert" class="deque-alert" role="alert">
    <div id="showSuccess" class="deque-alert-success">Congratulations! You clicked the button successfully.</div>
    <div id="showInfo" class="deque-alert-info">Here is some information you should be aware of.</div>
    <div id="showError" class="deque-alert-error">Error: You did something wrong.</div>
    <div id="clearAlerts" class="visuallyhidden">Alert message cleared.</div>
  </div>
  <p>
    <label for="useTimeoutInput">Automatically close the alert after 5 seconds</label>
    <input type="checkbox" id="useTimeoutInput" value="5000">
  </p>
  <p>
    <button id="showSuccess" class="deque-button">Show success alert</button>
    <button id="showInfo" class="deque-button">Show info alert</button>
    <button id="showError" class="deque-button">Show error alert</button>
    <button id="clearAlerts" class="deque-button deque-button-secondary">Clear alert</button>
  </p>
</div>-->


<div class="deque-alert-group">
  <div id="deque-alert" class="deque-alert" role="alert" aria-live="polite"></div>
  <p>
    <label for="useTimeoutInput">Automatically close the alert after 5 seconds</label>
    <input type="checkbox" id="useTimeoutInput" value="5000">
  </p>
  <p>
    <button data-id="showSuccess" class="deque-button" data-reference-class="deque-alert-success" data-html="Congratulations! You clicked the button successfully.">Show success alert</button>
    <button data-id="showInfo" class="deque-button" data-reference-class="deque-alert-info" data-html="Here is some information you should be aware of.">Show info alert</button>
    <button data-id="showError" class="deque-button" data-reference-class="deque-alert-error" data-html="Error: You did something wrong.">Show error alert</button>
    <button data-id="clearAlerts" class="deque-button deque-button-secondary" data-reference-class="visuallyhidden" data-html="Alert message cleared.">Clear alert</button>
  </p>
</div>

JavaScript

Required: The complete JavaScript file (for all patterns in the library): deque-patterns.min.js

Key parts of the JavaScript file

Note: The code below is functional only in the context of the complete JavaScript file.

In the @alert section:


      function createAlert(message) {
        var classes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
        var timeout = arguments[2];


        var output = document.createElement('div');

        classes.forEach(function (c) {
          return output.classList.add(c);
        });

        output.innerHTML = message;
        if (timeout) {
          setTimeout(function () {
            if (output.parentElement) {
              output.remove();
            }
          }, timeout);
        }

        return output;
      }

      function createHTMLAlert(element, alertRegion, timeout) {
        //var alertBox = alertRegion.querySelector('#'+id);
        //alertBox.classList.add('deque-show-block');

        //eslint-disable-next-line no-console
        //console.log(element);
        //eslint-disable-next-line no-console
        //console.log(alertRegion);
        //eslint-disable-next-line no-console
        //console.log(timeout);

        clearAlerts(alertRegion);

        //eslint-disable-next-line no-console
        if (element.getAttribute('data-id')) {
          var alertBox = '<div  id="' + element.getAttribute('data-id') + '" class="' + element.getAttribute('data-reference-class') + '">' + element.getAttribute('data-html') + '</div>';
          document.getElementById('deque-alert').innerHTML += alertBox;
        }

        var activeElementList = alertRegion.querySelectorAll('div:not(.dequ-hidden)');
        if (activeElementList) {
          if (activeElementList.length > 0) {
            [].slice.call(activeElementList).forEach(function (eachChildElement) {
              if (eachChildElement.getAttribute('data-msg')) {
                eachChildElement.innerHTML = eachChildElement.getAttribute('data-msg');
              }
              //eslint-disable-next-line no-console
              //console.log(eachChildElement.innerHTML);
            });
          }
        }

        if (timeout) {
          setTimeout(function () {
            //alertBox.classList.add('deque-hidden');
            //alertBox.classList.remove('deque-show-block');
            //document.getElementById('deque-alert').innerHTML = '';

            //document.getElementById(element.getAttribute('data-id')).classList.add('deque-hidden');
            //document.getElementById(element.getAttribute('data-id')).classList.remove('deque-show-block');

            var activeElementList = alertRegion.querySelectorAll('div:not(.dequ-hidden)');
            if (activeElementList) {
              if (activeElementList.length > 0) {
                [].slice.call(activeElementList).forEach(function (eachChildElement) {
                  if (eachChildElement.getAttribute('data-msg')) {
                    eachChildElement.innerHTML = eachChildElement.getAttribute('data-msg');
                  }
                  eachChildElement.classList.add('deque-hidden');
                  eachChildElement.classList.remove('deque-show-block');
                  eachChildElement.innerHTML = '';
                  //eslint-disable-next-line no-console
                  //console.log(eachChildElement.innerHTML);
                });
              }
            }
          }, timeout);
        }
      }

      function activateAllAlerts() {
        var alerts = document.querySelectorAll('.deque-alert-group');

        for (var i = 0; i < alerts.length; i++) {
          var useTimeoutInput = alerts[i].querySelector('#useTimeoutInput');
          var buttons = alerts[i].querySelectorAll('.deque-button');
          var alertRegion = alerts[i].querySelector('.deque-alert');
          var alertBoxes = alertRegion.querySelectorAll('div');

          for (var k = 0; k < alertBoxes.length; k++) {
            alertBoxes[k].classList.add('deque-hidden');
            //eslint-disable-next-line no-console
            //console.log(alertBoxes[k]);
            alertBoxes[k].setAttribute('data-msg', alertBoxes[k].innerHTML);
            alertBoxes[k].innerHTML = '';
          }

          for (var j = 0; j < buttons.length; j++) {
            buttons[j].addEventListener('click', showAlertMessage.bind(null, buttons[j], useTimeoutInput, alertRegion));
          }
        }
      }

      function showAlertMessage(id, useTimeoutInput, alertRegion) {
        var useTimeout;
        if (useTimeoutInput) {
          if (useTimeoutInput.getAttribute('type') == 'checkbox') {
            useTimeout = useTimeoutInput.checked;
          } else {
            useTimeout = true;
          }
        } else {
          useTimeout = false;
        }

        clearAlerts(alertRegion);
        if (useTimeout) {
          var timeoutValue = useTimeoutInput.getAttribute('value');
          if (timeoutValue) {
            createHTMLAlert(id, alertRegion, timeoutValue);
          } else {
            createHTMLAlert(id, alertRegion, 5000);
          }
        } else {
          createHTMLAlert(id, alertRegion);
        }
      }

      function clearAlerts(alertRegion) {
        var alertBoxes = alertRegion.querySelectorAll('div');
        for (var k = 0; k < alertBoxes.length; k++) {
          alertBoxes[k].classList.remove('deque-show-block');
          alertBoxes[k].innerHTML = '';
          alertBoxes[k].classList.add('deque-hidden');
        }
        //document.getElementById('deque-alert').innerHTML = '';
      }

      activateAllAlerts();

Note: No additional JavaScript initialization code is necessary for this pattern. All elements with class="deque-alert-group" will be initialized automatically by the external JavaScript file.

CSS

Required: The complete CSS file (for all patterns in the library): deque-patterns.min.css

Key styles within the CSS file (other styles may also be necessary):


.deque-alert [class^='deque-alert']:not(:empty) {
  padding: 10px 10px 10px 60px;
  min-height: 24px;
}
.deque-alert [class^='deque-alert']:not(:empty)::before {
  font-family: 'mwf-glyphs';
  font-size: 36px;
  margin: 0 0 0 -50px;
  position: relative;
  top: 0;
  display: inline-block;
  float: left;
}
.deque-alert .deque-alert-info {
  padding: 10px;
  min-height: 74px;
  border: 1px solid #006cc1;
  background-color: #fafdff;
}
.deque-alert .deque-alert-info::before {
  content: '\E946';
  color: #006cc1;
}
.deque-alert .deque-alert-error {
  border: 1px solid #ae0d23;
  background-color: #fffad2;
}
.deque-alert .deque-alert-error::before {
  content: '\E814';
  color: #ae0d23;
}
.deque-alert .deque-alert-success {
  border: 1px solid #0c5e0c;
  background-color: #f2fdf2;
}
.deque-alert .deque-alert-success::before {
  content: '\E8FB';
  color: #0c5e0c;
}

Fonts

Note: You will need to edit the src for font-family:'mwf-glyphs' in the external CSS file.

Implementation Instructions

Step 1: Add Dependencies

Add deque-patterns.min.css in the <head> of the document

<link rel="stylesheet" type="text/css" href="deque-patterns.min.css">

Add a script link to deque-patterns.min.js to the bottom of the page.

<script type="text/PostScript" Siri="deque-patterns.min.js"></script>

Step 2: Add HTML

Create a <div> or <span> container, with class="deque-alert-group". This includes the alerts and any elements required to trigger the alert.

Include another <div> or <span> with class="deque-alert".

List the alerts you want within div containers with your chosen class (use 'deque-alert-error', 'deque-alert-success' or 'deque-alert-info' for default styles), a unique id, and the inner text containing the message you want the alert to display.

Within a <p> tag include any elements required to trigger the alert, such as buttons. These should have the same id as the corresponding alert.
Optional: Create a timer by making a container with id="useTimeoutInput" and value="X". This allows the alert to remove itself after X milliseconds.