IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

FIX: correctly applies aria-expanded/aria-controls (#23029)

Browse Source
This commit is contained in:
Joffrey JAFFEUX 2023-08-09 11:51:28 +02:00 committed by GitHub
parent 048796e678
commit 3a3346c95a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.hbs
View File

@ -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}}

13
plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.js
View File

@ -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();
}
}