diff --git a/packages/terra-tabs/CHANGELOG.md b/packages/terra-tabs/CHANGELOG.md index eddf3cb04fc..f60867931ae 100644 --- 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 index 8de966b75f4..3e6e136c9b9 100644 --- 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 index 12a597563fd..f61c5504e09 100644 --- 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'], () => {