From 5efa95b5f851633fb7518e40d7fbb79d09f73592 Mon Sep 17 00:00:00 2001
From: Leo McArdle <lmcardle@mozilla.com>
Date: Thu, 31 Oct 2019 19:36:24 +0000
Subject: [PATCH] FIX: make notification consent banner usable via keyboard and
 screenreader (#8255)

* update d-button to support btn-link class

* add display attribute to d-button rather than computing on class
---
 .../javascripts/discourse/components/d-button.js.es6  |  4 +++-
 .../components/notification-consent-banner.hbs        |  2 +-
 app/assets/stylesheets/common/components/buttons.scss | 11 +++++++++++
 test/javascripts/components/d-button-test.js.es6      | 11 +++++++++++
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/d-button.js.es6 b/app/assets/javascripts/discourse/components/d-button.js.es6
index f82df037b7..359d058d24 100644
--- a/app/assets/javascripts/discourse/components/d-button.js.es6
+++ b/app/assets/javascripts/discourse/components/d-button.js.es6
@@ -12,7 +12,7 @@ export default Component.extend({
   type: "button",
 
   tagName: "button",
-  classNameBindings: [":btn", "noText", "btnType"],
+  classNameBindings: ["btnLink::btn", "btnLink", "noText", "btnType"],
   attributeBindings: [
     "form",
     "disabled",
@@ -24,6 +24,8 @@ export default Component.extend({
 
   btnIcon: notEmpty("icon"),
 
+  btnLink: Ember.computed.equal("display", "link"),
+
   @computed("icon", "translatedLabel")
   btnType(icon, translatedLabel) {
     if (icon) {
diff --git a/app/assets/javascripts/discourse/templates/components/notification-consent-banner.hbs b/app/assets/javascripts/discourse/templates/components/notification-consent-banner.hbs
index e249c7f98f..639456d461 100644
--- a/app/assets/javascripts/discourse/templates/components/notification-consent-banner.hbs
+++ b/app/assets/javascripts/discourse/templates/components/notification-consent-banner.hbs
@@ -2,7 +2,7 @@
   <div class="row">
     <div class="consent_banner alert alert-info">
       {{d-button icon="times" action="dismiss" class="btn btn-flat close" title="banner.close"}}
-      {{i18n 'user.desktop_notifications.consent_prompt'}} <a {{action "turnon"}}>{{i18n 'user.desktop_notifications.enable'}}</a>.
+      {{i18n "user.desktop_notifications.consent_prompt"}} {{d-button display="link" action=(action "turnon") label="user.desktop_notifications.enable"}}.
     </div>
   </div>
 {{/if}}
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 018fc94bdd..0458330e00 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -275,3 +275,14 @@
     }
   }
 }
+
+.btn-link {
+  background: transparent;
+  border: 0;
+  outline: 0;
+  padding: 0;
+  color: $tertiary;
+  &:focus {
+    outline: 1px currentColor dotted;
+  }
+}
diff --git a/test/javascripts/components/d-button-test.js.es6 b/test/javascripts/components/d-button-test.js.es6
index 46038cd5b5..cf86842b98 100644
--- a/test/javascripts/components/d-button-test.js.es6
+++ b/test/javascripts/components/d-button-test.js.es6
@@ -43,3 +43,14 @@ componentTest("form attribute", {
     assert.ok(exists("button[form=login-form]"), "it has the form attribute");
   }
 });
+
+componentTest("link-styled button", {
+  template: '{{d-button display="link"}}',
+
+  test(assert) {
+    assert.ok(
+      find("button.btn-link:not(.btn)").length,
+      "it has the right classes"
+    );
+  }
+});