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

[terra-list] Fixed focus issue when clicked on selectable item in draggable list item example #4054

Merged
merged 8 commits into from
Mar 8, 2024
Merged

[terra-list] Fixed focus issue when clicked on selectable item in draggable list item example #4054

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9b54263
Fixed focus issue when clicked on selectable item
KV106606Viswanath Mar 5, 2024
17da97f
Added code fix in component
KV106606Viswanath Mar 7, 2024
27aa1ed
updated changelog
KV106606Viswanath Mar 7, 2024
d521188
Merge branch 'main' into KV106606-terra-list-focus-defect
KV106606Viswanath Mar 7, 2024
2b1b080
Removed test file
KV106606Viswanath Mar 8, 2024
3d8fd3d
updated changelog
KV106606Viswanath Mar 8, 2024
f0b498d
Updated changelog
KV106606Viswanath Mar 8, 2024
aacabc1
Merge branch 'main' into KV106606-terra-list-focus-defect
KV106606Viswanath Mar 8, 2024
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
1 change: 1 addition & 0 deletions packages/terra-core-docs/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
## Unreleased

* Added
* Updated test example for draggable list item in `terra-list`.
* Added implementation page documentation regarding consumers responsibility to ensure the accessibility for `terra-signature`.

## 1.64.0 - (March 5, 2024)
Expand Down
1 change: 1 addition & 0 deletions packages/terra-core-docs/src/terra-dev-site/test/list/DraggableListItem.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const DraggableListItemTest = () => (
<Item
key="selectable2"
isSelectable
id="selectable-item2"
>
<p>Radiology</p>
</Item>
Expand Down
3 changes: 3 additions & 0 deletions packages/terra-list/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Fixed
* Fixed the issue where focus was not moving to the selectable and draggable item when clicked.

## 4.72.0 - (March 5, 2024)

* Changed
Expand Down
3 changes: 3 additions & 0 deletions packages/terra-list/src/ListItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,9 @@ const ListItem = ({
attrSpread.onMouseDown = ListUtils.wrappedEventCallback(onMouseDown, event => event.currentTarget.setAttribute('data-item-show-focus', 'false'));
}
if (isDraggable) {
attrSpread.onClick = (event) => {
event?.currentTarget?.focus();
};
attrSpread['aria-describedby'] = responseId;
}

Expand Down
7 changes: 7 additions & 0 deletions packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,7 @@ exports[`should render List with items 1`] = `
data-rbd-draggable-id="1"
draggable={false}
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
onMouseDown={[Function]}
onTransitionEnd={null}
Expand Down Expand Up @@ -546,6 +547,7 @@ exports[`should render List with items 1`] = `
data-rbd-draggable-id="2"
draggable={false}
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
onMouseDown={[Function]}
onTransitionEnd={null}
Expand Down Expand Up @@ -1014,6 +1016,7 @@ exports[`should render Section with items 1`] = `
data-rbd-draggable-id="123"
draggable={false}
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
onMouseDown={[Function]}
onTransitionEnd={null}
Expand Down Expand Up @@ -1261,6 +1264,7 @@ exports[`should render Section with items 1`] = `
data-rbd-draggable-id="124"
draggable={false}
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
onMouseDown={[Function]}
onTransitionEnd={null}
Expand Down Expand Up @@ -1707,6 +1711,7 @@ exports[`should render subsection with items 1`] = `
data-rbd-draggable-id="13"
draggable={false}
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
onMouseDown={[Function]}
onTransitionEnd={null}
Expand Down Expand Up @@ -1954,6 +1959,7 @@ exports[`should render subsection with items 1`] = `
data-rbd-draggable-id="14"
draggable={false}
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
onMouseDown={[Function]}
onTransitionEnd={null}
Expand Down Expand Up @@ -2201,6 +2207,7 @@ exports[`should render subsection with items 1`] = `
data-rbd-draggable-id="15"
draggable={false}
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
onMouseDown={[Function]}
onTransitionEnd={null}
Expand Down
Binary file added ...owlight-theme/en/chrome_medium/list-spec/List_item_is_focussed_when_clicked.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...-fusion-theme/en/chrome_medium/list-spec/List_item_is_focussed_when_clicked.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...default-theme/en/chrome_medium/list-spec/List_item_is_focussed_when_clicked.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions packages/terra-list/tests/wdio/list-spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,10 @@ Terra.describeViewports('List', ['medium'], () => {
browser.keys('Tab');
Terra.validates.element('After Drop Focus Next Item', { selector: '#root' });
});
it('should receive focus when clicked on', () => {
$('#selectable-item2').click();
Terra.validates.element('List item is focussed when clicked', { selector: '#root' });
});
});

describe('Slidepanel ListItem Drag and Drop', () => {
Expand Down
Loading