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

@@ -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) */
+			}
 		`];
 	}
 

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', () => {