fix: tab: added a prop to enable standard key navigation for tabs component

[mbhagat-c-eightfold]

SUMMARY:

Problem: No std key navigation for the tabs
Solution:

• Added a prop to enable standard W3C Tabs navigation(so that there is no regression).
• Added keydown events to enable navigation through arrow keys.

GITHUB ISSUE (Open Source Contributors)

NA

JIRA TASK (Eightfold Employees Only):

https://eightfoldai.atlassian.net/browse/ENG-123289
https://eightfoldai.atlassian.net/browse/ENG-127383
https://eightfoldai.atlassian.net/browse/ENG-125640

CHANGE TYPE:

• Bugfix Pull Request
• Feature Pull Request

TEST COVERAGE:

• Tests for this change already exist
• I have added unittests for this change

TEST PLAN:

CASE: if enableArrowNav is enabled then standard arrow key navigation is activated, wherein navigation through the tabs is possible by arrow keys and on enter the focus should go to the selected tab.

• pull branch down locally and start storybook (yarn storybook).
• Navigate to the tabs component, and enable enableArrowNav in the Controls.
• Verify if navigation to different tabs is achieved with arrow keys, on click enter the tab is selected.

Note: If any focusable element is present inside the tab panel then on tabbing after selection of the tab, the focus should go to the focusable element else move outside the tab component.

i. enableArrowNav is disabled.

tabsNormalN.mp4

ii. enableArrowNav is enabled.

tabsArrowN.1.mp4

Steps for Regression:
i. Verify that the tab is working as expected with and without enabling enableArrowNav prop

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[ypatadia-eightfold]

The code that is written to solve the issue was imperative where we directly manipulated the DOM. Can you please try out the changes I've commented locally and see if the functionality is working as expected. The code I've given follows the declarative paradigm of react.

[ypatadia-eightfold]

1. rebase with master, and test the PR again if it's working
2. write unit tests for these changes

[codecov]

Codecov Report

Attention: Patch coverage is 34.69388% with 96 lines in your changes missing coverage. Please review.

Project coverage is 84.08%. Comparing base (6dc4250) to head (9dc9dfc).

Files with missing lines	Patch %	Lines
src/components/Tabs/Tabs.context.tsx	22.68%	92 Missing ⚠️
src/components/Tabs/Tab/Tab.tsx	82.35%	3 Missing ⚠️
src/components/Tabs/Tabs/AnimatedTabs.tsx	88.88%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #953      +/-   ##
==========================================
- Coverage   84.43%   84.08%   -0.35%     
==========================================
  Files        1104     1104              
  Lines       20654    20798     +144     
  Branches     7822     7881      +59     
==========================================
+ Hits        17440    17489      +49     
- Misses       3126     3221      +95     
  Partials       88       88              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.