Use correct semantic html element (figures) for notifications and alerts

aleksis/core/static/style.scss

@@ -517,39 +517,58 @@ th.orderable.desc > a {
   font-weight: 700;
 }
 
-.alert h1 {
+figure.alert > :not(.material-icons.left){
+  margin-left: 39px;
+}
+
+.alert figcaption  {
   font-weight: 700;
   font-size: 17px;
   margin: auto;
 }
 
-.alert > p, .alert > div {
+div.alert > p,
+div.alert > div,
+figure.alert{
   margin: 10px;
   padding: 10px;
   border-left: 5px solid;
 }
 
-.alert.success > p, .alert.success > div {
+div.alert.success > p,
+div.alert.success > div,
+figure.alert.success{
   @extend .success;
   border-color: color("green", "base");
 }
 
-.alert.error > p, .alert.error > div {
+div.alert.error > p,
+div.alert.error > div,
+figure.alert.error {
   @extend .error;
   border-color: color("red", "darken-4");
 }
 
-.alert.primary > p, .alert.primary > div, .alert.info > p, .alert.info > div {
+div.alert.primary > p,
+div.alert.primary > div,
+figure.alert.primary,
+div.alert.info > p,
+div.alert.info > div,
+figure.alert.info {
   background-color: #ececec;
   border-color: $primary-color;
 }
 
-.alert.warning p, .alert.warning div {
+div.alert.warning p,
+div.alert.warning div,
+figure.alert.warning {
   @extend .warning;
   border-color: color("orange", "darken-4");
 }
 
-main .alert p:first-child, main .alert div:first-child {
+main div.alert p:first-child,
+main div.alert div:first-child,
+main figure.alert {
   margin-left: -10px;
   margin-right: -10px;
 }

aleksis/core/templates/core/base.html

@@ -93,8 +93,7 @@
 
   {% if messages %}
     {% for message in messages %}
-      <div class="alert {% if message.tags %}{{ message.tags }}{% else %}info{% endif %}">
-        <p>
+      <figure class="alert {% if message.tags %}{{ message.tags }}{% else %}info{% endif %}">
           {% if message.tags == "success" %}
             <i class="material-icons left">check_circle</i>
           {% elif  message.tags == "info" %}
@@ -105,8 +104,7 @@
             <i class="material-icons left">error</i>
           {% endif %}
           {{ message }}
-        </p>
-      </div>
+      </figure>
     {% endfor %}
   {% endif %}
 

aleksis/core/templates/core/index.html

@@ -20,8 +20,7 @@
   {% endif %}
 
   {% for notification in unread_notifications %}
-    <div class="alert primary scale-transition">
-      <div>
+    <figure class="alert primary scale-transition">
         <i class="material-icons left">info</i>
 
         <div class="right">
@@ -30,10 +29,9 @@
           </a>
         </div>
 
-        <h1>{{ notification.title }}</h1>
+        <figcaption>{{ notification.title }}</figcaption>
         <p>{{ notification.description|linebreaks }}</p>
-      </div>
-    </div>
+    </figure>
   {% endfor %}
 
   {% include "core/partials/announcements.html" with announcements=announcements %}

aleksis/core/templates/core/partials/announcements.html

 {% load i18n humanize %}
 
 {% for announcement in announcements %}
-  <div class="alert primary">
-    <div>
+  <figure class="alert primary">
       {% if show_interval %}
         <em class="right hide-on-small-and-down">
           {% if announcement.valid_from.date == announcement.valid_until.date %}
@@ -25,8 +24,8 @@
         </p>
       {% endif %}
 
+      <figcaption>{{ announcement.title }}</figcaption>
       <p>
-        <h1>{{ announcement.title }}</h1>
         {{ announcement.description }}
       </p>
 
@@ -43,6 +42,5 @@
           {% endif %}
         </em>
       {% endif %}
-    </div>
-  </div>
+  </figure>
 {% endfor %}