From c790b0305cf39cb5fe5957c5087c3ac05eb5339d Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Tue, 16 Aug 2022 21:39:28 -0400
Subject: [PATCH] A11Y: Use button in `d-modal-cancel` component (#17938)

Fixes issue under User profile > Preferences > Security > Recently Used
devices > Cog icon. And cleans up the "reply where" modal as well.
---
 .../discourse/app/controllers/composer.js     |  5 ++---
 .../templates/components/d-modal-cancel.hbs   |  2 +-
 app/assets/stylesheets/common/base/modal.scss | 22 +++++--------------
 .../common/base/topic-admin-menu.scss         |  6 -----
 4 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/controllers/composer.js b/app/assets/javascripts/discourse/app/controllers/composer.js
index a3af7e6307b..75a1c5b6145 100644
--- a/app/assets/javascripts/discourse/app/controllers/composer.js
+++ b/app/assets/javascripts/discourse/app/controllers/composer.js
@@ -912,8 +912,7 @@ export default Controller.extend({
         let buttons = [
           {
             label: I18n.t("composer.cancel"),
-            class: "d-modal-cancel",
-            link: true,
+            class: "btn-flat btn-text btn-reply-where-cancel",
           },
         ];
 
@@ -923,7 +922,7 @@ export default Controller.extend({
             "<br/><div class='topic-title overflow-ellipsis'>" +
             currentTopic.get("fancyTitle") +
             "</div>",
-          class: "btn btn-reply-here",
+          class: "btn-reply-here",
           callback: () => {
             composer.setProperties({ topic: currentTopic, post: null });
             this.save(true);
diff --git a/app/assets/javascripts/discourse/app/templates/components/d-modal-cancel.hbs b/app/assets/javascripts/discourse/app/templates/components/d-modal-cancel.hbs
index 40585044a39..ca5b6c98243 100644
--- a/app/assets/javascripts/discourse/app/templates/components/d-modal-cancel.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/d-modal-cancel.hbs
@@ -1 +1 @@
-<a href {{action this.close}} class="d-modal-cancel">{{i18n "cancel"}}</a>
+<DButton @class="btn-flat d-modal-cancel" @action={{action this.close}} @translatedLabel={{i18n "cancel"}} />
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 4beb8b6230f..97dbb8f20dd 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -286,37 +286,27 @@
     font-size: $font-up-2;
   }
 
-  .d-modal-cancel {
-    width: 100%;
-    margin: 0.5em 0;
-  }
-
   .btn {
     display: block;
     text-align: left;
-    font-size: $font-up-1;
-    line-height: $line-height-medium;
     margin-bottom: 0.75em;
-    font-weight: bold;
     overflow: hidden;
     width: 100%;
     &:first-of-type {
       margin-top: 0.25em;
     }
+    &.btn-reply-on-original,
+    &.btn-reply-here {
+      font-size: $font-up-1;
+      line-height: $line-height-medium;
+      font-weight: bold;
+    }
     .topic-title {
       font-weight: normal;
     }
   }
 }
 
-.d-modal-cancel {
-  margin-left: 1em;
-  color: var(--primary-medium);
-  &:hover {
-    color: var(--danger);
-  }
-}
-
 .delete-user-modal {
   .modal-footer {
     .btn {
diff --git a/app/assets/stylesheets/common/base/topic-admin-menu.scss b/app/assets/stylesheets/common/base/topic-admin-menu.scss
index 281fd05919b..251747a038a 100644
--- a/app/assets/stylesheets/common/base/topic-admin-menu.scss
+++ b/app/assets/stylesheets/common/base/topic-admin-menu.scss
@@ -91,12 +91,6 @@
   }
 }
 
-.feature-topic-modal {
-  .d-modal-cancel {
-    margin-left: 0;
-  }
-}
-
 .desktop-view .feature-topic-modal {
   .pin-until {
     position: relative;