General function for displaying messages

bookwyrm/static/css/bookwyrm.css

@@ -328,7 +328,16 @@ body {
     }
 }
 
-/* States
+/** Transient notification
+ ******************************************************************************/
+
+#live-messages {
+    position: fixed;
+    bottom: 1em;
+    right: 1em;
+}
+
+/** States
  ******************************************************************************/
 
 /* "disabled" for non-buttons */

bookwyrm/static/js/status_cache.js

@@ -81,14 +81,35 @@ let StatusCache = new class {
             this.submitStatusSuccess(form);
         })
         .catch(error => {
-            // @todo Display a notification in the UI instead.
-            //       For now, the absence of change will be enough.
-            console.log('Request failed:', error);
-
-            BookWyrm.addRemoveClass(form, 'has-error', form.className.indexOf('is-hidden') == -1);
+            this.announceMessage('status-error-message');
         });
     }
 
+    /**
+     * Show a message in the live region
+     *
+     * @param  {String} the id of the message dom element
+     * @return {undefined}
+     */
+    announceMessage(message_id) {
+        const element = document.getElementById(message_id);
+        let copy = element.cloneNode(true)
+
+        copy.id = null;
+        element.insertAdjacentElement('beforebegin', copy);
+
+        BookWyrm.addRemoveClass(copy, 'is-hidden', false);
+        setTimeout(function() {
+            copy.remove()
+        }, 10000, copy);
+    }
+
+    /**
+     * Success state for a posted status
+     *
+     * @param  {Object} the html form that was submitted
+     * @return {undefined}
+     */
     submitStatusSuccess(form) {
         // Clear form data
         form.reset();
@@ -116,6 +137,8 @@ let StatusCache = new class {
         if (reply) {
             document.querySelector("[data-controls=" + reply.id + "]").click();
         }
+
+        this.announceMessage('status-success-message');
     }
 
     /**

bookwyrm/templates/layout.html

@@ -210,6 +210,11 @@
     </div>
 </div>
 
+<div role="region" aria-live="polite" id="live-messages">
+    <p id="status-success-message" class="live-message is-sr-only is-hidden">{% trans "Successfully posted status" %}</p>
+    <p id="status-error-message" class="live-message notification is-danger p-3 pr-5 pl-5 is-hidden">{% trans "Error posting status" %}</p>
+</div>
+
 <footer class="footer">
     <div class="container">
         <div class="columns">