-
Notifications
You must be signed in to change notification settings - Fork 350
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Expression Remediation] Create arrow key navigation for TabBar compo…
…nent. (#1384) ## Summary: Updating TabBar and TabbarItem component to support arrow key navigation. Included in this PR - The creation of arrow key navigation for Tabbar and specifically the TabItems used for changing the presenting panel. - Implementation of functionality for tab bar items, specifically the focus property and ability to change the role type. Issue: https://khanacademy.atlassian.net/browse/LEMS-2130 ## Test plan: Storybook - http://localhost:6006/?path=/story/math-input-full-keypad--everything-minus-navigation-pad - Confirm that tabbing goes through only the selected tabitem, and to select another tab a user must use their left and right arrow keys. Author: catandthemachines Reviewers: catandthemachines, handeyeco, mark-fitzgerald, anakaren-rojas Required Reviewers: Approved By: mark-fitzgerald Checks: ⌛ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1384
- Loading branch information
1 parent
4b56e10
commit 5de4833
Showing
12 changed files
with
231 additions
and
86 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@khanacademy/math-input": minor | ||
| --- | ||
|
|
||
| Updating TabBar experience in to use arrow-key navigation to access the other TabItems. This will ensure the Expression Widget in perseus has proper keyboard navigation for users. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
82 changes: 82 additions & 0 deletions
82
packages/math-input/src/components/tabbar/__tests__/item.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import {render, screen} from "@testing-library/react"; | ||
| import {userEvent as userEventLib} from "@testing-library/user-event"; | ||
| import * as React from "react"; | ||
|
|
||
| import TabbarItem from "../item"; | ||
|
|
||
| describe("<TabbarItem />", () => { | ||
| let userEvent; | ||
| beforeEach(() => { | ||
| userEvent = userEventLib.setup({ | ||
| advanceTimers: jest.advanceTimersByTime, | ||
| }); | ||
| }); | ||
|
|
||
| it("renders tab item", async () => { | ||
| // Arrange | ||
| render( | ||
| <TabbarItem | ||
| itemType="Numbers" | ||
| itemState="active" | ||
| role="tab" | ||
| onClick={() => {}} | ||
| />, | ||
| ); | ||
|
|
||
| // Assert | ||
| expect(screen.getByRole("tab", {name: "Numbers"})).toBeInTheDocument(); | ||
| expect(screen.getByRole("tab", {name: "Numbers"})).not.toHaveFocus(); | ||
| }); | ||
|
|
||
| it("renders tab item with role button", async () => { | ||
| // Arrange | ||
| render( | ||
| <TabbarItem | ||
| itemType="Numbers" | ||
| itemState="active" | ||
| role="button" | ||
| onClick={() => {}} | ||
| />, | ||
| ); | ||
|
|
||
| // Assert | ||
| expect( | ||
| screen.getByRole("button", {name: "Numbers"}), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("can set focus when focus is enabled", async () => { | ||
| // Arrange | ||
| jest.useFakeTimers(); | ||
| render( | ||
| <TabbarItem | ||
| itemType="Numbers" | ||
| itemState="active" | ||
| focus={true} | ||
| role="tab" | ||
| onClick={() => {}} | ||
| />, | ||
| ); | ||
| jest.runAllTimers(); | ||
|
|
||
| // Assert | ||
| expect(screen.getByRole("tab", {name: "Numbers"})).toHaveFocus(); | ||
| }); | ||
|
|
||
| it("handles onClick callback", async () => { | ||
| // Arrange | ||
| const mockClick = jest.fn(); | ||
| render( | ||
| <TabbarItem | ||
| itemType="Numbers" | ||
| itemState="active" | ||
| role="tab" | ||
| onClick={mockClick} | ||
| />, | ||
| ); | ||
|
|
||
| // Assert | ||
| await userEvent.click(screen.getByRole("tab", {name: "Numbers"})); | ||
| expect(mockClick).toHaveBeenCalled(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.