From 2f12c0f5bd3e5ab64dbfabc354ad7c798ea991e7 Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Thu, 27 May 2021 18:19:05 +1000
Subject: [PATCH] UX: alert screen readers when there is an issue saving a post
 (#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
---
 .../discourse/app/components/composer-editor.js           | 6 +++++-
 .../discourse/app/components/popup-input-tip.js           | 8 ++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/app/components/composer-editor.js b/app/assets/javascripts/discourse/app/components/composer-editor.js
index 124cf210f97..d4bf5097e58 100644
--- a/app/assets/javascripts/discourse/app/components/composer-editor.js
+++ b/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 }),
+            }),
+          });
       }
     }
 
diff --git a/app/assets/javascripts/discourse/app/components/popup-input-tip.js b/app/assets/javascripts/discourse/app/components/popup-input-tip.js
index 9d02aeff014..e94a2a87868 100644
--- a/app/assets/javascripts/discourse/app/components/popup-input-tip.js
+++ b/app/assets/javascripts/discourse/app/components/popup-input-tip.js
@@ -5,6 +5,7 @@ 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,
@@ -12,6 +13,13 @@ export default Component.extend({
   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);