[terra-tabs] Fixed keyboard navigation for draggable tabs (#1848)

cerner · Oct 23, 2023 · d8f723f · d8f723f
1 parent 3b96f4c
commit d8f723f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/packages/terra-tabs/CHANGELOG.md b/packages/terra-tabs/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Changelog
 
+* Fixed
+  * Fixed keyboard navigation after mouse click for draggable tabs.
+
 ## Unreleased
 
 ## 7.11.0 - (October 20, 2023)

diff --git a/packages/terra-tabs/src/common-tabs/_Tab.jsx b/packages/terra-tabs/src/common-tabs/_Tab.jsx
@@ -230,6 +230,10 @@ const Tab = ({
         onChange(event, itemKey);
       }
     }
+    // Fix for keyboard navigation after mouse click which was failing due to draggable props.
+    if (isDraggable) {
+      event.currentTarget.focus();
+    }
   }
   attributes.tabIndex = isSelected ? 0 : -1;
   attributes.onClick = onClick;

diff --git a/packages/terra-tabs/tests/wdio/tabs-spec.js b/packages/terra-tabs/tests/wdio/tabs-spec.js
@@ -164,6 +164,11 @@ Terra.describeViewports('Tabs - Drag and Drop', ['medium'], () => {
     browser.keys(['Tab', 'Tab', 'Space', 'ArrowRight', 'Space']);
     Terra.validates.element('After Drag and Drop', { selector: '#root' });
   });
+  it('should navigate with keyboard after mouse click', () => {
+    $('#controlledTabs-Radiology').click();
+    browser.keys(['ArrowRight']);
+    expect($('#controlledTabs-Cardiology')).toBeFocused();
+  });
 });
 
 Terra.describeViewports('Tabs - Add and Close', ['medium'], () => {