DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Notificaciones

Avisos

Las notificaciones se emplean para dar un mensaje de actualización o para destacar alguna información sobre la que queremos llamar la atención.

Alert

Alert mostrando una notificación de éxito

Utilizamos los atributos 'role': 'alert' y 'aria-live': 'assertive' para que no pasen desapercibidas al lector de pantalla si no movemos el foco tras abrir la notificación. Si la notificación fuese de estado, como que la página se ha cargado, entonces se usará 'role': 'alert' y 'aria-live': 'polite'. La función openAlert toma como primer argumento el id del elemento emergente a mostrar y como segundo argumento el nodo HTML que debe tomar foco al cerrar el elemento emergente.

Mostrar códigodel ejemplo: Alert mostrando una notificación de éxito

Contenido

Nunjucks macro

{% from "components/alert/_macro.alert.njk" import componentAlert %}
{% call componentAlert({
  "button": {
    "text": "Abrir éxito",
    "attributes": {
      "onclick": "openAlert('success-id', this)"
    }
  },
  "id": "success-id",
  "attributes": {
    "role": "alert",
    "aria-live": "assertive"
  }
}) %}
<!-- notification -->
<div id="default-id" data-module="c-notification" class="c-notification c-notification--success">
  <div class="h-full mr-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-success-dark" aria-label="Éxito" focusable="false" role="img"><path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor"/></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p id="default-id-title"  class="font-bold pr-base focus:outline-hidden focus:underline outline-hidden" tabindex="-1">
        El documento se ha cargado correctamente
      </p>
    </div>
    <div class="absolute top-0 right-0 p-sm">
      <button type="button" class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-hidden" aria-label="X: Cerrar notificación">
        <svg class="w-4 h-4 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
      </button>
    </div>
  </div>
</div>
<!-- /notification -->
{% endcall  %}

Alert mostrando una notificación de alerta

La función openAlert toma como primer argumento el id del elemento emergente a mostrar y como segundo argumento el nodo HTML que debe tomar foco al cerrar el elemento emergente. El tercer argumento es el id del elemento al que queremos que vaya el foco al abrir el elemento emergente, que suele ser el título de una notificación. Debido al uso de este argumento tras abrir este alert movemos el foco al título de la notificación, en este caso no es necesario usar los atributos 'role': 'alert' y 'aria-live': 'assertive'.

Mostrar códigodel ejemplo: Alert mostrando una notificación de alerta

Contenido

Nunjucks macro

{% from "components/alert/_macro.alert.njk" import componentAlert %}
{% call componentAlert({
  "button": {
    "text": "Abrir alerta",
    "attributes": {
      "onclick": "openAlert('alert-id', this, 'secondary-id-title');"
    }
  },
  "id": "alert-id",
  "attributes": {
    "role": "alert",
    "aria-live": "assertive"
  }
}) %}
<!-- notification -->
<div id="secondary-id" data-module="c-notification" class="c-notification c-notification--alert">
  <div class="h-full mr-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-alert-base" aria-label="Error" focusable="false" role="img"><path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p id="secondary-id-title"  class="font-bold pr-base focus:outline-hidden focus:underline mr-lg" tabindex="-1">
        Problemas encontrados
      </p>
      <ul class="mt-base">
        <li>
          <a href="#empresa" class="inline-block pb-sm c-link  c-link--alert">Campo Nombre de la empresa está vacío</a>
        </li>
        <li>
          <a href="#actividad" class="inline-block pb-sm c-link  c-link--alert">Campo Fecha de inicio de la actividad está vacío</a>
        </li>
        <li>
          <a href="#email" class="inline-block pb-sm c-link  c-link--alert">El formato de correo electrónico es incorrecto</a>
        </li>
      </ul>
    </div>
    <div class="absolute top-0 right-0 p-sm">
      <button type="button" class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-hidden" aria-label="X: Cerrar notificación">
        <svg class="w-4 h-4 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
      </button>
    </div>
  </div>
</div>
<!-- /notification -->
{% endcall  %}