A11Y: composer tip close link should be a button (#23731)

app/assets/javascripts/discourse/app/components/composer-tip-close-button.hbs

@@ -0,0 +1,7 @@
+<DButton
+  @action={{@action}}
+  @icon="times"
+  @label="composer.esc"
+  @ariaLabel="composer.esc_label"
+  class="btn-flat close"
+/>

app/assets/javascripts/discourse/app/templates/composer/dominating-topic.hbs

@@ -1,12 +1,4 @@
-<a
+<ComposerTipCloseButton @action={{fn this.closeMessage this.message}} />
-  href
-  {{on "click" (fn this.closeMessage this.message)}}
-  class="close"
-  aria-label={{i18n "composer.esc_label"}}
->
-  {{i18n "composer.esc"}}
-  {{d-icon "times"}}
-</a>
 
 {{html-safe this.message.body}}
 

app/assets/javascripts/discourse/app/templates/composer/education.hbs

@@ -1,12 +1,4 @@
-<a
+<ComposerTipCloseButton @action={{fn this.closeMessage this.message}} />
-  href
-  {{on "click" (fn 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>

app/assets/javascripts/discourse/app/templates/composer/get-a-room.hbs

@@ -1,12 +1,4 @@
-<a
+<ComposerTipCloseButton @action={{fn this.closeMessage this.message}} />
-  href
-  {{on "click" (fn this.closeMessage this.message)}}
-  class="close"
-  aria-label={{i18n "composer.esc_label"}}
->
-  {{i18n "composer.esc"}}
-  {{d-icon "times"}}
-</a>
 
 {{html-safe this.message.body}}
 

app/assets/javascripts/discourse/app/templates/composer/group-mentioned.hbs

@@ -1,11 +1,5 @@
-<a
+<ComposerTipCloseButton @action={{fn this.closeMessage this.message}} />
-  href
-  {{on "click" (fn this.closeMessage this.message)}}
-  class="close"
-  aria-label={{i18n "composer.esc_label"}}
->
-  {{i18n "composer.esc"}}
-  {{d-icon "times"}}
-</a>
 
-{{html-safe this.message.body}}
+<p>
+  {{html-safe this.message.body}}
+</p>

app/assets/javascripts/discourse/app/templates/composer/similar-topics.hbs

@@ -1,12 +1,4 @@
-<a
+<ComposerTipCloseButton @action={{fn this.closeMessage this.message}} />
-  href
-  {{on "click" (fn 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>
 

app/assets/stylesheets/desktop/compose.scss

@@ -92,6 +92,14 @@
   box-shadow: var(--shadow-dropdown);
   background: var(--highlight-bg);
 
+  > p,
+  h3 {
+    &:first-of-type {
+      margin-top: 0;
+      margin-right: 3em;
+    }
+  }
+
   &.urgent {
     background: var(--danger-low);
   }
@@ -105,10 +113,9 @@
     bottom: unset;
     padding: 2.25em 6em 2.5em 2.25em;
     p {
-      margin-top: 0;
       font-size: var(--font-up-1);
     }
-    button {
+    button:not(.close) {
       margin-top: 0.5em;
     }
   }
@@ -117,21 +124,27 @@
     margin-bottom: 10px;
   }
 
-  a.close {
+  .btn.close {
-    display: flex;
+    flex-direction: row-reverse;
     align-items: center;
     position: absolute;
-    right: 10px;
+    right: 0.67em;
-    top: 10px;
+    top: 0.67em;
-    color: var(--primary);
+    color: var(--primary-medium);
-    opacity: 0.5;
     font-size: var(--font-0);
     .d-icon {
+      color: currentColor;
       font-size: var(--font-up-1);
-      margin-left: 0.25em;
+      margin: 0 0 0 0.25em;
     }
-    &:hover {
+    .discourse-no-touch & {
-      opacity: 1;
+      &:active,
+      &:focus {
+        background: transparent;
+        .d-icon {
+          color: var(--primary);
+        }
+      }
     }
   }
 

config/locales/client.en.yml

@@ -2353,7 +2353,7 @@ en:
       drafts_offline: "drafts offline"
       edit_conflict: "edit conflict"
       esc: "esc"
-      esc_label: "Click or press Esc to dismiss"
+      esc_label: "dismiss message"
       ok_proceed: "Ok, proceed"
 
       group_mentioned_limit: