Alert

Ready

<duet-alert class="duet-text-center"> A simple default alert — check it out! </duet-alert>
<duet-alert variation="success" class="duet-text-center"> A simple success alert — check it out! </duet-alert>
<duet-alert variation="danger" class="duet-text-center"> A simple danger alert — check it out! </duet-alert>
<duet-alert variation="warning" class="duet-text-center"> A simple warning alert — check it out! </duet-alert>

<duet-alert icon="messaging-alert"> A default alert with an icon on left — check it out! </duet-alert>
<duet-alert variation="success" icon="messaging-alert">
  A success alert with an icon on left — check it out!
</duet-alert>
<duet-alert variation="danger" icon="messaging-alert"> A danger alert with an icon on left — check it out! </duet-alert>
<duet-alert variation="warning" icon="messaging-alert">
  A warning alert with an icon on left — check it out!
</duet-alert>

<duet-alert dismissible> A dismissible alert — check it out! </duet-alert>
<duet-alert variation="success" dismissible> A dismissible alert — check it out! </duet-alert>
<duet-alert variation="danger" dismissible> A dismissible alert — check it out! </duet-alert>
<duet-alert variation="warning" dismissible> A dismissible alert — check it out! </duet-alert>

<script>
  // Select the above alert components
  var alerts = document.querySelectorAll("duet-alert")

  // For each component, add dismiss event listener
  alerts.forEach(function (element) {
    element.addEventListener("duetDismiss", function (e) {
      console.log("dismissed", e)
    })
  })
</script>

<div class="duet-toast" aria-live="polite" aria-atomic="false" aria-relevant="additions">
  <duet-alert announcements="false" dismissible> A dismissible alert — check it out! </duet-alert>
  <duet-alert announcements="false" variation="success" dismissible> A dismissible alert — check it out! </duet-alert>
  <duet-alert announcements="false" variation="danger" dismissible> A dismissible alert — check it out! </duet-alert>
  <duet-alert announcements="false" variation="warning" dismissible> A dismissible alert — check it out! </duet-alert>
</div>

<script>
  // Select the above alert components
  var alerts = document.querySelectorAll("duet-alert")

  // For each component, add dismiss event listener
  alerts.forEach(function (element) {
    element.addEventListener("duetDismiss", function (e) {
      console.log("dismissed", e)
    })
  })
</script>

<duet-alert>
  <div class="duet-p-large">
    <duet-heading level="h6">Rajoitusehdot</duet-heading>
    <duet-paragraph>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae porta arcu. Mauris laoreet feugiat
      facilisis. Donec tincidunt dapibus orci, sit amet eleifend augue efficitur eget. Duis eget hendrerit arcu, vitae
      tempor libero. Mauris at dui efficitur, imperdiet lacus sed, volutpat lorem. Donec sed nulla ac nibh laoreet
      egestas.
    </duet-paragraph>
    <duet-checkbox margin="none" label="Hyväksyn rajoitusehdot"></duet-checkbox>
  </div>
</duet-alert>

<div class="duet-toast" aria-live="polite" aria-atomic="false" aria-relevant="additions">
  <duet-alert announcements="false" dismissible auto-dismiss="5000"> A dismissible alert — check it out! </duet-alert>
  <duet-alert announcements="false" variation="success" dismissible auto-dismiss="5000">
    A dismissible alert — check it out!
  </duet-alert>
  <duet-alert announcements="false" variation="danger" dismissible auto-dismiss="5000">
    A dismissible alert — check it out!
  </duet-alert>
  <duet-alert announcements="false" variation="warning" dismissible auto-dismiss="5000">
    A dismissible alert — check it out!
  </duet-alert>
</div>

<script>
  // Select the above alert components
  var alerts = document.querySelectorAll("duet-alert")

  // For each component, add dismiss event listener
  alerts.forEach(function (element) {
    element.addEventListener("duetDismiss", function (e) {
      console.log("dismissed", e)
    })
  })
</script>

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.
It is extremely important that any text you add to the components default slot is ALSO replicated on the accessibleLabel property, otherwise a non sighted user will not be able to understand what is going on

Variations #

This section describes the different component variations, their purpose, and when to use each variation.

Name	Purpose
default	Used to convey general information that isn’t critical. For example, you might show an alert that asks for user feedback.
success	Used to convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed.
danger	Used to communicate problems that have to be resolved so that user can continue forward. This variation should be always used for e.g. highlighting errors.
warning	Used to display information that needs user’s attention and may require further steps.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

• WARNING: There is bug in NVDA screen reader that is causing multiple alert readings when alert contains other components (link, button etc.). It is working correctly for text only.
• Danger and warning alerts have a role="alert" defined which makes sure assistive technologies announce them when they appear.
• Default and success alert variations have a role="status" defined. This makes sure they’re being read after danger and warning alerts.
• All alerts use aria-live attributes. This makes sure contents are announced by assistive technologies when updated. This behaviour can be disabled if needed using announcements property.
• Alerts additionally use tabindex="0" to make it possible to access them using tab key or programmatically move focus to them.

Additional considerations #

• Alert component can be used as a toast message as well, view an example.
• When used as a toast, the alerts will appear from the middle top part of the viewport and stack on top of each other if there’s more than one alert.
• When used as a toast (where alerts are dynamically added), the alert's announcements property should be set to false, and aria-live (and other related attributes) should instead be placed on the container element. This improves the reliability of screen reader announcements by ensuring the live region is already in the DOM before it is used. View an example.