Revert "DEV: allows to define an ariaLabel on d-button (#9716)"

This reverts commit 7a95dd4841.

app/assets/javascripts/discourse/app/components/d-button.js

@@ -5,17 +5,12 @@ import discourseComputed from "discourse-common/utils/decorators";
 import DiscourseURL from "discourse/lib/url";
 
 export default Component.extend({
-  tagName: "button",
   // subclasses need this
   layoutName: "components/d-button",
+
   form: null,
+
   type: "button",
-  title: null,
-  translatedTitle: null,
-  label: null,
-  translatedLabel: null,
-  ariaLabel: null,
-  translatedAriaLabel: null,
 
   isLoading: computed({
     set(key, value) {
@@ -24,6 +19,7 @@ export default Component.extend({
     }
   }),
 
+  tagName: "button",
   classNameBindings: [
     "isLoading:is-loading",
     "btnLink::btn",
@@ -34,8 +30,8 @@ export default Component.extend({
   attributeBindings: [
     "form",
     "isDisabled:disabled",
-    "computedTitle:title",
+    "translatedTitle:title",
-    "computedAriaLabel:aria-label",
+    "translatedLabel:aria-label",
     "tabindex",
     "type"
   ],
@@ -50,7 +46,7 @@ export default Component.extend({
 
   btnLink: equal("display", "link"),
 
-  @discourseComputed("icon", "computedLabel")
+  @discourseComputed("icon", "translatedLabel")
   btnType(icon, translatedLabel) {
     if (icon) {
       return translatedLabel ? "btn-icon-text" : "btn-icon";
@@ -59,25 +55,28 @@ export default Component.extend({
     }
   },
 
-  noText: empty("computedLabel"),
+  noText: empty("translatedLabel"),
 
-  @discourseComputed("title", "translatedTitle")
+  @discourseComputed("title")
-  computedTitle(title, translatedTitle) {
+  translatedTitle: {
-    if (this.title) return I18n.t(title);
+    get() {
-    return translatedTitle;
+      if (this._translatedTitle) return this._translatedTitle;
+      if (this.title) return I18n.t(this.title);
+    },
+    set(value) {
+      return (this._translatedTitle = value);
+    }
   },
 
-  @discourseComputed("label", "translatedLabel")
+  @discourseComputed("label")
-  computedLabel(label, translatedLabel) {
+  translatedLabel: {
-    if (this.label) return I18n.t(label);
+    get() {
-    return translatedLabel;
+      if (this._translatedLabel) return this._translatedLabel;
-  },
+      if (this.label) return I18n.t(this.label);
-
+    },
-  @discourseComputed("ariaLabel", "translatedAriaLabel", "computedLabel")
+    set(value) {
-  computedAriaLabel(ariaLabel, translatedAriaLabel, computedLabel) {
+      return (this._translatedLabel = value);
-    if (ariaLabel) return I18n.t(ariaLabel);
+    }
-    if (translatedAriaLabel) return translatedAriaLabel;
-    return computedLabel;
   },
 
   click() {

app/assets/javascripts/discourse/app/lib/register-topic-footer-button.js

@@ -28,10 +28,6 @@ export function registerTopicFooterButton(button) {
     label: null,
     translatedLabel: null,
 
-    // local key path for aria label
-    ariaLabel: null,
-    translatedAriaLabel: null,
-
     // is this button disaplyed in the mobile dropdown or as an inline button ?
     dropdown: false,
 
@@ -102,15 +98,6 @@ export function getTopicFooterButtons() {
             ? I18n.t(label)
             : _compute(button, "translatedLabel");
 
-          const ariaLabel = _compute(button, "ariaLabel");
-          if (ariaLabel) {
-            discourseComputedButon.ariaLabel = I18n.t(ariaLabel);
-          } else {
-            const translatedAriaLabel = _compute(button, "translatedAriaLabel");
-            discourseComputedButon.ariaLabel =
-              translatedAriaLabel || discourseComputedButon.label;
-          }
-
           const title = _compute(button, "title");
           discourseComputedButon.title = title
             ? I18n.t(title)

app/assets/javascripts/discourse/app/templates/components/d-button.hbs

@@ -10,8 +10,8 @@
   {{/if}}
 {{/if}}
 
-{{#if computedLabel}}
+{{#if translatedLabel}}
-  <span class="d-button-label">{{html-safe computedLabel}}{{#if ellipsis}}&hellip;{{/if}}</span>
+  <span class="d-button-label">{{html-safe translatedLabel}}{{#if ellipsis}}&hellip;{{/if}}</span>
 {{/if}}
 
 {{yield}}

app/assets/javascripts/discourse/app/templates/components/topic-footer-buttons.hbs

@@ -29,7 +29,6 @@
       icon=button.icon
       translatedLabel=button.label
       translatedTitle=button.title
-      translatedAriaLabel=button.ariaLabel
       disabled=button.disabled}}
   {{/each}}
 

test/javascripts/components/d-button-test.js

@@ -100,75 +100,3 @@ componentTest("disabled button", {
     assert.ok(find("button:not([disabled])").length, "the button is enabled");
   }
 });
-
-componentTest("aria-label", {
-  template:
-    "{{d-button ariaLabel=ariaLabel translatedAriaLabel=translatedAriaLabel}}",
-
-  beforeEach() {
-    I18n.translations[I18n.locale].js.test = { fooAriaLabel: "foo" };
-  },
-
-  test(assert) {
-    this.set("ariaLabel", "test.fooAriaLabel");
-
-    assert.equal(
-      find("button")[0].getAttribute("aria-label"),
-      I18n.t("test.fooAriaLabel")
-    );
-
-    this.setProperties({
-      ariaLabel: null,
-      translatedAriaLabel: "bar"
-    });
-
-    assert.equal(find("button")[0].getAttribute("aria-label"), "bar");
-  }
-});
-
-componentTest("title", {
-  template: "{{d-button title=title translatedTitle=translatedTitle}}",
-
-  beforeEach() {
-    I18n.translations[I18n.locale].js.test = { fooTitle: "foo" };
-  },
-
-  test(assert) {
-    this.set("title", "test.fooTitle");
-    assert.equal(
-      find("button")[0].getAttribute("title"),
-      I18n.t("test.fooTitle")
-    );
-
-    this.setProperties({
-      title: null,
-      translatedTitle: "bar"
-    });
-
-    assert.equal(find("button")[0].getAttribute("title"), "bar");
-  }
-});
-
-componentTest("label", {
-  template: "{{d-button label=label translatedLabel=translatedLabel}}",
-
-  beforeEach() {
-    I18n.translations[I18n.locale].js.test = { fooLabel: "foo" };
-  },
-
-  test(assert) {
-    this.set("label", "test.fooLabel");
-
-    assert.equal(
-      find("button .d-button-label").text(),
-      I18n.t("test.fooLabel")
-    );
-
-    this.setProperties({
-      label: null,
-      translatedLabel: "bar"
-    });
-
-    assert.equal(find("button .d-button-label").text(), "bar");
-  }
-});