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