UX: alert screen readers when there is an issue saving a post (discou…

…rse#13182)

* UX: alert screen readers when there is an issue saving a post

Adds a "alert" role to various popup-input-tips.

This means screen reader users can now tell why a post refuses to save.

Also ensures like icon in the "try the like button" has screen reader support

app/assets/javascripts/discourse/app/components/composer-editor.js

@@ -269,7 +269,11 @@ export default Component.extend({
       if (tl === 0 || tl === 1) {
         reason +=
           "<br/>" +
-          I18n.t("composer.error.try_like", { heart: iconHTML("heart") });
+          I18n.t("composer.error.try_like", {
+            heart: iconHTML("heart", {
+              label: I18n.t("likes_lowercase", { count: 1 }),
+            }),
+          });
       }
     }
 

app/assets/javascripts/discourse/app/components/popup-input-tip.js

@@ -5,13 +5,21 @@ import { iconHTML } from "discourse-common/lib/icon-library";
 
 export default Component.extend({
   classNameBindings: [":popup-tip", "good", "bad", "lastShownAt::hide"],
+  attributeBindings: ["role"],
   animateAttribute: null,
   bouncePixels: 6,
   bounceDelay: 100,
   rerenderTriggers: ["validation.reason"],
   closeIcon: `${iconHTML("times-circle")}`.htmlSafe(),
   tipReason: null,
 
+  @discourseComputed("bad")
+  role(bad) {
+    if (bad) {
+      return "alert";
+    }
+  },
+
   click() {
     this.set("shownAt", null);
     this.set("validation.lastShownAt", null);