Merge pull request #6973 from svbergerem/alert-accessibility

Add role='alert' to alerts

Changelog.md

@@ -189,6 +189,7 @@ The command will report queues that still have jobs and launch sidekiq process f
 * Expose Sidekiq dead queue configuration options
 * Properly support pluralization in timeago strings [#6926](https://github.com/diaspora/diaspora/pull/6926)
 * Return all contacts in people search [#6951](https://github.com/diaspora/diaspora/pull/6951)
+* Make screenreaders read alerts [#6973](https://github.com/diaspora/diaspora/pull/6973)
 
 # 0.5.10.2
 

app/assets/javascripts/app/pages/admin_pods.js

@@ -30,17 +30,17 @@ app.pages.AdminPods = app.views.Base.extend({
   _showMessages: function() {
     var msgs = document.createDocumentFragment();
     if( gon.uncheckedCount && gon.uncheckedCount > 0 ) {
-      var unchecked = $("<div class='alert alert-info' />")
+      var unchecked = $("<div class='alert alert-info' role='alert' />")
         .append(Diaspora.I18n.t("admin.pods.unchecked", {count: gon.uncheckedCount}));
       msgs.appendChild(unchecked[0]);
     }
     if( gon.versionFailedCount && gon.versionFailedCount > 0 ) {
-      var versionFailed = $("<div class='alert alert-warning' />")
+      var versionFailed = $("<div class='alert alert-warning' role='alert' />")
           .append(Diaspora.I18n.t("admin.pods.version_failed", {count: gon.versionFailedCount}));
       msgs.appendChild(versionFailed[0]);
     }
     if( gon.errorCount && gon.errorCount > 0 ) {
-      var errors = $("<div class='alert alert-danger' />")
+      var errors = $("<div class='alert alert-danger' role='alert' />")
         .append(Diaspora.I18n.t("admin.pods.errors", {count: gon.errorCount}));
         msgs.appendChild(errors[0]);
     }

app/assets/templates/flash_messages_tpl.jst.hbs

 <div class="flash-body expose">
-  <div class="flash-message alert {{ alertLevel }}">
+  <div class="flash-message alert {{ alertLevel }}" role="alert">
     {{ message }}
   </div>
 </div>

app/helpers/layout_helper.rb

@@ -69,7 +69,7 @@ module LayoutHelper
     flash.map do |name, msg|
       klass = flash_class name
       content_tag(:div, msg, class: "flash-body expose") do
-        content_tag(:div, msg, class: "flash-message message alert alert-#{klass}")
+        content_tag(:div, msg, class: "flash-message message alert alert-#{klass}", role: "alert")
       end
     end.join(' ').html_safe
   end

app/views/admins/stats.html.haml

@@ -44,7 +44,7 @@
 
       .row
         .col-md-12
-          %p.alert.alert-info.text-center
+          %p.alert.alert-info.text-center{role: "alert"}
             != t('.current_segment', :post_yest => @posts[:yesterday]/@user_count.to_f, :post_day => @posts[:day_before]/@user_count.to_f)
 
       .row

app/views/admins/user_search.html.haml

@@ -50,7 +50,8 @@
 
       .row
         .col-md-12
-          .alert.alert-info.text-center= t('.users', :count => @users.count)
+          .alert.alert-info.text-center{role: "alert"}
+            = t(".users", count: @users.count)
 
       .row
         .users.col-md-12

app/views/registrations/new.mobile.haml

@@ -5,7 +5,7 @@
 .stream#main_stream
   - flash.each do |name, msg|
     .expose#flash-container
-      .flash-message{class: "message alert alert-#{flash_class name}"}
+      .flash-message{class: "message alert alert-#{flash_class name}", role: "alert"}
         = msg
 
   #login_form

app/views/sessions/new.mobile.haml

@@ -5,7 +5,7 @@
 .stream#main_stream
   - flash.each do |name, msg|
     .expose#flash-container
-      .flash-message{class: "message alert alert-#{flash_class name}"}
+      .flash-message{class: "message alert alert-#{flash_class name}", role: "alert"}
         = msg
 
   #login_form