[Expression Remediation] Create arrow key navigation for TabBar component.

[catandthemachines]

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.

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/polite-snails-know.md, packages/math-input/src/components/keypad/keypad.tsx, packages/math-input/src/components/tabbar/item.tsx, packages/math-input/src/components/tabbar/tabbar.tsx, packages/perseus/src/components/__tests__/math-input.test.tsx, packages/perseus/src/widgets/__tests__/expression-mobile.test.tsx, packages/math-input/src/components/keypad/__tests__/keypad.test.tsx, packages/math-input/src/components/keypad/__tests__/mobile-keypad.test.tsx, packages/math-input/src/components/tabbar/__tests__/item.test.tsx, packages/math-input/src/components/tabbar/__tests__/tabbar.test.tsx, packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap, packages/math-input/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (9ddcbfb) and published it to npm. You
can install it using the tag PR1384.

Example:

yarn add @khanacademy/perseus@PR1384

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1384

[github-actions]

Size Change: +678 B (+0.08%)

Total Size: 850 kB

Filename	Size	Change
packages/math-input/dist/es/index.js	80.8 kB	+678 B (+0.85%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.2 kB
packages/kmath/dist/es/index.js	4.26 kB
packages/math-input/dist/es/strings.js	1.73 kB
packages/perseus-core/dist/es/index.js	906 B
packages/perseus-editor/dist/es/index.js	272 kB
packages/perseus-error/dist/es/index.js	866 B
packages/perseus-linter/dist/es/index.js	21.8 kB
packages/perseus/dist/es/index.js	410 kB
packages/perseus/dist/es/strings.js	3.21 kB
packages/pure-markdown/dist/es/index.js	3.67 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[handeyeco]

Looking good! I noticed this is still a draft, so hopefully you don't mind the early feedback. Curious about the test plan, but I think RTL can handle focus tests?

[codecov]

Codecov Report

Attention: Patch coverage is 95.32710% with 5 lines in your changes missing coverage. Please review.

Project coverage is 70.98%. Comparing base (4b56e10) to head (7a50770).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1384      +/-   ##
==========================================
+ Coverage   69.97%   70.98%   +1.00%     
==========================================
  Files         494      498       +4     
  Lines      104380   104505     +125     
  Branches     5352    10648    +5296     
==========================================
+ Hits        73040    74179    +1139     
+ Misses      31224    30326     -898     
+ Partials      116        0     -116     

Files	Coverage Δ
...ckages/math-input/src/components/keypad/keypad.tsx	96.98% <ø> (-0.02%)	⬇️
packages/math-input/src/components/tabbar/item.tsx	100.00% <100.00%> (+0.68%)	⬆️
...ckages/math-input/src/components/tabbar/tabbar.tsx	94.84% <89.36%> (-5.16%)	⬇️

... and 118 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4b56e10...7a50770. Read the comment docs.

[catandthemachines]

Looking good! I noticed this is still a draft, so hopefully you don't mind the early feedback. Curious about the test plan, but I think RTL can handle focus tests?

I added a new test file to test the focus functionality for item.tsx. I tried to add some tests in tabbar.test.tsx, but I couldn't get the mocking of the arrow-key behavior to work. Let me know if I should take another stab at it.

[handeyeco]

This is looking great! Really clean! I mentioned a bug I found in Slack, but after that's addressed I think we should be good to go.

[mark-fitzgerald]

Feels cleaner in here - thanks!