diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md index 0c56247076e..46fe06c8818 100644 --- a/packages/terra-core-docs/CHANGELOG.md +++ b/packages/terra-core-docs/CHANGELOG.md @@ -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) diff --git a/packages/terra-core-docs/src/terra-dev-site/test/list/DraggableListItem.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/list/DraggableListItem.test.jsx index a8f8c84e166..7547a040080 100644 --- a/packages/terra-core-docs/src/terra-dev-site/test/list/DraggableListItem.test.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/test/list/DraggableListItem.test.jsx @@ -18,6 +18,7 @@ const DraggableListItemTest = () => (

Radiology

 diff --git a/packages/terra-list/CHANGELOG.md b/packages/terra-list/CHANGELOG.md index 51552fdb206..2a41ac176f1 100644 --- a/packages/terra-list/CHANGELOG.md +++ b/packages/terra-list/CHANGELOG.md @@ -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 diff --git a/packages/terra-list/src/ListItem.jsx b/packages/terra-list/src/ListItem.jsx index 443dde2e2a4..0f15b4ecd7f 100644 --- a/packages/terra-list/src/ListItem.jsx +++ b/packages/terra-list/src/ListItem.jsx @@ -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; } diff --git a/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap b/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap index d77aeab4a54..f43aa2b578c 100644 --- a/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap +++ b/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap @@ -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} @@ -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} @@ -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} @@ -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} @@ -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} @@ -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} @@ -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} diff --git a/packages/terra-list/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/list-spec/List_item_is_focussed_when_clicked.png b/packages/terra-list/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/list-spec/List_item_is_focussed_when_clicked.png new file mode 100644 index 00000000000..3a3a2617947 Binary files /dev/null and b/packages/terra-list/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/list-spec/List_item_is_focussed_when_clicked.png differ diff --git a/packages/terra-list/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/list-spec/List_item_is_focussed_when_clicked.png b/packages/terra-list/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/list-spec/List_item_is_focussed_when_clicked.png new file mode 100644 index 00000000000..a22382f11eb Binary files /dev/null and b/packages/terra-list/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/list-spec/List_item_is_focussed_when_clicked.png differ diff --git a/packages/terra-list/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/list-spec/List_item_is_focussed_when_clicked.png b/packages/terra-list/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/list-spec/List_item_is_focussed_when_clicked.png new file mode 100644 index 00000000000..4954f5a12f6 Binary files /dev/null and b/packages/terra-list/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/list-spec/List_item_is_focussed_when_clicked.png differ diff --git a/packages/terra-list/tests/wdio/list-spec.js b/packages/terra-list/tests/wdio/list-spec.js index 571ec19430e..e3ce4595483 100644 --- a/packages/terra-list/tests/wdio/list-spec.js +++ b/packages/terra-list/tests/wdio/list-spec.js @@ -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', () => {