fix(components): implement keyboard navigation for Tabs [#652]

[taransm]

Motivations

The Tab component's accessibility and user experience can be significantly improved by refining keyboard navigation. Implementing arrow key navigation, along with Tab and Shift+Tab key functionality, enhances usability for all users, including those who rely on keyboard navigation.

Changes

Added

• Implemented arrow key navigation for tabs, allowing users to switch tabs using the left and right arrow keys.
• Added functionality for Tab and Shift+Tab keys to navigate focus between the active tab and its content.
• Added tests to validate the arrow key navigation and Tab key functionality.

Changed

• Updated focus behavior to enhance accessibility and user experience.

Deprecated

Removed

Fixed

• Ensured the tab content and navigation comply with accessibility standards.

Security

Testing

• Added tests to validate the arrow key navigation and Tab key functionality.
• Manually tested to ensure the improved navigation works as expected.

  Files Changed

• packages/components/src/Tabs/Tabs.tsx
• packages/components/src/Tabs/Tabs.test.tsx
• packages/components/src/Tabs/__snapshots__/Tabs.test.tsx.snap Changes can be tested via Pre-release

---

In Atlantis we use Github's built in pull request reviews.

[taransm]

Hi, Would really appreciate it if someone reviewed the code. Thanks in advance

[taransm]

Thank you @chris-at-jobber for reviewing the code !