Discource-C/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-03 09:49:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

A11Y: Activate user menu tab on keydown too (#23593)

Browse Source
This commit is contained in:
Kris 2023-09-14 14:07:35 -04:00 committed by GitHub
parent ae27beb01a
commit e1c3b14b1a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/discourse/app/components/user-menu/menu-tab.hbs
View File

@ -9,6 +9,7 @@
data-tab-number={{@tab.position}}
href={{@tab.linkWhenActive}}
{{on "click" @onTabClick}}
{{on "keydown" @onTabClick}}
>
{{d-icon @tab.icon}}
{{#if @tab.count}}

4
app/assets/javascripts/discourse/app/components/user-menu/menu.js
View File

@ -273,6 +273,10 @@ export default class UserMenu extends Component {
return;
}
if (event.type === "keydown" && event.keyCode !== 13) {
return;
}
event.preventDefault();
this.currentTabId = tab.id;

18
app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js
View File

@ -1,4 +1,4 @@
import { click, currentURL, visit } from "@ember/test-helpers";
import { click, currentURL, triggerKeyEvent, visit } from "@ember/test-helpers";
import {
acceptance,
exists,
@ -819,6 +819,22 @@ acceptance("User menu", function (needs) {
window.removeEventListener("click", interceptor);
}
});
test("tabs without hrefs can be visited with the keyboard", async function (assert) {
await visit("/");
await click(".d-header-icons .current-user");
await triggerKeyEvent(
"#user-menu-button-other-notifications",
"keydown",
"Enter"
);
assert.ok(
exists("#quick-access-other-notifications"),
"the other notifications panel can display using keyboard navigation"
);
});
});
acceptance("User menu - Dismiss button", function (needs) {