From b54e989f7f1c4a2144f277b8a159392a50002e23 Mon Sep 17 00:00:00 2001
From: Danny Gleckler <daniel.gleckler@d2l.com>
Date: Thu, 9 Jan 2025 16:50:52 -0500
Subject: [PATCH] fix: Safari list item drag handle, maintaining clickable drag
 arrows (#5302)

* Fix Safari drag handle, maintaining clickable drag arrows

* Add clickable drag arrows test

* Checks real clicks again for good measure

* Fix lint
---
 components/list/list-item-drag-handle.js |  4 +++-
 components/list/test/list.test.js        | 22 ++++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/components/list/list-item-drag-handle.js b/components/list/list-item-drag-handle.js
index be5806016e7..e791904c79f 100644
--- a/components/list/list-item-drag-handle.js
+++ b/components/list/list-item-drag-handle.js
@@ -72,7 +72,6 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(RtlMixin(LitElem
 			:host {
 				display: flex;
 				margin: 0.25rem;
-				pointer-events: auto; /* required since its parent may set point-events: none; (see generic layout) */
 			}
 			:host([hidden]) {
 				display: none;
@@ -116,6 +115,9 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(RtlMixin(LitElem
 			.d2l-list-item-drag-handle-tooltip-key {
 				font-weight: 700;
 			}
+			d2l-button-move {
+				pointer-events: auto; /* required since ancestors may set point-events: none; (see generic layout) */
+			}
 		`];
 	}
 
diff --git a/components/list/test/list.test.js b/components/list/test/list.test.js
index 7148ca1cb33..1841bcc0f1a 100644
--- a/components/list/test/list.test.js
+++ b/components/list/test/list.test.js
@@ -298,6 +298,28 @@ describe('d2l-list-item', () => {
 
 	});
 
+	it('has clickable drag arrows', async() => {
+		const list = await fixture(html`
+		<d2l-list>
+			<d2l-list-item draggable key="1">Item 1</d2l-list-item>
+			<d2l-list-item draggable key="2">Item 2</d2l-list-item>
+		</d2l-list>`);
+
+		const item = list.children[0];
+		expect(item.innerText).to.equal('Item 1');
+		const handle = item.shadowRoot.querySelector('d2l-list-item-drag-handle');
+		let handleRealClicks = 0;
+		handle.addEventListener('click', () => ++handleRealClicks);
+		await clickElem(handle.shadowRoot.querySelector('button')); // focus drag handle
+		expect(handleRealClicks).to.equal(0);
+		await clickElem(handle.shadowRoot.querySelector('button')); // enable keyboard mode
+		const downArrow = handle.shadowRoot.querySelector('d2l-button-move').shadowRoot.querySelector('.down-layer');
+		expect(downArrow).to.exist;
+		clickElem(downArrow);
+		await oneEvent(item, 'd2l-list-item-position-change');
+		expect(handleRealClicks).to.equal(0);
+	});
+
 });
 
 describe('d2l-list-item-button', () => {