fix: cx-15262: follow-on issues with Momentum Tab Component

Description

CX-15262

Related Issue

Motivation and Context

Issues: 1) If the Tabs are closable, the Tabs are not getting closed - Only last Tab is getting closed. Also, after closing the tab, the focus is lost, hence focus should move to next focusable element.

2) If the Tab is vertical, The arrow keys are not working.

3) Also, If the Tab is draggable, The drag of tab is not working.

FIx: 1) Handle custom close event

2) When tabs are vertical, ensure when keydown event is fired that we can find the current tab. Also ensure current tabs config is equal to current tab set as there no "More Tabs" view for vertical tabs (i.e we don’t filter visible and hidden)

3) Update HTML element for tabs when visible tabs are swapped

How Has This Been Tested?

Test HTML elements are updated when visible tabs are swapped
Test tabs closes and we update focus
Test tabs are able to be navigated in vertical view and we update focus

Screenshots:

Before (If applicable):

After: Screen Recording 2024-07-01 at 10 49 39

Screen Recording 2024-07-01 at 10 50 39

Screen Recording 2024-07-01 at 10 51 28

Types of changes

[x] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to change)
[ ] Documentation update
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Other... Please describe:

Checklist:

[x] My code follows the code style of this project.
[ ] My change requires a change to the documentation.
[ ] I have updated the documentation accordingly.
[ ] I have read the CONTRIBUTING document.
[x] I have added tests to cover my changes.
[x] All new and existing tests passed.

momentum-design / momentum-ui