diff --git a/app/assets/javascripts/discourse/app/components/d-button.js b/app/assets/javascripts/discourse/app/components/d-button.js
index ad4d32a5a24..4df816a3474 100644
--- a/app/assets/javascripts/discourse/app/components/d-button.js
+++ b/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",
- "computedAriaLabel:aria-label",
+ "translatedTitle:title",
+ "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")
- computedTitle(title, translatedTitle) {
- if (this.title) return I18n.t(title);
- return translatedTitle;
+ @discourseComputed("title")
+ translatedTitle: {
+ get() {
+ if (this._translatedTitle) return this._translatedTitle;
+ if (this.title) return I18n.t(this.title);
+ },
+ set(value) {
+ return (this._translatedTitle = value);
+ }
},
- @discourseComputed("label", "translatedLabel")
- computedLabel(label, translatedLabel) {
- if (this.label) return I18n.t(label);
- return translatedLabel;
- },
-
- @discourseComputed("ariaLabel", "translatedAriaLabel", "computedLabel")
- computedAriaLabel(ariaLabel, translatedAriaLabel, computedLabel) {
- if (ariaLabel) return I18n.t(ariaLabel);
- if (translatedAriaLabel) return translatedAriaLabel;
- return computedLabel;
+ @discourseComputed("label")
+ translatedLabel: {
+ get() {
+ if (this._translatedLabel) return this._translatedLabel;
+ if (this.label) return I18n.t(this.label);
+ },
+ set(value) {
+ return (this._translatedLabel = value);
+ }
},
click() {
diff --git a/app/assets/javascripts/discourse/app/lib/register-topic-footer-button.js b/app/assets/javascripts/discourse/app/lib/register-topic-footer-button.js
index ecac09a89a2..c2dd9eb96cf 100644
--- a/app/assets/javascripts/discourse/app/lib/register-topic-footer-button.js
+++ b/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)
diff --git a/app/assets/javascripts/discourse/app/templates/components/d-button.hbs b/app/assets/javascripts/discourse/app/templates/components/d-button.hbs
index 10d12b4d836..6c9ed400751 100644
--- a/app/assets/javascripts/discourse/app/templates/components/d-button.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/d-button.hbs
@@ -10,8 +10,8 @@
{{/if}}
{{/if}}
-{{#if computedLabel}}
- {{html-safe computedLabel}}{{#if ellipsis}}…{{/if}}
+{{#if translatedLabel}}
+ {{html-safe translatedLabel}}{{#if ellipsis}}…{{/if}}
{{/if}}
{{yield}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/topic-footer-buttons.hbs b/app/assets/javascripts/discourse/app/templates/components/topic-footer-buttons.hbs
index 007ec9c19d2..766ae9bf2b0 100644
--- a/app/assets/javascripts/discourse/app/templates/components/topic-footer-buttons.hbs
+++ b/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}}
diff --git a/test/javascripts/components/d-button-test.js b/test/javascripts/components/d-button-test.js
index 1d85d922c4e..5b0bdeb150b 100644
--- a/test/javascripts/components/d-button-test.js
+++ b/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");
- }
-});