github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-21 16:51:43 +08:00
Code Issues Actions 1 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
2 changed files with 12 additions and 5 deletions
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" "chat-composer-dropdown__trigger-btn"
(if @hasActivePanel "has-active-panel") (if @hasActivePanel "has-active-panel")
}} }}
aria-expanded={{if this.isExpanded "true" "false"}}
aria-controls={{this.ariaControls}}
...attributes ...attributes
/> />
{{#if this.isExpanded}} {{#if this.isExpanded}}
<ul <ul
id="chat-composer-dropdown__list"
class="chat-composer-dropdown__list" class="chat-composer-dropdown__list"
{{did-insert this.setupPanel}} {{did-insert this.setupPanel}}
{{will-destroy this.teardownPanel}} {{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 { export default class ChatComposerDropdown extends Component {
@tracked isExpanded = false; @tracked isExpanded = false;
@tracked tippyInstance = null;
trigger = null; trigger = null;
@ -15,6 +16,10 @@ export default class ChatComposerDropdown extends Component {
this.trigger = element; this.trigger = element;
} }
get ariaControls() {
return this.tippyInstance?.popper?.id;
}
@action @action
toggleExpand() { toggleExpand() {
if (this.args.hasActivePanel) { if (this.args.hasActivePanel) {
@ -26,13 +31,13 @@ export default class ChatComposerDropdown extends Component {
@action @action
onButtonClick(button) { onButtonClick(button) {
this._tippyInstance.hide(); this.tippyInstance.hide();
button.action(); button.action();
} }
@action @action
setupPanel(element) { setupPanel(element) {
this._tippyInstance = tippy(this.trigger, { this.tippyInstance = tippy(this.trigger, {
theme: "chat-composer-dropdown", theme: "chat-composer-dropdown",
trigger: "click", trigger: "click",
zIndex: 1400, zIndex: 1400,
@ -53,11 +58,11 @@ export default class ChatComposerDropdown extends Component {
}, },
}); });
this._tippyInstance.show(); this.tippyInstance.show();
} }
@action @action
teardownPanel() { teardownPanel() {
this._tippyInstance?.destroy(); this.tippyInstance?.destroy();
} }
} }