imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add arrow key controls to emoji and reaction pickers (#10637)

Browse source 
* Add arrow key controls to emoji and reaction pickers

* Iterate types

* Switch to using aria-activedescendant

* Add tests

* Fix tests

* Iterate

* Update test

* Tweak header keyboard navigation behaviour

* Also handle scrolling on left/right arrow keys

* Iterate
This commit is contained in:
Michael Telatynski 2023-04-20 15:56:21 +01:00 • committed by GitHub
parent 0d9fa0515d
commit 2da52372d4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 277 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

49
test/components/views/emojipicker/EmojiPicker-test.tsx
View file

@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import { render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import EmojiPicker from "../../../../src/components/views/emojipicker/EmojiPicker";
import { stubClient } from "../../../test-utils";
@ -21,7 +25,7 @@ describe("EmojiPicker", function () {
stubClient();
it("sort emojis by shortcode and size", function () {
const ep = new EmojiPicker({ onChoose: (str: String) => false });
const ep = new EmojiPicker({ onChoose: (str: string) => false, onFinished: jest.fn() });
//@ts-ignore private access
ep.onChangeFilter("heart");
@ -31,4 +35,47 @@ describe("EmojiPicker", function () {
//@ts-ignore private access
expect(ep.memoizedDataByCategory["people"][1].shortcodes[0]).toEqual("heartbeat");
});
it("should allow keyboard navigation using arrow keys", async () => {
// mock offsetParent
Object.defineProperty(HTMLElement.prototype, "offsetParent", {
get() {
return this.parentNode;
},
});
const onChoose = jest.fn();
const onFinished = jest.fn();
const { container } = render(<EmojiPicker onChoose={onChoose} onFinished={onFinished} />);
const input = container.querySelector("input")!;
expect(input).toHaveFocus();
function getEmoji(): string {
const activeDescendant = input.getAttribute("aria-activedescendant");
return container.querySelector("#" + activeDescendant)!.textContent!;
}
expect(getEmoji()).toEqual("😀");
await userEvent.keyboard("[ArrowDown]");
expect(getEmoji()).toEqual("🙂");
await userEvent.keyboard("[ArrowUp]");
expect(getEmoji()).toEqual("😀");
await userEvent.keyboard("Flag");
await userEvent.keyboard("[ArrowRight]");
await userEvent.keyboard("[ArrowRight]");
expect(getEmoji()).toEqual("📫️");
await userEvent.keyboard("[ArrowDown]");
expect(getEmoji()).toEqual("🇦🇨");
await userEvent.keyboard("[ArrowLeft]");
expect(getEmoji()).toEqual("📭️");
await userEvent.keyboard("[ArrowUp]");
expect(getEmoji()).toEqual("⛳️");
await userEvent.keyboard("[ArrowRight]");
expect(getEmoji()).toEqual("📫️");
await userEvent.keyboard("[Enter]");
expect(onChoose).toHaveBeenCalledWith("📫️");
expect(onFinished).toHaveBeenCalled();
});
});