fix(picker): add aria-* for datepicker (#4028)

* fix(picker): add aria-* for datepicker

* fix(e2e): fix date-picker's e2e error

Author: shenjunjian

examples/sites/demos/pc/app/date-picker/align.spec.ts

@@ -6,38 +6,35 @@ test.use({
 test('[DatePicker] 测试对齐方式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('date-picker#align')
-  await page.locator('.settings-btn').first().click()
-  await page.locator('label').filter({ hasText: '单示例' }).click()
-  await page.waitForSelector('.demo-date-picker-wrap', { state: 'visible' })
-
+  const demo = page.locator('#align')
   // 左对齐
-  const leftDateInputDom = page.getByRole('textbox').nth(1)
-  const leftDatePanelDom = page.locator('.tiny-picker-panel').nth(2)
+  const leftDateInputDom = demo.locator('.tiny-input__inner').nth(0)
+  const leftDatePanelDom = page.locator('body > .tiny-picker-panel').nth(0)
   const leftClosePanel = page.getByText('左对齐：')
   await page.waitForTimeout(200)
 
   await leftDateInputDom.click()
   await page.waitForTimeout(200)
-  await expect(leftDatePanelDom).toHaveAttribute('x-placement', /bottom-start|top-start/)
+  await expect(leftDatePanelDom).toHaveAttribute('x-placement', 'bottom-start')
   await leftClosePanel.click()
 
   // 居中对齐
-  const centerDateInputDom = page.getByRole('textbox').nth(2)
-  const centerDatePanelDom = page.locator('.tiny-picker-panel').nth(2)
+  const centerDateInputDom = demo.locator('.tiny-input__inner').nth(1)
+  const centerDatePanelDom = page.locator('body > .tiny-picker-panel').nth(1)
   const centerClosePanel = page.getByText('居中对齐：')
 
   await centerDateInputDom.click()
   await page.waitForTimeout(200)
-  await expect(centerDatePanelDom).toHaveAttribute('x-placement', /bottom|top/)
+  await expect(centerDatePanelDom).toHaveAttribute('x-placement', /bottom/)
   await centerClosePanel.click()
 
   // 右对齐
-  const rightDateInputDom = page.getByRole('textbox').nth(3)
-  const rightDatePanelDom = page.locator('.tiny-picker-panel').nth(2)
+  const rightDateInputDom = demo.locator('.tiny-input__inner').nth(2)
+  const rightDatePanelDom = page.locator('body > .tiny-picker-panel').nth(2)
   const rightClosePanel = page.getByText('右对齐：')
 
   await rightDateInputDom.click()
   await page.waitForTimeout(200)
-  await expect(rightDatePanelDom).toHaveAttribute('x-placement', /bottom-end|top-end/)
+  await expect(rightDatePanelDom).toHaveAttribute('x-placement', /bottom-end/)
   await rightClosePanel.click()
 })

examples/sites/demos/pc/app/date-picker/clear.spec.ts

@@ -6,9 +6,9 @@ test('[DatePicker] 测试清除输入', async ({ page }) => {
 
   const demo = page.locator('#clear')
 
-  const datePickerDefaultClearIcon = demo.getByRole('textbox').nth(0)
-  const datePickerHideClearIcon = demo.getByRole('textbox').nth(1)
-  const datePickerCustomClearIcon = demo.getByRole('textbox').nth(2)
+  const datePickerDefaultClearIcon = demo.getByRole('combobox').nth(0)
+  const datePickerHideClearIcon = demo.getByRole('combobox').nth(1)
+  const datePickerCustomClearIcon = demo.getByRole('combobox').nth(2)
   const clearIcon = demo.locator('.tiny-date-editor .tiny-input__icon-container .baseClearicon')
 
   // 默认显示清除按钮

examples/sites/demos/pc/app/date-picker/default-value.spec.ts

@@ -7,20 +7,20 @@ test('[DatePicker] 测试选择器打开时默认时间设置', async ({ page })
   await page.locator('label').filter({ hasText: '单示例' }).click()
 
   // default-value: 打开日期面板，默认显示的日期
-  await page.getByRole('textbox').nth(1).click()
+  await page.getByRole('combobox').nth(0).click()
   await expect(page.getByRole('button', { name: '2000 年' })).toBeVisible()
   await expect(page.getByRole('button', { name: '11 月' })).toBeVisible()
 
   // default-time: 日期时间 (范围)，选择日期之后默认显示的时间 (范围)
-  const dateInputDefaultTime = page.getByRole('textbox').nth(2)
+  const dateInputDefaultTime = page.getByRole('combobox').nth(1)
   await dateInputDefaultTime.fill('2023-05-20 09:00:00')
   await dateInputDefaultTime.press('Enter')
 
-  await page.getByRole('textbox', { name: '2023-05-20 09:00:00' }).click()
+  await page.getByRole('combobox', { name: '2023-05-20 09:00:00' }).click()
   await page.getByRole('cell', { name: '15' }).getByText('15').last().click()
   await expect(page.getByRole('textbox', { name: '选择时间' })).toHaveValue('09:00:00')
 
-  await page.getByRole('textbox').nth(3).click()
+  await page.getByRole('combobox').nth(2).click()
   await page.getByRole('cell', { name: '10' }).getByText('10').last().click()
   await page.getByRole('cell', { name: '10' }).getByText('10').nth(1).click()
   await expect(page.getByRole('textbox', { name: '开始时间' })).toHaveValue('09:00:00')

examples/sites/demos/pc/app/date-picker/events.spec.ts

@@ -19,7 +19,7 @@ test('[DatePicker] 测试事件', async ({ page }) => {
   await page
     .locator('div')
     .filter({ hasText: /^blur:$/ })
-    .getByRole('textbox')
+    .getByRole('combobox')
     .click()
   await page.getByRole('cell', { name: '15' }).getByText('15').last().click()
   const blurEventMessageDom = page.locator('div').filter({ hasText: '触发 blur 事件' }).nth(1)
@@ -33,7 +33,7 @@ test('[DatePicker] 测试事件', async ({ page }) => {
   await page
     .locator('div')
     .filter({ hasText: /^change:$/ })
-    .getByRole('textbox')
+    .getByRole('combobox')
     .click()
   await page.getByRole('cell', { name: '15' }).getByText('15').last().click()
   const changeEventMessageDom = page.locator('div').filter({ hasText: '触发 change 事件，组件绑定值为：' }).nth(1)

examples/sites/demos/pc/app/date-picker/format.spec.ts

@@ -5,13 +5,13 @@ test('[DatePicker] 测试日期格式化', async ({ page }) => {
   await page.goto('date-picker#format')
 
   // format: 日期输入框中显示的格式
-  await page.getByRole('textbox', { name: '2023 年 05 月 24 日' }).first().click()
+  await page.getByRole('combobox', { name: '2023 年 05 月 24 日' }).first().click()
   await page.getByRole('cell', { name: '20' }).getByText('20').last().click()
-  await expect(page.getByRole('textbox', { name: '2023 年 05 月 20 日' }).first()).toBeVisible()
+  await expect(page.getByRole('combobox', { name: '2023 年 05 月 20 日' }).first()).toBeVisible()
 
   // time-format: 时间输入框中显示的格式
   await page.locator('.tiny-date-editor input').nth(1).click()
-  await page.getByRole('cell', { name: '24' }).locator('span').click();
+  await page.getByRole('cell', { name: '24' }).locator('span').click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(page.locator('.tiny-date-editor input').nth(1)).toHaveValue('2023 年 05 月 24 日 08 时 00 分 00 秒')
 

examples/sites/demos/pc/app/date-picker/now.spec.ts

@@ -3,11 +3,11 @@ import { test, expect } from '@playwright/test'
 test('“此刻”逻辑定制', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('date-picker#now')
-  await page.getByRole('textbox', { name: '-11-11 10:10:11' }).first().click()
+  await page.getByRole('combobox', { name: '-11-11 10:10:11' }).first().click()
   await page.getByText('此刻（服务器时间）').click()
   await page.getByRole('button', { name: '确定' }).click()
-  await expect(page.getByRole('textbox', { name: '-12-11 18:18:18' })).toBeVisible()
-  await page.getByRole('textbox', { name: '-11-11 10:10:11' }).click()
+  await expect(page.getByRole('combobox', { name: '-12-11 18:18:18' })).toBeVisible()
+  await page.getByRole('combobox', { name: '-11-11 10:10:11' }).click()
   await page.getByRole('button', { name: '此刻' }).click()
-  await expect(page.getByRole('textbox', { name: '-10-08 18:18:18' })).toBeVisible()
+  await expect(page.getByRole('combobox', { name: '-10-08 18:18:18' })).toBeVisible()
 })

examples/sites/demos/pc/app/date-picker/shortcuts.spec.ts

@@ -5,7 +5,7 @@ test('[DatePicker] 测试选择快捷选项日期：今天/昨天/一周前', as
   await page.goto('date-picker#shortcuts')
 
   // 日期选择：今天/昨天/一周前
-  const datePickerDom = page.getByRole('textbox', { name: '请选择日期' })
+  const datePickerDom = page.getByRole('combobox', { name: '请选择日期' })
   await datePickerDom.click()
   await page.getByRole('button', { name: '今天' }).click()
   await page.locator('.tiny-date-editor input').first().click()

examples/sites/demos/pc/app/date-picker/slot.spec.ts

@@ -7,23 +7,23 @@ test('[DatePicker] 测试尺寸设置', async ({ page }) => {
   let btn = page.getByRole('button', { name: '自定义按钮' })
   let nowBtn = page.getByRole('button', { name: '自定义此刻' })
 
-  await page.locator('#slot').getByRole('textbox', { name: '请选择日期', exact: true }).click()
+  await page.locator('#slot').getByRole('combobox', { name: '请选择日期', exact: true }).click()
   await page.waitForTimeout(200)
   await expect(btn).toBeVisible()
 
-  await page.getByRole('textbox', { name: '请选择日期时间' }).click()
+  await page.getByRole('combobox', { name: '请选择日期时间' }).click()
   await page.waitForTimeout(200)
   await expect(nowBtn).toBeVisible()
 
-  await page.locator('#slot').getByRole('textbox', { name: '请选择周' }).click()
+  await page.locator('#slot').getByRole('combobox', { name: '请选择周' }).click()
   await page.waitForTimeout(200)
   await expect(btn.first()).toBeVisible()
 
-  await page.locator('#slot').getByRole('textbox', { name: '请选择月份' }).click()
+  await page.locator('#slot').getByRole('combobox', { name: '请选择月份' }).click()
   await page.waitForTimeout(200)
   await expect(btn.first()).toBeVisible()
 
-  await page.locator('#slot').getByRole('textbox', { name: '请选择年份' }).click()
+  await page.locator('#slot').getByRole('combobox', { name: '请选择年份' }).click()
   await page.waitForTimeout(200)
   await expect(btn.first()).toBeVisible()
 

packages/renderless/src/picker/vue.ts

@@ -70,7 +70,7 @@ import {
   formatInputValue
 } from './index'
 import { dateMobileToggle, timeMobileToggle, dateToTimeArray, timeArrayToDate, timeMobileConfirm } from './mb'
-import { DATEPICKER } from '@opentiny/utils'
+import { DATEPICKER, nanoid } from '@opentiny/utils'
 import type {
   IPickerProps,
   IPickerApi,
@@ -178,7 +178,8 @@ const initState = ({ api, reactive, vm, computed, props, utils, parent, breakpoi
           (state.innerWidth < 335 && state.type === 'datetimerange')) &&
         state.displayValue &&
         state.displayValue[1]
-    )
+    ),
+    ariaPanelId: 'panel-' + nanoid.api.nanoid(8)
   })
 
   return state

packages/vue/src/picker/src/pc.vue

@@ -37,6 +37,11 @@
       @mouseenter="handleMouseEnter"
       @mouseleave="state.showClose = false"
       :validate-event="false"
+      role="combobox"
+      aria-haspopup="dialog"
+      aria-autocomplete="none"
+      :aria-owns="state.ariaPanelId"
+      :aria-controls="state.ariaPanelId"
     >
       <template v-if="label" #prefix>
         <tiny-tooltip
@@ -58,9 +63,10 @@
               @mouseleave="state.showClose = false"
               v-if="state.haveTrigger"
               class="baseClearicon"
+              aria-label="clear"
             />
           </transition>
-          <component :is="state.triggerClass" @click="handleFocus" class="tiny-svg-size" />
+          <component :is="state.triggerClass" @click="handleFocus" class="tiny-svg-size" aria-label="calendar" />
         </i>
       </template>
     </tiny-input>
@@ -101,6 +107,11 @@
         @focus="handleFocus"
         tabindex="1"
         class="tiny-range-input"
+        role="combobox"
+        aria-haspopup="dialog"
+        aria-autocomplete="none"
+        :aria-owns="state.ariaPanelId"
+        :aria-controls="state.ariaPanelId"
       />
       <slot name="range-separator">
         <span v-if="typeof rangeSeparator === 'string'" class="tiny-range-separator">{{ rangeSeparator }}</span>
@@ -151,6 +162,10 @@
       @pick="handlePick"
       @select-range="handleSelectRange"
       @select-change="handleSelectChange"
+      role="dialog"
+      aria-modal="false"
+      aria-lable="picker-panel"
+      :id="state.ariaPanelId"
     >
       <template v-if="$slots.footer || $slots.now || $slots.confirm" #footer="scoped">
         <slot name="footer" v-bind="scoped">