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

A11Y: Add keyboard support for do-not-disturb modal (#17043)

Browse Source
This commit is contained in:
Penar Musaraj 2022-06-09 15:05:01 +00:00 committed by GitHub
parent 002d62b847
commit 3f569f1185
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/assets/javascripts/discourse/app/components/tap-tile.js
View File

@ -5,25 +5,25 @@ import { propertyEqual } from "discourse/lib/computed";
export default Component.extend({ export default Component.extend({
init() { init() {
this._super(...arguments); this._super(...arguments);
this.set("elementId", `tap_tile_${this.tileId}`); this.set("elementId", `tap_tile_${this.tileId}`);
}, },
classNames: ["tap-tile"], classNames: ["tap-tile"],
classNameBindings: ["active"], classNameBindings: ["active"],
attributeBindings: ["role", "ariaPressed", "tabIndex"], attributeBindings: ["role", "ariaPressed", "tabIndex"],
role: "button", role: "button",
tabIndex: 0, tabIndex: 0,
ariaPressed: reads("active"), ariaPressed: reads("active"),
click() { click() {
this.onChange(this.tileId); this.onChange(this.tileId);
}, },
keyDown(e) {
if (e.key === "Enter") {
this.onChange(this.tileId);
}
},
active: propertyEqual("activeTile", "tileId"), active: propertyEqual("activeTile", "tileId"),
}); });

8
app/assets/javascripts/discourse/app/templates/modal/do-not-disturb.hbs
View File

@ -14,7 +14,9 @@
{{/tap-tile}} {{/tap-tile}}
{{/tap-tile-grid}} {{/tap-tile-grid}}
<a href {{ action navigateToNotificationSchedule }}> {{d-button
{{i18n "do_not_disturb.set_schedule"}} action=(action "navigateToNotificationSchedule")
</a> label="do_not_disturb.set_schedule"
}}
{{/d-modal-body}} {{/d-modal-body}}

36
app/assets/javascripts/discourse/tests/acceptance/do-not-disturb-test.js
View File

@ -5,7 +5,7 @@ import {
queryAll, queryAll,
updateCurrentUser, updateCurrentUser,
} from "discourse/tests/helpers/qunit-helpers"; } 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"; import { test } from "qunit";
acceptance("Do not disturb", function (needs) { acceptance("Do not disturb", function (needs) {
@ -37,14 +37,40 @@ acceptance("Do not disturb", function (needs) {
await click(tiles[0]); await click(tiles[0]);
assert.ok(query(".do-not-disturb-modal.hidden"), "modal is hidden");
assert.ok( assert.ok(
query(".do-not-disturb-modal").style.display === "none", exists(".header-dropdown-toggle .do-not-disturb-background .d-icon-moon"),
"modal is hidden" "moon icon is present in header"
);
});
test("Can be invoked via keyboard", async function (assert) {
updateCurrentUser({ do_not_disturb_until: null });
await visit("/");
await click(".header-dropdown-toggle.current-user");
await click(".menu-links-row .user-preferences-link");
await click(".do-not-disturb");
assert.ok(exists(".do-not-disturb-modal"), "DND modal is displayed");
assert.strictEqual(
queryAll(".do-not-disturb-tile").length,
4,
"There are 4 duration choices"
);
await triggerKeyEvent(".do-not-disturb-tile:nth-child(1)", "keydown", 13);
assert.ok(
query(".do-not-disturb-modal.hidden"),
"DND modal is hidden after making a choice"
); );
assert.ok( assert.ok(
exists(".header-dropdown-toggle .do-not-disturb-background"), exists(".header-dropdown-toggle .do-not-disturb-background .d-icon-moon"),
"moon icon is present in header" "moon icon is shown in header avatar"
); );
}); });