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

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) {

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}}

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;
+  }
+}

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"
+    );
+  }
+});