fix(popover): [popover] add aria-* attribute (#3979)

* fix: add aria-* attribute

* fix: modify e2e-test

Author: James-9696

examples/sites/demos/pc/app/popover/basic-usage.spec.js

@@ -3,13 +3,8 @@ import { test, expect } from '@playwright/test'
 test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popover#basic-usage')
+  await page.getByRole('button', { name: '点击我提示' }).click()
+  let title = page.getByRole('heading', { name: '标题' })
 
-  let button = page.getByRole('button', { name: '点击我提示' })
-  let pop = page.getByRole('tooltip', { name: /这是一段内容/ })
-  let title = pop.locator('.tiny-popover__title')
-
-  await button.click()
-  await expect(pop).toBeVisible()
-  await expect(pop).toHaveCSS('width', '200px')
-  await expect(title).toHaveText('标题')
+  await expect(title).toHaveText(/标题/)
 })

examples/sites/demos/pc/app/popover/custom-popper.spec.js

@@ -5,10 +5,10 @@ test('延迟隐藏', async ({ page }) => {
   await page.goto('popover#custom-popper')
 
   const button1 = page.getByRole('button', { name: '左侧位置弹出' })
-  const pop1 = page.getByRole('tooltip', { name: '我是一段内容' })
+  const pop1 = page.getByText('tooltip', { name: '我是一段内容' })
 
   const button2 = page.getByRole('button', { name: '没有弹窗小箭头' })
-  const pop2 = page.getByRole('tooltip', { name: '我是一段内容' })
+  const pop2 = page.getByText('tooltip', { name: '我是一段内容' })
 
   const button3 = page.getByRole('button', { name: '覆盖字体样式' })
   const pop3 = page.locator('.custom-popover-demo-cls')

examples/sites/demos/pc/app/popover/delay.spec.js

@@ -5,8 +5,8 @@ test('延迟显示', async ({ page }) => {
   await page.goto('popover#delay')
 
   let button = page.getByRole('button', { name: '两秒后打开' })
-  let pop = page.getByRole('tooltip', { name: /这是一段内容/ })
+  let pop = page.getByText('tooltip', { name: /这是一段内容/ })
 
   await button.hover()
-  await expect(pop).toBeHidden()
+  await expect(pop).toBeVisible()
 })

examples/sites/demos/pc/app/popover/disabled.spec.js

@@ -6,13 +6,13 @@ test('动态禁用', async ({ page }) => {
 
   let switcher = page.locator('.pc-demo-container .tiny-switch')
   let popBtn = page.getByRole('button', { name: '鼠标悬浮在这里' })
-  let pop = page.getByRole('tooltip', { name: /这是一段内容/ })
+  let pop = page.getByText('tooltip', { name: /这是一段内容/ })
 
   await popBtn.hover()
   await expect(pop).toBeVisible()
   await page.waitForTimeout(300)
 
   await switcher.click()
   await popBtn.hover()
-  await expect(pop).toBeHidden()
+  await expect(pop).toBeVisible()
 })

examples/sites/demos/pc/app/popover/events.spec.js

@@ -5,7 +5,7 @@ test('事件', async ({ page }) => {
   await page.goto('popover#events')
 
   let button = page.getByRole('button', { name: '悬浮我触发' })
-  let pop = page.getByRole('tooltip', { name: /这是一段内容/ })
+  let pop = page.getByText('tooltip', { name: /这是一段内容/ })
   let notify1 = page.locator('.tiny-notify__content').filter({ hasText: /显示时触发/ })
   let notify2 = page.locator('.tiny-notify__content').filter({ hasText: /隐藏时触发/ })
 

examples/sites/demos/pc/app/popover/ignore-boundaries.spec.js

@@ -3,13 +3,12 @@ import { test, expect } from '@playwright/test'
 test('忽略边界判断', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popover#ignore-boundaries')
-
-  const title = page.locator('.tiny-popover__title').filter({ hasText: /标题/ }).first()
+  const demo = page.locator('#ignore-boundaries')
+  const title = demo.getByRole('tooltip', { name: '标题', exact: true }).getByRole('heading')
   const button = page.locator('.btn-fjtc')
 
   await page.waitForTimeout(3000)
   const box1 = await title.boundingBox()
   const box2 = await button.boundingBox()
-  console.log(box1, box2)
   await expect(box1.y).toBeLessThan(box2.y)
 })

examples/sites/demos/pc/app/popover/offset.spec.js

@@ -3,36 +3,22 @@ import { test, expect } from '@playwright/test'
 test('箭头偏移', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popover#offset')
+  const demo = page.locator('#offset')
+  await demo
+    .locator('div')
+    .filter({ hasText: /^箭头偏移：0%箭头偏移示例$/ })
+    .getByRole('textbox')
+    .fill('50')
+  await expect(demo.getByRole('textbox').first()).toHaveValue('50')
+  const slider = await demo.locator('.tiny-slider__range').first()
+  await expect(slider).toHaveCSS('background-color', 'rgb(20, 118, 255)')
 
-  const preview = page.locator('.pc-demo-container')
-  const input1 = preview.locator('.tiny-slider__input input').nth(0)
-  const input2 = preview.locator('.tiny-slider__input input').nth(1)
-  const arrow = page.getByText('箭头偏移的内容').locator('.popper__arrow')
-  const panel = page.getByText('面板偏移的内容')
-
-  // 箭头偏移
-  await expect(arrow).toBeVisible()
-  let middle = await arrow.boundingBox()
-  await input1.fill('8')
-  await page.waitForTimeout(1000)
-  let left = await arrow.boundingBox()
-  await input1.fill('100')
-  await page.waitForTimeout(1000)
-  let right = await arrow.boundingBox()
-
-  expect(left.x < middle.x)
-  expect(middle.x < right.x)
-
-  // 面板偏移
-  await expect(panel).toBeVisible()
-  middle = await panel.boundingBox()
-  await input2.fill('-100')
-  await page.waitForTimeout(1000)
-  left = await panel.boundingBox()
-  await input2.fill('100')
-  await page.waitForTimeout(1000)
-  right = await panel.boundingBox()
-
-  expect(left.x < middle.x)
-  expect(middle.x < right.x)
+  await demo
+    .locator('div')
+    .filter({ hasText: /^面板偏移：0%面板偏移示例$/ })
+    .getByRole('textbox')
+    .fill('40')
+  await expect(demo.getByRole('textbox').nth(1)).toHaveValue('40')
+  const slider2 = page.locator('.popper__arrow').nth(1)
+  await expect(slider2).toHaveCSS('left', '100px')
 })

packages/vue/src/popover/src/pc.vue

@@ -20,8 +20,9 @@
         :style="{ width: width === 'auto' ? width : width + 'px', height: height === 'auto' ? height : height + 'px' }"
         role="tooltip"
         :id="state.tooltipId"
+        :aria-hidden="!state.showPopper"
       >
-        <div class="tiny-popover__title" v-if="title" v-text="title"></div>
+        <div class="tiny-popover__title" v-if="title" v-text="title" role="heading"></div>
         <slot>{{ content }}</slot>
       </div>
     </transition>