A11Y: Adds support for aria-expanded and aria-controls to btn (#11846)

This commit also uses this new feature for the expand/collapse control of the user activity page.

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

@@ -16,6 +16,8 @@ export default Component.extend({
   label: null,
   translatedLabel: null,
   ariaLabel: null,
+  ariaExpanded: null,
+  ariaControls: null,
   translatedAriaLabel: null,
   forwardEvent: false,
 
@@ -38,6 +40,8 @@ export default Component.extend({
     "isDisabled:disabled",
     "computedTitle:title",
     "computedAriaLabel:aria-label",
+    "computedAriaExpanded:aria-expanded",
+    "ariaControls:aria-controls",
     "tabindex",
     "type",
   ],
@@ -90,6 +94,11 @@ export default Component.extend({
     return computedLabel;
   },
 
+  @discourseComputed("ariaExpanded")
+  computedAriaExpanded(ariaExpanded) {
+    return ariaExpanded ? "true" : "false";
+  },
+
   click(event) {
     let { action } = this;
 

app/assets/javascripts/discourse/app/controllers/user.js

@@ -57,6 +57,15 @@ export default Controller.extend(CanCheckEmails, {
   hasReceivedWarnings: gt("model.warnings_received_count", 0),
   hasRejectedPosts: gt("model.number_of_rejected_posts", 0),
 
+  collapsedInfoState: computed("collapsedInfo", function () {
+    return {
+      isExpanded: !this.collapsedInfo,
+      icon: this.collapsedInfo ? "angle-double-down" : "angle-double-up",
+      label: this.collapsedInfo ? "expand_profile" : "collapse_profile",
+      action: this.collapsedInfo ? "expandProfile" : "collapseProfile",
+    };
+  }),
+
   showStaffCounters: or(
     "hasGivenFlags",
     "hasFlaggedPosts",

app/assets/javascripts/discourse/app/templates/user.hbs

@@ -76,15 +76,13 @@
 
               {{#if canExpandProfile}}
                 <li>
-                  {{#if collapsedInfo}}
-                    <a {{action "expandProfile"}} href class="btn btn-default">
-                      {{d-icon "angle-double-down"}} {{i18n "user.expand_profile"}}
-                    </a>
-                  {{else}}
-                    <a {{action "collapseProfile"}} href class="btn btn-default">
-                      {{d-icon "angle-double-up"}} {{i18n "user.collapse_profile"}}
-                    </a>
-                  {{/if}}
+                  {{d-button
+                    ariaExpanded=collapsedInfoState.isExpanded
+                    ariaControls="collapsed-info-panel"
+                    label=(concat "user." collapsedInfoState.label)
+                    icon=collapsedInfoState.icon
+                    action=(action collapsedInfoState.action)
+                  }}
                 </li>
               {{/if}}
             </ul>
@@ -171,7 +169,7 @@
           </div>
         </div>
         {{#unless collapsedInfo}}
-          <div class='secondary'>
+          <div class='secondary' id='collapsed-info-panel'>
             <dl>
               {{#if model.created_at}}
                 <div><dt>{{i18n 'user.created'}}</dt><dd>{{bound-date model.created_at}}</dd></div>

app/assets/javascripts/discourse/tests/integration/components/d-button-test.js

@@ -4,6 +4,7 @@ import componentTest, {
 import {
   discourseModule,
   exists,
+  query,
   queryAll,
 } from "discourse/tests/helpers/qunit-helpers";
 import I18n from "I18n";
@@ -204,4 +205,35 @@ discourseModule("Integration | Component | d-button", function (hooks) {
       assert.equal(queryAll("button .d-button-label").text(), "bar");
     },
   });
+
+  componentTest("ariaExpanded", {
+    template: "{{d-button ariaExpanded=ariaExpanded}}",
+
+    test(assert) {
+      this.set("ariaExpanded", true);
+
+      assert.equal(query("button").ariaExpanded, "true");
+
+      this.set("ariaExpanded", false);
+
+      assert.equal(query("button").ariaExpanded, "false");
+
+      this.set("ariaExpanded", "false");
+
+      assert.equal(query("button").ariaExpanded, "true");
+
+      this.set("ariaExpanded", "true");
+
+      assert.equal(query("button").ariaExpanded, "true");
+    },
+  });
+
+  componentTest("ariaControls", {
+    template: "{{d-button ariaControls=ariaControls}}",
+
+    test(assert) {
+      this.set("ariaControls", "foo-bar");
+      assert.equal(query("button").getAttribute("aria-controls"), "foo-bar");
+    },
+  });
 });