From 3a3346c95a587f232bc311d0cd58a52559b8b35d Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Wed, 9 Aug 2023 11:51:28 +0200
Subject: [PATCH] FIX: correctly applies aria-expanded/aria-controls (#23029)

---
 .../discourse/components/chat-composer-dropdown.hbs |  4 +++-
 .../discourse/components/chat-composer-dropdown.js  | 13 +++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.hbs
index 9a9aabd7c71..8f4a16cf64b 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.hbs
@@ -9,11 +9,13 @@
       "chat-composer-dropdown__trigger-btn"
       (if @hasActivePanel "has-active-panel")
     }}
+    aria-expanded={{if this.isExpanded "true" "false"}}
+    aria-controls={{this.ariaControls}}
     ...attributes
   />
-
   {{#if this.isExpanded}}
     <ul
+      id="chat-composer-dropdown__list"
       class="chat-composer-dropdown__list"
       {{did-insert this.setupPanel}}
       {{will-destroy this.teardownPanel}}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.js b/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.js
index df826cb2ece..70ee9a414b1 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.js
@@ -7,6 +7,7 @@ import { tracked } from "@glimmer/tracking";
 
 export default class ChatComposerDropdown extends Component {
   @tracked isExpanded = false;
+  @tracked tippyInstance = null;
 
   trigger = null;
 
@@ -15,6 +16,10 @@ export default class ChatComposerDropdown extends Component {
     this.trigger = element;
   }
 
+  get ariaControls() {
+    return this.tippyInstance?.popper?.id;
+  }
+
   @action
   toggleExpand() {
     if (this.args.hasActivePanel) {
@@ -26,13 +31,13 @@ export default class ChatComposerDropdown extends Component {
 
   @action
   onButtonClick(button) {
-    this._tippyInstance.hide();
+    this.tippyInstance.hide();
     button.action();
   }
 
   @action
   setupPanel(element) {
-    this._tippyInstance = tippy(this.trigger, {
+    this.tippyInstance = tippy(this.trigger, {
       theme: "chat-composer-dropdown",
       trigger: "click",
       zIndex: 1400,
@@ -53,11 +58,11 @@ export default class ChatComposerDropdown extends Component {
       },
     });
 
-    this._tippyInstance.show();
+    this.tippyInstance.show();
   }
 
   @action
   teardownPanel() {
-    this._tippyInstance?.destroy();
+    this.tippyInstance?.destroy();
   }
 }