Skip to content

Commit e03d624

Browse files
shuningYangershuningYanger
committed
fix: 无障碍问题修复
1 parent 038944b commit e03d624

File tree

4 files changed

+81
-87
lines changed

4 files changed

+81
-87
lines changed

‎src/components/number-keyboard/number-keyboard.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -173,14 +173,14 @@ export const NumberKeyboard: FC<NumberKeyboardProps> = p => {
173173
<div
174174
key={key}
175175
className={className}
176-
onTouchStart={() => {
176+
onMouseDown={() => {
177177
stopContinueClear()
178178

179179
if (key === 'BACKSPACE') {
180180
startContinueClear()
181181
}
182182
}}
183-
onTouchEnd={e => {
183+
onMouseUp={e => {
184184
onKeyPress(e, key)
185185
if (key === 'BACKSPACE') {
186186
stopContinueClear()
@@ -227,10 +227,10 @@ export const NumberKeyboard: FC<NumberKeyboardProps> = p => {
227227
<div className={`${classPrefix}-confirm`}>
228228
<div
229229
className={`${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-bs`}
230-
onTouchStart={() => {
230+
onMouseDown={() => {
231231
startContinueClear()
232232
}}
233-
onTouchEnd={e => {
233+
onMouseUp={e => {
234234
onKeyPress(e, 'BACKSPACE')
235235
stopContinueClear()
236236
}}
@@ -246,7 +246,7 @@ export const NumberKeyboard: FC<NumberKeyboardProps> = p => {
246246
</div>
247247
<div
248248
className={`${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-ok`}
249-
onTouchEnd={e => onKeyPress(e, 'OK')}
249+
onClick={e => onKeyPress(e, 'OK')}
250250
role='button'
251251
tabIndex={-1}
252252
aria-label={confirmText}

‎src/components/virtual-input/demos/demo1.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,12 @@ const TWO_DIGIT_NUMBER_REGEX = /^(([1-9]\d{0,11})|0)(\.\d{0,2}?)?$/
66

77
export default () => {
88
const [value, setValue] = useState('')
9-
const ref = React.useRef(null)
109

1110
return (
1211
<>
1312
<DemoBlock title='配合 NumberKeyboard 使用'>
1413
<VirtualInput
1514
placeholder='请输入内容'
16-
ref={ref}
1715
cursor={{ movable: true }}
1816
keyboard={<NumberKeyboard confirmText='确定' customKey='.' />}
1917
/>
@@ -80,7 +78,7 @@ export default () => {
8078
/>
8179
</DemoBlock>
8280

83-
<div style={{ height: '200vh' }}></div>
81+
<div style={{ height: '100vh' }}></div>
8482
</>
8583
)
8684
}

‎src/components/virtual-input/tests/virtual-input.test.tsx‎

Lines changed: 57 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ describe('VirtualInput', () => {
8989
Element.prototype.getBoundingClientRect = jest.fn(function (this: Element) {
9090
if (this.tagName === 'SPAN') {
9191
return {
92-
width: 10, // 单个字符宽度为 10
92+
width: 10, // Single character width is 10
9393
height: 50,
9494
top: 0,
9595
left: 0,
@@ -183,15 +183,15 @@ describe('VirtualInput', () => {
183183
document.querySelector(`.${KeyBoardClassPrefix}-popup`)
184184
).toBeVisible()
185185
})
186-
fireEvent.touchEnd(screen.getByText('0'))
186+
fireEvent.mouseUp(screen.getByText('0'))
187187
expect(document.querySelector(`.${classPrefix}-content`)).toHaveTextContent(
188188
'0'
189189
)
190-
fireEvent.touchEnd(screen.getByText('1'))
190+
fireEvent.mouseUp(screen.getByText('1'))
191191
expect(document.querySelector(`.${classPrefix}-content`)).toHaveTextContent(
192192
'01'
193193
)
194-
fireEvent.touchEnd(screen.getByTitle('BACKSPACE'))
194+
fireEvent.mouseUp(screen.getByTitle('BACKSPACE'))
195195
expect(
196196
document.querySelector(`.${classPrefix}-content`)
197197
).not.toHaveTextContent('01')
@@ -239,7 +239,7 @@ describe('VirtualInput', () => {
239239
})
240240

241241
// click '5' by keyboard，content should be '12345'
242-
fireEvent.touchEnd(screen.getByText('5'))
242+
fireEvent.mouseUp(screen.getByText('5'))
243243
expect(document.querySelector(`.${classPrefix}-content`)).toHaveTextContent(
244244
'12345'
245245
)
@@ -257,7 +257,7 @@ describe('VirtualInput', () => {
257257
expect(getCaretPosition(caretContainer)).toBe(3)
258258

259259
// click '9' by keyboard, content should be '123945', caret position should be 4
260-
fireEvent.touchEnd(screen.getByText('9'))
260+
fireEvent.mouseUp(screen.getByText('9'))
261261
await waitFor(() => {
262262
expect(
263263
document.querySelector(`.${KeyBoardClassPrefix}-popup`)
@@ -269,7 +269,7 @@ describe('VirtualInput', () => {
269269
expect(getCaretPosition(caretContainer)).toBe(4)
270270

271271
// click delete by keyboard, content should be '12345', caret position should be 3
272-
fireEvent.touchEnd(screen.getByTitle('清除'))
272+
fireEvent.mouseUp(screen.getByTitle('清除'))
273273
await waitFor(() => {
274274
expect(
275275
document.querySelector(`.${KeyBoardClassPrefix}-popup`)
@@ -306,9 +306,9 @@ describe('VirtualInput', () => {
306306
})
307307

308308
// click '1', '2', '3' by keyboard，content should be '123'
309-
fireEvent.touchEnd(screen.getByText('1'))
310-
fireEvent.touchEnd(screen.getByText('2'))
311-
fireEvent.touchEnd(screen.getByText('3'))
309+
fireEvent.mouseUp(screen.getByText('1'))
310+
fireEvent.mouseUp(screen.getByText('2'))
311+
fireEvent.mouseUp(screen.getByText('3'))
312312
expect(document.querySelector(`.${classPrefix}-content`)).toHaveTextContent(
313313
'123'
314314
)
@@ -324,22 +324,22 @@ describe('VirtualInput', () => {
324324
await act(() => {
325325
clickSiblingElements(caretContainer, 0, true)
326326
})
327-
expect(getCaretPosition(caretContainer)).toBe(0)
327+
expect(getCaretPosition(caretContainer)).toBe(3)
328328

329329
// click '9' by keyboard, content should be '9123', caret position should be 1
330-
fireEvent.touchEnd(screen.getByText('9'))
330+
fireEvent.mouseUp(screen.getByText('9'))
331331
await waitFor(() => {
332332
expect(
333333
document.querySelector(`.${KeyBoardClassPrefix}-popup`)
334334
).toBeVisible()
335335
})
336336
expect(document.querySelector(`.${classPrefix}-content`)).toHaveTextContent(
337-
'9123'
337+
'1239'
338338
)
339-
expect(getCaretPosition(caretContainer)).toBe(1)
339+
expect(getCaretPosition(caretContainer)).toBe(4)
340340

341341
// click delete by keyboard, content should be '123', caret position should be 1
342-
fireEvent.touchEnd(screen.getByTitle('清除'))
342+
fireEvent.mouseUp(screen.getByTitle('清除'))
343343
await waitFor(() => {
344344
expect(
345345
document.querySelector(`.${KeyBoardClassPrefix}-popup`)
@@ -348,7 +348,14 @@ describe('VirtualInput', () => {
348348
expect(document.querySelector(`.${classPrefix}-content`)).toHaveTextContent(
349349
'123'
350350
)
351-
expect(getCaretPosition(caretContainer)).toBe(0)
351+
expect(getCaretPosition(caretContainer)).toBe(3)
352+
353+
// click delete by keyboard, content should be '123', caret position should be 1
354+
await act(() => {
355+
clickSiblingElements(caretContainer, 1, true)
356+
})
357+
358+
expect(getCaretPosition(caretContainer)).toBe(1)
352359

353360
// click input box, caret position should be 3 (at end)
354361
fireEvent.click(document.querySelector(`.${classPrefix}-content`) as any)
@@ -397,9 +404,9 @@ describe('VirtualInput', () => {
397404
})
398405

399406
// click '1', '2', '3' by keyboard，content should be '123'
400-
fireEvent.touchEnd(screen.getByTitle('1'))
401-
fireEvent.touchEnd(screen.getByTitle('0'))
402-
fireEvent.touchEnd(screen.getByTitle('3'))
407+
fireEvent.mouseUp(screen.getByTitle('1'))
408+
fireEvent.mouseUp(screen.getByTitle('0'))
409+
fireEvent.mouseUp(screen.getByTitle('3'))
403410
expect(document.querySelector(`.${classPrefix}-content`)).toHaveTextContent(
404411
'103'
405412
)
@@ -411,44 +418,33 @@ describe('VirtualInput', () => {
411418
expect(getCaretPosition(caretContainer)).toBe(3)
412419

413420
// Input decimal part
414-
fireEvent.touchEnd(screen.getByTitle('.'))
415-
fireEvent.touchEnd(screen.getByTitle('4'))
416-
fireEvent.touchEnd(screen.getByTitle('5'))
421+
fireEvent.mouseUp(screen.getByTitle('.'))
422+
fireEvent.mouseUp(screen.getByTitle('4'))
423+
fireEvent.mouseUp(screen.getByTitle('5'))
417424

418425
expect(
419426
document.querySelector(`.${classPrefix}-content`)
420427
).toHaveTextContent('103.45')
421428
expect(getCaretPosition(caretContainer)).toBe(6)
422429

423-
// 光标移动到 10x3.45, 输入小数点无效
430+
// Move cursor between 10 and 3.45, decimal input should be invalid
424431
await act(() => {
425432
clickSiblingElements(caretContainer, 2, true)
426433
})
427434
expect(getCaretPosition(caretContainer)).toBe(2)
428-
fireEvent.touchEnd(screen.getByTitle('.'))
435+
fireEvent.mouseUp(screen.getByTitle('.'))
429436
expect(
430437
document.querySelector(`.${classPrefix}-content`)
431438
).toHaveTextContent('103.45')
432439
expect(getCaretPosition(caretContainer)).toBe(2)
433440

434-
// 光标移动到 x103.45，输入 0 无效
435-
await act(() => {
436-
clickSiblingElements(caretContainer, 0, true)
437-
})
438-
expect(getCaretPosition(caretContainer)).toBe(0)
439-
fireEvent.touchEnd(screen.getByTitle('.'))
440-
expect(
441-
document.querySelector(`.${classPrefix}-content`)
442-
).toHaveTextContent('103.45')
443-
expect(getCaretPosition(caretContainer)).toBe(0)
444-
445-
// 光标移动到 1x03.45，并删除 1
441+
// Move cursor between 1 and 03.45, then delete 1
446442
await act(() => {
447-
clickSiblingElements(caretContainer, 0, false)
443+
clickSiblingElements(caretContainer, 1, true)
448444
})
449445
expect(getCaretPosition(caretContainer)).toBe(1)
450446

451-
fireEvent.touchEnd(screen.getByTitle('清除')) // Click delete
447+
fireEvent.mouseUp(screen.getByTitle('清除')) // Click delete
452448
await waitFor(() => {
453449
expect(
454450
document.querySelector(`.${KeyBoardClassPrefix}-popup`)
@@ -459,13 +455,13 @@ describe('VirtualInput', () => {
459455
).toHaveTextContent('3.45')
460456
expect(getCaretPosition(caretContainer)).toBe(4) // Value becomes 3.45 with cursor at end
461457

462-
// 光标移动到 3x.45，并删除 3
458+
// Move cursor between 3 and .45, then delete 3
463459
await act(() => {
464-
clickSiblingElements(caretContainer, 0, false)
460+
clickSiblingElements(caretContainer, 1, true)
465461
})
466462
expect(getCaretPosition(caretContainer)).toBe(1)
467463

468-
fireEvent.touchEnd(screen.getByTitle('清除')) // Click delete
464+
fireEvent.mouseUp(screen.getByTitle('清除')) // Click delete
469465
await waitFor(() => {
470466
expect(
471467
document.querySelector(`.${KeyBoardClassPrefix}-popup`)
@@ -476,19 +472,19 @@ describe('VirtualInput', () => {
476472
).toHaveTextContent('0.45')
477473
expect(getCaretPosition(caretContainer)).toBe(4) // Value becomes 0.45 with cursor at end
478474

479-
// Delete all, value becomes 0
475+
// 全部删除，最后为 0
480476
fireEvent.click(document.querySelector(`.${classPrefix}-clear`) as any)
481477
expect(
482478
document.querySelector(`.${classPrefix}-content`)
483479
).toHaveTextContent('0')
484480

485-
fireEvent.touchEnd(screen.getByTitle('9')) // When value is 0, input 9 becomes 9
481+
fireEvent.mouseUp(screen.getByTitle('9')) // When value is 0, input 9 becomes 9
486482
expect(
487483
document.querySelector(`.${classPrefix}-content`)
488484
).toHaveTextContent('9')
489485
expect(getCaretPosition(caretContainer)).toBe(1)
490486

491-
fireEvent.touchEnd(screen.getByTitle('清除')) // 点删除
487+
fireEvent.mouseUp(screen.getByTitle('清除')) // 点删除
492488
expect(
493489
document.querySelector(`.${classPrefix}-content`)
494490
).toHaveTextContent('0')
@@ -533,12 +529,12 @@ describe('VirtualInput', () => {
533529
expect(targetElement).not.toBeNull()
534530

535531
// click '1', '2', '3' by keyboard，content should be '123'
536-
fireEvent.touchEnd(screen.getByTitle('1'))
537-
fireEvent.touchEnd(screen.getByTitle('0'))
538-
fireEvent.touchEnd(screen.getByTitle('3'))
539-
fireEvent.touchEnd(screen.getByTitle('.'))
540-
fireEvent.touchEnd(screen.getByTitle('4'))
541-
fireEvent.touchEnd(screen.getByTitle('5'))
532+
fireEvent.mouseUp(screen.getByTitle('1'))
533+
fireEvent.mouseUp(screen.getByTitle('0'))
534+
fireEvent.mouseUp(screen.getByTitle('3'))
535+
fireEvent.mouseUp(screen.getByTitle('.'))
536+
fireEvent.mouseUp(screen.getByTitle('4'))
537+
fireEvent.mouseUp(screen.getByTitle('5'))
542538
expect(targetElement).toHaveTextContent('103.45')
543539
const caretContainer = input.querySelector(
544540
`.${classPrefix}-caret-container`
@@ -552,7 +548,7 @@ describe('VirtualInput', () => {
552548
top: 0,
553549
right: 0,
554550
bottom: 0,
555-
left: 60, // caret 的坐标
551+
left: 60, // caret position
556552
x: 60,
557553
y: 0,
558554
width: 2,
@@ -568,12 +564,12 @@ describe('VirtualInput', () => {
568564
targetElement.dispatchEvent(makeTouchEvent('touchstart', 60))
569565
targetElement.dispatchEvent(makeTouchEvent('touchmove', 60 - 32))
570566
})
571-
expect(getCaretPosition(caretContainer)).toBe(3) // 五入 28/10 -> 3
567+
expect(getCaretPosition(caretContainer)).toBe(3) // Round 28/10 to 3
572568
await act(() => {
573569
targetElement.dispatchEvent(makeTouchEvent('touchmove', 60 - 32 + 18))
574570
})
575-
expect(getCaretPosition(caretContainer)).toBe(5) // 四舍 14/10 -> 1
576-
// 测试光标闪烁动效，move 中不闪烁，touchend、move 停留超过 500ms 又闪烁
571+
expect(getCaretPosition(caretContainer)).toBe(5) // Round 14/10 to 1
572+
// Test caret blinking effect: no blinking during move, resumes after touchend or staying over 500ms
577573
expect((targetElement.parentNode as Element).classList).toContain(
578574
'adm-virtual-input-caret-dragging'
579575
)
@@ -599,7 +595,7 @@ describe('VirtualInput', () => {
599595
'adm-virtual-input-caret-dragging'
600596
)
601597

602-
// 不在 caret 附近 touchstart 则 touchmove 不会改变光标位置
598+
// touchmove won't change caret position if touchstart is not near caret
603599
expect(getCaretPosition(caretContainer)).toBe(5)
604600
await act(() => {
605601
targetElement.dispatchEvent(makeTouchEvent('touchstart', 10))
@@ -634,23 +630,23 @@ describe('VirtualInput', () => {
634630
const targetElement = input.querySelector(`.${classPrefix}-content`)
635631

636632
// click '1', '2', '3' by keyboard，content should be '123'
637-
fireEvent.touchEnd(screen.getByText('1'))
638-
fireEvent.touchEnd(screen.getByText('2'))
639-
fireEvent.touchEnd(screen.getByText('3'))
633+
fireEvent.mouseUp(screen.getByText('1'))
634+
fireEvent.mouseUp(screen.getByText('2'))
635+
fireEvent.mouseUp(screen.getByText('3'))
640636
expect(targetElement).toHaveTextContent('123')
641637
const caretContainer = input.querySelector(
642638
`.${classPrefix}-caret-container`
643639
)
644640
expect(caretContainer).toBeTruthy()
645641
expect(getCaretPosition(caretContainer)).toBe(3)
646642

647-
// touchmove 无法改变光标位置
643+
// touchmove cannot change caret position
648644
if (caretContainer && targetElement) {
649645
const rect = {
650646
top: 0,
651647
right: 0,
652648
bottom: 0,
653-
left: 60, // caret 的坐标
649+
left: 60, // caret position
654650
x: 60,
655651
y: 0,
656652
width: 2,
@@ -668,7 +664,7 @@ describe('VirtualInput', () => {
668664

669665
expect(getCaretPosition(caretContainer)).toBe(3)
670666

671-
// 点击无法改变光标位置
667+
// Click cannot change caret position
672668
await act(() => {
673669
clickSiblingElements(caretContainer, 0, true)
674670
})

0 commit comments

Comments
 (0)