A11Y: makes post-edits-indicator a button instead of a link (#11811)

discourse · Jan 22, 2021 · 6f13d2b · 6f13d2b
1 parent dc26882
commit 6f13d2b
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 23 deletions.
diff --git a/app/assets/javascripts/discourse/app/widgets/button.js b/app/assets/javascripts/discourse/app/widgets/button.js
@@ -62,6 +62,15 @@ export const ButtonClass = {
         h("span.d-button-label", I18n.t(attrs.label, attrs.labelOptions))
       );
     }
+    if (attrs.translatedLabel) {
+      contents.push(
+        h(
+          "span.d-button-label",
+          attrs.translatedLabel.toString(),
+          attrs.translatedLabelOptions
+        )
+      );
+    }
     if (attrs.contents) {
       contents.push(attrs.contents);
     }

diff --git a/app/assets/javascripts/discourse/app/widgets/post-edits-indicator.js b/app/assets/javascripts/discourse/app/widgets/post-edits-indicator.js
@@ -1,7 +1,5 @@
 import I18n from "I18n";
 import { createWidget } from "discourse/widgets/widget";
-import { h } from "virtual-dom";
-import { iconNode } from "discourse-common/lib/icon-library";
 import { longDate } from "discourse/lib/formatter";
 
 function mult(val) {
@@ -53,24 +51,16 @@ export default createWidget("post-edits-indicator", {
       title = `${I18n.t("post.last_edited_on")} ${date}`;
     }
 
-    const contents = [
-      attrs.version > 1 ? attrs.version - 1 : "",
-      " ",
-      iconNode(icon),
-    ];
-
-    return h(
-      "a",
-      {
-        className,
-        attributes: { title, href: "#" },
-      },
-      contents
-    );
+    return this.attach("flat-button", {
+      icon,
+      title,
+      className,
+      action: "onPostEditsIndicatorClick",
+      translatedLabel: attrs.version > 1 ? attrs.version - 1 : "",
+    });
   },
 
-  click(e) {
-    e.preventDefault();
+  onPostEditsIndicatorClick() {
     if (this.attrs.wiki && this.attrs.version === 1) {
       this.sendWidgetAction("editPost");
     } else if (this.attrs.canViewEditHistory) {

diff --git a/app/assets/javascripts/discourse/tests/acceptance/topic-test.js b/app/assets/javascripts/discourse/tests/acceptance/topic-test.js
@@ -146,7 +146,7 @@ acceptance("Topic", function (needs) {
     await click(".topic-post:nth-of-type(1) button.show-post-admin-menu");
     await click(".btn.wiki");
 
-    assert.ok(queryAll("a.wiki").length === 1, "it shows the wiki icon");
+    assert.ok(queryAll("button.wiki").length === 1, "it shows the wiki icon");
   });
 
   test("Visit topic routes", async function (assert) {

diff --git a/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js b/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js
@@ -378,6 +378,10 @@ export function queryAll() {
   return window.find(...arguments);
 }
 
+export function query() {
+  return document.querySelector(...arguments);
+}
+
 export function invisible(selector) {
   const $items = queryAll(selector + ":visible");
   return (

diff --git a/app/assets/javascripts/discourse/tests/integration/widgets/button-test.js b/app/assets/javascripts/discourse/tests/integration/widgets/button-test.js
@@ -3,6 +3,7 @@ import componentTest, {
 } from "discourse/tests/helpers/component-test";
 import {
   discourseModule,
+  query,
   queryAll,
 } from "discourse/tests/helpers/qunit-helpers";
 
@@ -69,4 +70,16 @@ discourseModule("Integration | Component | Widget | button", function (hooks) {
       );
     },
   });
+
+  componentTest("translatedLabel", {
+    template: '{{mount-widget widget="button" args=args}}',
+
+    beforeEach() {
+      this.set("args", { translatedLabel: "foo bar" });
+    },
+
+    test(assert) {
+      assert.equal(query("button span.d-button-label").innerText, "foo bar");
+    },
+  });
 });
diff --git a/app/assets/javascripts/discourse/tests/integration/widgets/post-test.js b/app/assets/javascripts/discourse/tests/integration/widgets/post-test.js
@@ -113,7 +113,7 @@ discourseModule("Integration | Component | Widget | post", function (hooks) {
       this.on("showHistory", () => (this.historyShown = true));
     },
     async test(assert) {
-      await click(".post-info.edits");
+      await click(".post-info.edits button");
       assert.ok(this.historyShown, "clicking the pencil shows the history");
     },
   });

diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -295,15 +295,23 @@
 }
 
 .heatmap-high,
-.heatmap-high a {
+.heatmap-high a,
+.heatmap-high .d-icon,
+.heatmap-high .d-button-label {
   color: #fe7a15 !important;
 }
+
 .heatmap-med,
-.heatmap-med a {
+.heatmap-med a,
+.heatmap-med .d-icon,
+.heatmap-med .d-button-label {
   color: #cf7721 !important;
 }
+
 .heatmap-low,
-.heatmap-low a {
+.heatmap-low a,
+.heatmap-low .d-icon,
+.heatmap-low .d-button-label {
   color: #9b764f !important;
 }
 

diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
@@ -655,6 +655,21 @@ blockquote {
   &.raw-email {
     cursor: pointer;
   }
+  &.edits {
+    .widget-button {
+      display: flex;
+      align-items: center;
+
+      .d-button-label {
+        order: 0;
+        padding-right: 0.25em;
+      }
+
+      .d-icon {
+        order: 1;
+      }
+    }
+  }
 }
 
 pre {