From d6f94ec0de0fa424769ad0873ce82f285e51252d Mon Sep 17 00:00:00 2001
From: majiang666 <laji198888@163.com>
Date: Fri, 22 Dec 2023 16:52:30 +0800
Subject: [PATCH] =?UTF-8?q?enhance:=20=E4=BC=98=E5=8C=96=E6=95=B0=E5=AD=97?=
 =?UTF-8?q?=E9=94=AE=E7=9B=98=E5=8F=8A=E8=99=9A=E6=8B=9F=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E6=A1=86=E6=97=A0=E9=9A=9C=E7=A2=8D=20(#6494)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 优化数字键盘及虚拟输入框无障碍

* fix: 优化test snapshots

* chore: use locale

* chore: update desc

* test: fix img part

* test: fix img part

* test: fix img part

* test: fix img test

* test: rm useless snapshot

* test: fix modal test

* test: more test case

* test: more test case

* test: more test case

* test: more test case

* test: role check

* test: rm fake timer

---------

Co-authored-by: 二货机器人 <smith3816@gmail.com>
---
 jest.config.js                                |  2 +-
 .../__snapshots__/action-sheet.test.tsx.snap  |  1 +
 src/components/dialog/tests/dialog.test.tsx   |  8 ++++++-
 .../__snapshots__/image-viewer.test.tsx.snap  |  1 +
 .../image-viewer/tests/image-viewer.test.tsx  | 22 ++++++++++++++-----
 src/components/mask/mask.tsx                  |  1 +
 src/components/modal/tests/modal.test.tsx     |  8 ++++++-
 .../number-keyboard/number-keyboard.tsx       | 15 ++++++++-----
 .../tests/number-keyboard.test.tsx            |  7 +++---
 .../tests/virtual-input.test.tsx              |  4 ++--
 .../virtual-input/virtual-input.tsx           |  2 +-
 src/tests/testing.tsx                         |  9 ++++++++
 12 files changed, 59 insertions(+), 21 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index 9cf30a6087..9cf1772d76 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
-  // maxConcurrency: 1,
+  maxConcurrency: 1,
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   modulePathIgnorePatterns: ['<rootDir>/lib/', '<rootDir>/dist/'],
   moduleDirectories: ['node_modules', 'src/tests'],
diff --git a/src/components/action-sheet/tests/__snapshots__/action-sheet.test.tsx.snap b/src/components/action-sheet/tests/__snapshots__/action-sheet.test.tsx.snap
index 0f64c3b4be..14dcaea0e1 100644
--- a/src/components/action-sheet/tests/__snapshots__/action-sheet.test.tsx.snap
+++ b/src/components/action-sheet/tests/__snapshots__/action-sheet.test.tsx.snap
@@ -18,6 +18,7 @@ exports[`ActionSheet basic usage 1`] = `
     class="adm-popup adm-action-sheet-popup"
   >
     <div
+      aria-hidden="true"
       class="adm-mask"
       style="background: rgba(0, 0, 0, 0.55); opacity: 1;"
     >
diff --git a/src/components/dialog/tests/dialog.test.tsx b/src/components/dialog/tests/dialog.test.tsx
index 4df06fe0f8..5536f77179 100644
--- a/src/components/dialog/tests/dialog.test.tsx
+++ b/src/components/dialog/tests/dialog.test.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
 import React from 'react'
 import {
   render,
@@ -6,6 +8,7 @@ import {
   waitFor,
   waitForElementToBeRemoved,
   screen,
+  waitFakeTimers,
 } from 'testing'
 import Dialog, { DialogAlertProps } from '..'
 import { act } from '@testing-library/react'
@@ -65,8 +68,11 @@ describe('Dialog', () => {
     )
 
     fireEvent.click(screen.getByRole('button', { name: 'btn' }))
-    const mask = await screen.findByRole('button', { name: '背景蒙层' })
+    await waitFakeTimers()
+
+    const mask = document.querySelector('.adm-mask-aria-button')!
     fireEvent.click(mask)
+
     await waitForElementToBeRemoved(mask)
     expect(onClose).toBeCalled()
     expect(afterClose).toBeCalled()
diff --git a/src/components/image-viewer/tests/__snapshots__/image-viewer.test.tsx.snap b/src/components/image-viewer/tests/__snapshots__/image-viewer.test.tsx.snap
index 20c54a4c12..8713f9850b 100644
--- a/src/components/image-viewer/tests/__snapshots__/image-viewer.test.tsx.snap
+++ b/src/components/image-viewer/tests/__snapshots__/image-viewer.test.tsx.snap
@@ -24,6 +24,7 @@ exports[`ImageViewer.Multi calling ref.current.swipeTo before initialization 2`]
     </span>
   </button>
   <div
+    aria-hidden="true"
     class="adm-mask"
     style="background: rgba(0, 0, 0, 0.75); opacity: 1;"
   >
diff --git a/src/components/image-viewer/tests/image-viewer.test.tsx b/src/components/image-viewer/tests/image-viewer.test.tsx
index 9e85d70f98..3645a23224 100644
--- a/src/components/image-viewer/tests/image-viewer.test.tsx
+++ b/src/components/image-viewer/tests/image-viewer.test.tsx
@@ -87,6 +87,14 @@ jest.mock('../../../utils/use-drag-and-pinch', () => {
   }
 })
 
+async function getImages() {
+  const images = await screen.findAllByText(
+    (content, element) => element?.tagName.toLowerCase() === 'img'
+  )
+
+  return images[0]
+}
+
 describe('ImageViewer.Multi', () => {
   test('calling ref.current.swipeTo before initialization', async () => {
     function App() {
@@ -149,12 +157,13 @@ describe('ImageViewer.Multi', () => {
       </>
     )
     fireEvent.click(screen.getByText('show'))
-    const imgs = await screen.findAllByRole('img')
-    expect(imgs[0]).toBeVisible()
+    const img = await getImages()
+
+    expect(img).toBeVisible()
     await act(async () => {
-      await userEvent.click(imgs[0])
+      await userEvent.click(img)
     })
-    await waitFor(() => expect(imgs[0]).not.toBeVisible())
+    await waitFor(() => expect(img).not.toBeVisible())
   })
 
   test('slide and slide with pinched should be work', async () => {
@@ -174,7 +183,7 @@ describe('ImageViewer.Multi', () => {
       )
     })
 
-    await screen.findAllByRole('img')
+    await getImages()
 
     G?.onPinch({
       origin: [235, 202],
@@ -254,7 +263,8 @@ describe('ImageViewer', () => {
       </button>
     )
     fireEvent.click(screen.getByText('show'))
-    const img = await screen.findByRole('img')
+
+    const img = await getImages()
     expect(img).toBeVisible()
 
     act(() => {
diff --git a/src/components/mask/mask.tsx b/src/components/mask/mask.tsx
index 9cc8a248ad..99d0aadaf1 100644
--- a/src/components/mask/mask.tsx
+++ b/src/components/mask/mask.tsx
@@ -101,6 +101,7 @@ export const Mask: FC<MaskProps> = p => {
       <animated.div
         className={classPrefix}
         ref={ref}
+        aria-hidden
         style={{
           ...props.style,
           background,
diff --git a/src/components/modal/tests/modal.test.tsx b/src/components/modal/tests/modal.test.tsx
index 0ca1acfe26..e212458ec1 100644
--- a/src/components/modal/tests/modal.test.tsx
+++ b/src/components/modal/tests/modal.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import React from 'react'
 import {
   render,
@@ -7,6 +8,7 @@ import {
   waitForElementToBeRemoved,
   screen,
   act,
+  waitFakeTimers,
 } from 'testing'
 import Modal, { ModalAlertProps } from '..'
 
@@ -66,9 +68,13 @@ describe('Modal', () => {
     )
 
     fireEvent.click(screen.getByRole('button', { name: 'btn' }))
-    const mask = await screen.findByRole('button', { name: '背景蒙层' })
+    await waitFakeTimers()
+
+    const mask = document.querySelector('.adm-mask-aria-button')!
     fireEvent.click(mask)
+
     await waitForElementToBeRemoved(mask)
+
     expect(onClose).toBeCalled()
     expect(afterClose).toBeCalled()
   })
diff --git a/src/components/number-keyboard/number-keyboard.tsx b/src/components/number-keyboard/number-keyboard.tsx
index 2907c8423d..ab4ecac484 100644
--- a/src/components/number-keyboard/number-keyboard.tsx
+++ b/src/components/number-keyboard/number-keyboard.tsx
@@ -8,6 +8,7 @@ import Popup, { PopupProps } from '../popup'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import SafeArea from '../safe-area'
 import { useMemoizedFn } from 'ahooks'
+import { useConfig } from '../config-provider'
 
 const classPrefix = 'adm-number-keyboard'
 
@@ -59,6 +60,8 @@ export const NumberKeyboard: FC<NumberKeyboardProps> = p => {
     onInput,
   } = props
 
+  const { locale } = useConfig()
+
   const keyboardRef = useRef<HTMLDivElement | null>(null)
 
   const keys = useMemo(() => {
@@ -138,8 +141,8 @@ export const NumberKeyboard: FC<NumberKeyboardProps> = p => {
             onClick={() => {
               props.onClose?.()
             }}
-            role='grid'
-            title='CLOSE'
+            role='button'
+            title={locale.common.close}
             tabIndex={-1}
           >
             <DownOutline />
@@ -160,7 +163,7 @@ export const NumberKeyboard: FC<NumberKeyboardProps> = p => {
 
     const ariaProps = key
       ? {
-          role: 'grid',
+          role: 'button',
           title: key,
           tabIndex: -1,
         }
@@ -233,8 +236,8 @@ export const NumberKeyboard: FC<NumberKeyboardProps> = p => {
                     // Long press should not trigger native context menu
                     e.preventDefault()
                   }}
-                  title='BACKSPACE'
-                  role='grid'
+                  title={locale.Input.clear}
+                  role='button'
                   tabIndex={-1}
                 >
                   <TextDeletionOutline />
@@ -242,7 +245,7 @@ export const NumberKeyboard: FC<NumberKeyboardProps> = p => {
                 <div
                   className={`${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-ok`}
                   onTouchEnd={e => onKeyPress(e, 'OK')}
-                  role='grid'
+                  role='button'
                   tabIndex={-1}
                   aria-label={confirmText}
                 >
diff --git a/src/components/number-keyboard/tests/number-keyboard.test.tsx b/src/components/number-keyboard/tests/number-keyboard.test.tsx
index ca7e8c73c2..d14db2c022 100644
--- a/src/components/number-keyboard/tests/number-keyboard.test.tsx
+++ b/src/components/number-keyboard/tests/number-keyboard.test.tsx
@@ -27,7 +27,8 @@ describe('NumberKeyboard', () => {
   test('onClose should be called by close button', () => {
     const onClose = jest.fn()
     render(<NumberKeyboard visible onClose={onClose} />)
-    fireEvent.click(screen.getByTitle('CLOSE'))
+
+    fireEvent.click(screen.getByTitle('关闭'))
     expect(onClose).toBeCalledTimes(1)
   })
 
@@ -75,7 +76,7 @@ describe('NumberKeyboard', () => {
       />
     )
     const confirm = screen.getByText('confirm')
-    const del = screen.getByTitle('BACKSPACE')
+    const del = screen.getByTitle('清除')
     expect(confirm).toBeInTheDocument()
     expect(confirm).toHaveClass(
       `${classPrefix}-key-extra ${classPrefix}-key-ok`
@@ -118,7 +119,7 @@ describe('NumberKeyboard', () => {
     const popup = document.querySelector(`.${classPrefix}-popup`)
     const main = document.querySelector(`.${classPrefix}-main`)
     expect(main).not.toHaveTextContent('1234567890')
-    fireEvent.click(screen.getByTitle('CLOSE'))
+    fireEvent.click(screen.getByTitle('关闭'))
     await waitFor(() => expect(popup).not.toBeVisible())
   })
 
diff --git a/src/components/virtual-input/tests/virtual-input.test.tsx b/src/components/virtual-input/tests/virtual-input.test.tsx
index 0cd11daab9..ef456a11ee 100644
--- a/src/components/virtual-input/tests/virtual-input.test.tsx
+++ b/src/components/virtual-input/tests/virtual-input.test.tsx
@@ -99,8 +99,8 @@ describe('VirtualInput', () => {
     expect(document.querySelector(`.${classPrefix}-content`)).toHaveTextContent(
       '0'
     )
-    expect(screen.getByTitle('CLOSE')).toBeInTheDocument()
-    fireEvent.click(screen.getByTitle('CLOSE'))
+    expect(screen.getByTitle('关闭')).toBeInTheDocument()
+    fireEvent.click(screen.getByTitle('关闭'))
     fireEvent.blur(screen.getByTestId('virtualInput'))
     await waitFor(() => {
       expect(
diff --git a/src/components/virtual-input/virtual-input.tsx b/src/components/virtual-input/virtual-input.tsx
index 26ba5b6203..955496f4b0 100644
--- a/src/components/virtual-input/virtual-input.tsx
+++ b/src/components/virtual-input/virtual-input.tsx
@@ -130,7 +130,7 @@ export const VirtualInput = forwardRef<VirtualInputRef, VirtualInputProps>(
           [`${classPrefix}-disabled`]: props.disabled,
         })}
         tabIndex={props.disabled ? undefined : 0}
-        role='option'
+        role='textbox'
         onFocus={onFocus}
         onBlur={onBlur}
         onClick={props.onClick}
diff --git a/src/tests/testing.tsx b/src/tests/testing.tsx
index 06c5916e7c..b790d5d6e3 100644
--- a/src/tests/testing.tsx
+++ b/src/tests/testing.tsx
@@ -116,6 +116,15 @@ export const actSleep = (time: number) => {
   return act(() => sleep(time))
 }
 
+export const waitFakeTimers = async () => {
+  for (let i = 0; i < 10; i += 1) {
+    await act(async () => {
+      jest.advanceTimersByTime(1000)
+      await Promise.resolve()
+    })
+  }
+}
+
 export const mockDrag = async (el: Element, options: any[], time?: number) => {
   const [downOptions, ...moveOptions] = options
   fireEvent.mouseDown(el, {