Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

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

Merged
merged 3 commits into from
Oct 23, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a6ca0a8
Keyboard nav fix
saket2403 Oct 20, 2023
7152a13
Merge branch 'main' of https://github.com/cerner/terra-framework into…
saket2403 Oct 20, 2023
95c249d
Changelog
saket2403 Oct 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/terra-tabs/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
# Changelog

* Fixed
* Fixed keyboard navigation after mouse click for draggable tabs.

## Unreleased

## 7.11.0 - (October 20, 2023)
Expand Down
4 changes: 4 additions & 0 deletions packages/terra-tabs/src/common-tabs/_Tab.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so now the focus always remains on the dragged tab ? and once dropped the keyboard navigation starts from that position ?

Copy link
Contributor Author

@saket2403 saket2403 Oct 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before the change when a draggable tab was clicked, the focus was going onto the main or the body div due to the draggable props of the dnd library(exact prop/cause unknown as we spread a variable provided by the library). So I have put the focus on the clicked tab. This change has nothing to do with whether the tab has been dragged or not.

}
}
attributes.tabIndex = isSelected ? 0 : -1;
attributes.onClick = onClick;
Expand Down
5 changes: 5 additions & 0 deletions packages/terra-tabs/tests/wdio/tabs-spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'], () => {
Expand Down
Loading