A11Y: makes quote controls accessible (#12073)

app/assets/javascripts/discourse/app/widgets/post-cooked.js

@@ -252,13 +252,16 @@ export default class PostCooked {
       let icon = iconHTML("arrow-up");
       navLink = `<a href='${this._urlForPostNumber(
         postNumber
-      )}' title='${quoteTitle}' class='back'>${icon}</a>`;
+      )}' title='${quoteTitle}' class='btn-flat back'>${icon}</a>`;
     }
 
     // Only add the expand/contract control if it's not a full post
     let expandContract = "";
+    const isExpanded = $aside.data("expanded") === true;
     if (!$aside.data("full")) {
-      expandContract = iconHTML(desc, { title: "post.expand_collapse" });
+      let icon = iconHTML(desc, { title: "post.expand_collapse" });
+      const quoteId = $aside.find("blockquote").attr("id");
+      expandContract = `<button aria-controls="${quoteId}" aria-expanded="${isExpanded}" class="quote-toggle btn-flat">${icon}</button>`;
       $(".title", $aside).css("cursor", "pointer");
     }
     if (this.ignoredUsers && this.ignoredUsers.length > 0) {
@@ -277,9 +280,14 @@ export default class PostCooked {
       return;
     }
 
-    $quotes.each((i, e) => {
+    $quotes.each((index, e) => {
       const $aside = $(e);
       if ($aside.data("post")) {
+        const quoteId = `quote-id-${$aside.data("topic")}-${$aside.data(
+          "post"
+        )}-${index}`;
+        $aside.find("blockquote").attr("id", quoteId);
+
         this._updateQuoteElements($aside, "chevron-down");
         const $title = $(".title", $aside);
 

app/assets/stylesheets/common/base/topic-post.scss

@@ -247,6 +247,12 @@ blockquote {
   color: var(--primary-low-mid-or-secondary-high);
 }
 
+.quote-controls {
+  .quote-toggle {
+    padding: 0;
+  }
+}
+
 .cooked .highlight {
   background-color: var(--tertiary-low);
   padding: 2px;