fix: accessibility issues for builder's design

web/src/components/__tests__/FieldInspector.spec.ts

@@ -95,7 +95,7 @@ describe('FieldInspector', () => {
 		)
 
 		const alerts = [...document.body.querySelectorAll('[role="alert"]')].map(text)
-		expect(alerts).toEqual(['Give the field a label.', 'Bad key.', 'Outside.', 'Order.'])
+		expect(alerts).toEqual(['Give the field a label.', 'Bad key.', 'Order.', 'Outside.'])
 	})
 
 	it('lays the controls out in one column when compact', async () => {

web/src/components/__tests__/FieldList.spec.ts

@@ -138,4 +138,72 @@ describe('FieldList', () => {
 
 		expect(document.body.querySelector('[data-action]')).toBeNull()
 	})
+
+	describe('dragging a grip', () => {
+		function layout() {
+			;[...document.body.querySelectorAll('li[data-uid]')].forEach((row, index) => {
+				row.getBoundingClientRect = () => ({ bottom: (index + 1) * 60 }) as DOMRect
+			})
+		}
+
+		function pointer(target: EventTarget, type: string, clientY = 0, button = 0) {
+			const event = new MouseEvent(type, { bubbles: true, cancelable: true, clientY, button })
+			Object.defineProperty(event, 'pointerType', { value: 'mouse' })
+			target.dispatchEvent(event)
+		}
+
+		it('drops the row where the pointer is released and emits the order once', async () => {
+			await mountInApp(FieldList, props())
+			layout()
+
+			pointer(grip('Title'), 'pointerdown', 10)
+			await flushPromises()
+			pointer(window, 'pointermove', 100)
+			await flushPromises()
+			expect(labels()).toEqual(['Starts on', 'Title', 'Ends on'])
+			layout()
+			pointer(window, 'pointermove', 170)
+			await flushPromises()
+			pointer(window, 'pointerup', 170)
+			await flushPromises()
+
+			expect(emitted('reorder')).toEqual([[[2, 3, 1]]])
+		})
+
+		it('emits nothing when it is released where it started', async () => {
+			await mountInApp(FieldList, props())
+			layout()
+
+			pointer(grip('Title'), 'pointerdown', 10)
+			pointer(window, 'pointerup', 10)
+			await flushPromises()
+
+			expect(emitted('reorder')).toEqual([])
+		})
+
+		it('ignores a secondary button', async () => {
+			await mountInApp(FieldList, props())
+			layout()
+
+			pointer(grip('Title'), 'pointerdown', 10, 2)
+			pointer(window, 'pointermove', 100)
+			await flushPromises()
+
+			expect(labels()).toEqual(['Title', 'Starts on', 'Ends on'])
+		})
+
+		it('puts the rows back when the drag is cancelled', async () => {
+			await mountInApp(FieldList, props())
+			layout()
+
+			pointer(grip('Title'), 'pointerdown', 10)
+			pointer(window, 'pointermove', 100)
+			await flushPromises()
+			pointer(window, 'pointercancel')
+			await flushPromises()
+
+			expect(labels()).toEqual(['Title', 'Starts on', 'Ends on'])
+			expect(emitted('reorder')).toEqual([])
+		})
+	})
 })