use JS for all flash notifications

this way the user experience is identical (sighted
or screenreader), whether the notification
originated from the server or the client

test plan:

1. do something that causes a flash notification
   from the server (like un/publishing a course)
   - observe the visual design animates in
   - observe that the screen reader announces
     the notification

2. do something that causes a flash notification
   from the client (like sending a message)
   - observe the visual design animates in
   - observe that the screen reader announces
     the notification

closes CNVS-12222, CNVS-12221, CNVS-12224, CNVS-14881

Change-Id: I0a61b8a12292211726bc99d23d056c92918c5f76
Reviewed-on: https://gerrit.instructure.com/39486
Reviewed-by: Jason Madsen <jmadsen@instructure.com>
Tested-by: Jenkins <jenkins@instructure.com>
QA-Review: Amber Taniuchi <amber@instructure.com>
Product-Review: Ryan Florence <ryanf@instructure.com>

app/coffeescripts/jquery.rails_flash_notifications.coffee

@@ -8,7 +8,6 @@ define [
   'vendor/jquery.cookie'
 ], (I18n, $, _, preventDefault) ->
 
-  $buffer = $("#flash_message_buffer")
   $holder = $("#flash_message_holder")
   $screenreader_holder = $("#flash_screenreader_holder")
   $holder.on 'click', '.close_link', preventDefault(->)
@@ -17,12 +16,10 @@ define [
     return if $this.hasClass('no_close')
     $.cookie('unsupported_browser_dismissed', '1') if $this.hasClass('unsupported_browser')
     $this.stop(true, true).remove()
-    if (bufferIndex = $this.data('buffer-index'))?
-      $buffer.find("[data-buffer-index=#{bufferIndex}]").remove()
 
   screenReaderFlashBox = (type, content) ->
     $screenreader_node = $("""
-      <span role="alert">#{content}</span>
+      <span>#{content}</span>
     """)
 
     $screenreader_node.appendTo($screenreader_holder)
@@ -64,3 +61,12 @@ define [
 
   $.screenReaderFlashError = (content) ->
     screenReaderFlashBox('error', content)
+
+  renderServerNotifications = ->
+    if ENV.notices?
+      for notice in ENV.notices
+        flashBox(notice.type, notice.content)
+
+  $ ->
+    setTimeout(renderServerNotifications, 500)
+

app/views/shared/_flash_notice.html.erb

@@ -1,5 +0,0 @@
-<li role="alert" class="ic-flash-static ic-flash-<%= flash_notice[:type] || 'warning' %> <%= flash_notice[:size] %> <%= flash_notice[:classes] %>" data-buffer-index="<%= flash_notice_counter %>">
-  <% if flash_notice[:icon] %><i class="icon-<%= flash_notice[:icon] %>"></i><% end %>
-  <%= flash_notice[:content] %>
-  <a href='#' class='icon-end close_link'><%= t "close", "Close" %></a>
-</li>

app/views/shared/_flash_notices.html.erb

@@ -1,15 +1,8 @@
-<% notices = flash_notices()
-# static messages (i.e. ones that are present on page load) need to push
-# the content down, since they don't auto-dismiss themselves. but they
-# also need to be fixed so they remain visible when you scroll down so we
-# put a copy of them in this hidden (but layout-ed) buffer
+<%
+notices = flash_notices()
+js_env(:notices => notices)
 %>
-<ul id="flash_message_buffer" aria-hidden="true">
-  <%= render :partial => "shared/flash_notice", :collection => notices %>
-</ul>
-<ul id="flash_message_holder">
-  <%= render :partial => "shared/flash_notice", :collection => notices %>
-</ul>
-<div id="flash_screenreader_holder" class="screenreader-only" role="alert">
-	<%= render :partial => "shared/flash_notice", :collection => notices %>
-</div>
+
+<ul role="alert" aria-live="assertive" id="flash_message_holder"></ul>
+<div role="alert" aria-live="assertive" id="flash_screenreader_holder" class="screenreader-only"></div>
+