Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Add auto focus to hamburger and user menu dropdowns (#13165)

This commit is contained in:
Robin Ward 2021-05-26 16:45:52 -04:00 committed by GitHub
parent ea68bab135
commit b9053c5e77
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/javascripts/discourse/app/widgets/header.js
View File

@ -506,11 +506,21 @@ export default createWidget("header", {
this.state.userVisible = !this.state.userVisible; this.state.userVisible = !this.state.userVisible;
this.toggleBodyScrolling(this.state.userVisible); this.toggleBodyScrolling(this.state.userVisible);
// auto focus on first button in dropdown
schedule("afterRender", () =>
document.querySelector(".user-menu button")?.focus()
);
}, },
toggleHamburger() { toggleHamburger() {
this.state.hamburgerVisible = !this.state.hamburgerVisible; this.state.hamburgerVisible = !this.state.hamburgerVisible;
this.toggleBodyScrolling(this.state.hamburgerVisible); this.toggleBodyScrolling(this.state.hamburgerVisible);
// auto focus on first link in dropdown
schedule("afterRender", () => {
document.querySelector(".hamburger-panel .menu-links a")?.focus();
});
}, },
toggleBodyScrolling(bool) { toggleBodyScrolling(bool) {