diff --git a/app/assets/javascripts/discourse/app/widgets/hamburger-menu.js b/app/assets/javascripts/discourse/app/widgets/hamburger-menu.js index 14b2848ebeb..2edd4b23a5e 100644 --- a/app/assets/javascripts/discourse/app/widgets/hamburger-menu.js +++ b/app/assets/javascripts/discourse/app/widgets/hamburger-menu.js @@ -400,4 +400,12 @@ export default createWidget("hamburger-menu", { this.sendWidgetAction("toggleHamburger"); } }, + + keyDown(e) { + if (e.key === "Escape") { + this.sendWidgetAction("toggleHamburger"); + e.preventDefault(); + return false; + } + }, }); diff --git a/app/assets/javascripts/discourse/app/widgets/user-menu.js b/app/assets/javascripts/discourse/app/widgets/user-menu.js index 49e589e7679..89aaa688aaf 100644 --- a/app/assets/javascripts/discourse/app/widgets/user-menu.js +++ b/app/assets/javascripts/discourse/app/widgets/user-menu.js @@ -313,6 +313,14 @@ export default createWidget("user-menu", { } }, + keyDown(e) { + if (e.key === "Escape") { + this.sendWidgetAction("toggleUserMenu"); + e.preventDefault(); + return false; + } + }, + quickAccess(type) { if (this.state.currentQuickAccess !== type) { this.state.currentQuickAccess = type; diff --git a/app/assets/javascripts/discourse/tests/acceptance/hamburger-menu-test.js b/app/assets/javascripts/discourse/tests/acceptance/hamburger-menu-test.js index 4d9fe1b5dfb..364118c49e9 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/hamburger-menu-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/hamburger-menu-test.js @@ -1,9 +1,10 @@ import { acceptance, + exists, query, updateCurrentUser, } from "discourse/tests/helpers/qunit-helpers"; -import { click, visit } from "@ember/test-helpers"; +import { click, triggerKeyEvent, visit } from "@ember/test-helpers"; import { test } from "qunit"; acceptance( @@ -26,3 +27,12 @@ acceptance( }); } ); + +acceptance("Hamburger Menu accessibility", function () { + test("Escape key closes hamburger menu", async function (assert) { + await visit("/"); + await click("#toggle-hamburger-menu"); + await triggerKeyEvent(".hamburger-panel", "keydown", "Escape"); + assert.ok(!exists(".hamburger-panel"), "Esc closes the hamburger panel"); + }); +});