diff --git a/app/assets/javascripts/discourse/app/widgets/button.js b/app/assets/javascripts/discourse/app/widgets/button.js index fe5c6d93ae..01df29e6cf 100644 --- a/app/assets/javascripts/discourse/app/widgets/button.js +++ b/app/assets/javascripts/discourse/app/widgets/button.js @@ -31,9 +31,13 @@ export const ButtonClass = { buildAttributes() { const attrs = this.attrs; const attributes = {}; + let title = attrs.translatedTitle; - if (attrs.title) { - const title = I18n.t(attrs.title, attrs.titleOptions); + if (!title && attrs.title) { + title = I18n.t(attrs.title, attrs.titleOptions); + } + + if (title) { attributes["aria-label"] = title; attributes.title = title; } diff --git a/app/assets/javascripts/discourse/app/widgets/post-edits-indicator.js b/app/assets/javascripts/discourse/app/widgets/post-edits-indicator.js index 17bf30302b..8d4e4c8673 100644 --- a/app/assets/javascripts/discourse/app/widgets/post-edits-indicator.js +++ b/app/assets/javascripts/discourse/app/widgets/post-edits-indicator.js @@ -53,7 +53,7 @@ export default createWidget("post-edits-indicator", { return this.attach("flat-button", { icon, - title, + translatedTitle: title, className, action: "onPostEditsIndicatorClick", translatedLabel: attrs.version > 1 ? attrs.version - 1 : "", diff --git a/app/assets/javascripts/discourse/tests/integration/widgets/button-test.js b/app/assets/javascripts/discourse/tests/integration/widgets/button-test.js index e1aa1be23d..4f73a310db 100644 --- a/app/assets/javascripts/discourse/tests/integration/widgets/button-test.js +++ b/app/assets/javascripts/discourse/tests/integration/widgets/button-test.js @@ -82,4 +82,17 @@ discourseModule("Integration | Component | Widget | button", function (hooks) { assert.equal(query("button span.d-button-label").innerText, "foo bar"); }, }); + + componentTest("translatedTitle", { + template: '{{mount-widget widget="button" args=args}}', + + beforeEach() { + this.set("args", { label: "topic.create", translatedTitle: "foo bar" }); + }, + + test(assert) { + assert.equal(query("button").title, "foo bar"); + assert.equal(query("button").ariaLabel, "foo bar"); + }, + }); });