From 250c0bccbd5ca3fe34f5e0e0b94113dbb87c3cd3 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Tue, 27 Sep 2022 08:52:09 -0400
Subject: [PATCH] A11Y: Add aria label to composer messages `Esc` button
 (#18372)

---
 .../app/components/composer-messages.js          |  2 +-
 .../app/templates/composer/custom-body.hbs       |  3 ---
 .../app/templates/composer/dominating-topic.hbs  |  4 +++-
 .../app/templates/composer/education.hbs         |  9 ++++++++-
 .../app/templates/composer/get-a-room.hbs        |  4 +++-
 .../app/templates/composer/group-mentioned.hbs   |  5 ++++-
 .../app/templates/composer/similar-topics.hbs    |  5 ++++-
 app/assets/stylesheets/desktop/compose.scss      | 16 +++++++---------
 config/locales/client.en.yml                     |  2 ++
 9 files changed, 32 insertions(+), 18 deletions(-)
 delete mode 100644 app/assets/javascripts/discourse/app/templates/composer/custom-body.hbs

diff --git a/app/assets/javascripts/discourse/app/components/composer-messages.js b/app/assets/javascripts/discourse/app/components/composer-messages.js
index 2f00c76a49d..45aa08ed95f 100644
--- a/app/assets/javascripts/discourse/app/components/composer-messages.js
+++ b/app/assets/javascripts/discourse/app/components/composer-messages.js
@@ -128,7 +128,7 @@ export default Component.extend({
           this._yourselfConfirm ||
           composer.store.createRecord("composer-message", {
             id: "yourself_confirm",
-            templateName: "custom-body",
+            templateName: "education",
             title: I18n.t("composer.yourself_confirm.title"),
             body: I18n.t("composer.yourself_confirm.body"),
           });
diff --git a/app/assets/javascripts/discourse/app/templates/composer/custom-body.hbs b/app/assets/javascripts/discourse/app/templates/composer/custom-body.hbs
deleted file mode 100644
index 1a7d7647a0a..00000000000
--- a/app/assets/javascripts/discourse/app/templates/composer/custom-body.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<a href {{action this.closeMessage this.message}} class="close">{{d-icon "times"}}</a>
-{{#if this.message.title}}<h3>{{this.message.title}}</h3>{{/if}}
-<p>{{html-safe this.message.body}}</p>
diff --git a/app/assets/javascripts/discourse/app/templates/composer/dominating-topic.hbs b/app/assets/javascripts/discourse/app/templates/composer/dominating-topic.hbs
index c76aba17c8d..248e6c05a49 100644
--- a/app/assets/javascripts/discourse/app/templates/composer/dominating-topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/composer/dominating-topic.hbs
@@ -1,4 +1,6 @@
-<a href {{action this.closeMessage this.message}} class="close">{{d-icon "times"}}</a>
+<a href {{action this.closeMessage this.message}} class="close" aria-label={{i18n "composer.esc_label"}}>
+  {{i18n "composer.esc"}} {{d-icon "times"}}
+</a>
 
 {{html-safe this.message.body}}
 
diff --git a/app/assets/javascripts/discourse/app/templates/composer/education.hbs b/app/assets/javascripts/discourse/app/templates/composer/education.hbs
index b717e32d922..1c83813b006 100644
--- a/app/assets/javascripts/discourse/app/templates/composer/education.hbs
+++ b/app/assets/javascripts/discourse/app/templates/composer/education.hbs
@@ -1,2 +1,9 @@
-<a href {{action this.closeMessage this.message}} class="close">{{d-icon "times"}}</a>
+<a href {{action this.closeMessage this.message}} class="close" aria-label={{i18n "composer.esc_label"}}>
+  {{i18n "composer.esc"}} {{d-icon "times"}}
+</a>
+
+{{#if this.message.title}}
+  <h3>{{this.message.title}}</h3>
+{{/if}}
+
 {{html-safe this.message.body}}
diff --git a/app/assets/javascripts/discourse/app/templates/composer/get-a-room.hbs b/app/assets/javascripts/discourse/app/templates/composer/get-a-room.hbs
index f3e0a5a4a3b..308dbeefc96 100644
--- a/app/assets/javascripts/discourse/app/templates/composer/get-a-room.hbs
+++ b/app/assets/javascripts/discourse/app/templates/composer/get-a-room.hbs
@@ -1,4 +1,6 @@
-<a href {{action this.closeMessage this.message}} class="close">{{d-icon "times"}}</a>
+<a href {{action this.closeMessage this.message}} class="close" aria-label={{i18n "composer.esc_label"}}>
+  {{i18n "composer.esc"}} {{d-icon "times"}}
+</a>
 
 {{html-safe this.message.body}}
 
diff --git a/app/assets/javascripts/discourse/app/templates/composer/group-mentioned.hbs b/app/assets/javascripts/discourse/app/templates/composer/group-mentioned.hbs
index b717e32d922..49a28605b6a 100644
--- a/app/assets/javascripts/discourse/app/templates/composer/group-mentioned.hbs
+++ b/app/assets/javascripts/discourse/app/templates/composer/group-mentioned.hbs
@@ -1,2 +1,5 @@
-<a href {{action this.closeMessage this.message}} class="close">{{d-icon "times"}}</a>
+<a href {{action this.closeMessage this.message}} class="close" aria-label={{i18n "composer.esc_label"}}>
+  {{i18n "composer.esc"}} {{d-icon "times"}}
+</a>
+
 {{html-safe this.message.body}}
diff --git a/app/assets/javascripts/discourse/app/templates/composer/similar-topics.hbs b/app/assets/javascripts/discourse/app/templates/composer/similar-topics.hbs
index 775b160e6bc..510da64e49f 100644
--- a/app/assets/javascripts/discourse/app/templates/composer/similar-topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/composer/similar-topics.hbs
@@ -1,4 +1,7 @@
-<a href {{action this.closeMessage this.message}} class="close">{{d-icon "times"}}</a>
+<a href {{action this.closeMessage this.message}} class="close" aria-label={{i18n "composer.esc_label"}}>
+  {{i18n "composer.esc"}} {{d-icon "times"}}
+</a>
+
 <h3>{{i18n "composer.similar_topics"}}</h3>
 
 <ul class="topics">
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index 8b45b63e566..27a989a0704 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -126,16 +126,14 @@
     top: 10px;
     color: var(--primary);
     opacity: 0.5;
-    font-size: $font-up-1;
-    &:before {
-      content: "esc";
-      font-size: $font-down-1;
-      margin-right: 0.5em;
+    font-size: var(--font-0);
+    .d-icon {
+      font-size: var(--font-up-1);
+      margin-left: 0.25em;
+    }
+    &:hover {
+      opacity: 1;
     }
-  }
-
-  a.close:hover {
-    opacity: 1;
   }
 
   ul {
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 12cc1ac97c8..5789279a7d2 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -2166,6 +2166,8 @@ en:
       similar_topics: "Your topic is similar to..."
       drafts_offline: "drafts offline"
       edit_conflict: "edit conflict"
+      esc: "esc"
+      esc_label: "Click or press Esc to dismiss"
 
       group_mentioned_limit:
         one: "<b>Warning!</b> You mentioned <a href='%{group_link}'>%{group}</a>, however this group has more members than the administrator configured mention limit of %{count} user. Nobody will be notified."