Skip to content

Commit 21d7426

Browse files
James-9696James-9696
committed
fix(modal): add aria-* attribute
1 parent f018f4f commit 21d7426

File tree

8 files changed

+57
-34
lines changed

8 files changed

+57
-34
lines changed

‎examples/sites/demos/pc/app/modal/basic-usage.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ test('基本用法', async ({ page }) => {
55
await page.goto('modal#basic-usage')
66

77
const modal = page.locator('.tiny-modal__status-wrapper svg').first()
8-
const content = page.locator('.tiny-modal__content')
8+
const content = page.locator('.tiny-modal.type__alert.is__visible')
99

1010
// 基本提示框
1111
await page.getByRole('button', { name: '基本提示框' }).click()
@@ -24,11 +24,11 @@ test('基本用法', async ({ page }) => {
2424

2525
// 打开弹窗 1
2626
await page.getByRole('button', { name: '打开弹窗 1' }).click()
27-
await expect(content.nth(1)).toHaveText(/窗口内容1/)
27+
await expect(content).toHaveText(/窗口内容1/)
2828
await page.getByRole('button', { name: '确定' }).click()
2929

3030
// 打开弹窗 2
3131
await page.getByRole('button', { name: '打开弹窗 2' }).click()
32-
await expect(content.nth(2)).toHaveText(/窗口内容2/)
32+
await expect(content).toHaveText(/窗口内容2/)
3333
await page.getByRole('button', { name: '确定' }).click()
3434
})

‎examples/sites/demos/pc/app/modal/modal-footer-composition-api.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
<div>
33
<h2>函数式调用</h2>
44
<div class="content">
5-
<tiny-button @click="btnClick">自定义弹窗底部</tiny-button>
5+
<tiny-button @click="btnClick">函数式自定义弹窗底部</tiny-button>
66
</div>
77
<h2>标签式调用</h2>
88
<div class="content">
9-
<tiny-button @click="openModal">自定义弹窗底部</tiny-button>
9+
<tiny-button @click="openModal">标签式自定义弹窗底部</tiny-button>
1010
<tiny-modal
1111
v-model="show"
1212
type="confirm"
@@ -20,7 +20,7 @@
2020
</div>
2121
<h2>#foot 插槽</h2>
2222
<div class="content">
23-
<tiny-button @click="openModal_1">自定义弹窗底部</tiny-button>
23+
<tiny-button @click="openModal_1">插槽自定义弹窗底部</tiny-button>
2424
<tiny-modal
2525
v-model="show1"
2626
type="confirm"

‎examples/sites/demos/pc/app/modal/modal-footer.spec.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,18 @@ import { test, expect } from '@playwright/test'
33
test('自定义弹窗底部', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('modal#modal-footer')
6-
const footer = page.locator('.tiny-modal__footer')
6+
const footer = page.locator('.tiny-modal__footer > .tiny-button--info')
7+
const footerLink = page.locator('.tiny-link--primary')
78

89
// 自定义弹窗底部
9-
await page.getByRole('button', { name: '自定义弹窗底部' }).first().click()
10+
await page.getByRole('button', { name: '函数式自定义弹窗底部' }).click()
1011
await expect(footer.first()).toHaveText(/Okk/)
1112
await page.getByRole('button', { name: 'Okk~~' }).click()
1213

13-
await page.getByRole('button', { name: '自定义弹窗底部' }).nth(2).click()
14-
await expect(footer.nth(1)).toHaveText(/返回/)
14+
await page.getByRole('button', { name: '标签式自定义弹窗底部' }).click()
15+
await expect(footer.first()).toHaveText(/Okk/)
16+
await page.getByRole('button', { name: 'Okk~~' }).click()
17+
18+
await page.getByRole('button', { name: '插槽自定义弹窗底部' }).click()
19+
await expect(footerLink.first()).toHaveText(/返回/)
1520
})

‎examples/sites/demos/pc/app/modal/modal-footer.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
<div>
33
<h2>函数式调用</h2>
44
<div class="content">
5-
<tiny-button @click="btnClick">自定义弹窗底部</tiny-button>
5+
<tiny-button @click="btnClick">函数式自定义弹窗底部</tiny-button>
66
</div>
77
<h2>标签式调用</h2>
88
<div class="content">
9-
<tiny-button @click="openModal">自定义弹窗底部</tiny-button>
9+
<tiny-button @click="openModal">标签式自定义弹窗底部</tiny-button>
1010
<tiny-modal
1111
v-model="show"
1212
type="confirm"
@@ -20,7 +20,7 @@
2020
</div>
2121
<h2>#foot 插槽</h2>
2222
<div class="content">
23-
<tiny-button @click="openModal_1">自定义弹窗底部</tiny-button>
23+
<tiny-button @click="openModal_1">插槽自定义弹窗底部</tiny-button>
2424
<tiny-modal
2525
v-model="show1"
2626
type="confirm"

‎examples/sites/demos/pc/app/modal/modal-header.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ test('自定义弹窗标题', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('modal#modal-header')
66
const demo = page.locator('#modal-header')
7-
const header = page.locator('.tiny-modal__title')
7+
const header = page.locator('.tiny-modal.is__visible')
88

99
// 自定义弹窗标题
1010
await demo.getByRole('button', { name: '自定义弹窗标题' }).first().click()
11-
await expect(header.first()).toHaveText(/自定义弹窗标题/)
11+
await expect(header).toHaveText(/自定义弹窗标题/)
1212
await page.getByRole('button', { name: '确定' }).click()
1313
})

‎examples/sites/demos/pc/app/modal/modal-size.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import { test, expect } from '@playwright/test'
33
test('弹窗大小全屏', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('modal#modal-size')
6-
const modal = page.locator('.tiny-modal')
6+
const modal = page.locator('.status__question')
77
const box = page.locator('.type__confirm > .tiny-modal__box')
88
await page.getByRole('button', { name: '自定义弹窗大小' }).first().click()
99
await expect(box.first()).toHaveCSS('width', '800px')
1010
await page.getByRole('button', { name: '确定' }).click()
1111

1212
await page.getByRole('button', { name: '弹窗全屏' }).first().click()
13-
await expect(modal.nth(2)).toHaveClass(/is__maximize/)
13+
await expect(modal).toHaveClass(/is__maximize/)
1414
await page.getByRole('button', { name: '确定' }).click()
1515
})

‎examples/sites/demos/pc/app/modal/status.spec.ts‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,46 +3,53 @@ import { test, expect } from '@playwright/test'
33
test('状态和图标', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('modal#status')
6-
const modal = page.locator('.tiny-modal__status-wrapper svg').first()
7-
const message = page.locator('.type__message')
6+
const modal = page.locator(
7+
'.tiny-modal__wrapper.is__visible > .tiny-modal__box > .tiny-modal__header > .tiny-modal__status-wrapper > svg'
8+
)
9+
const message = page.locator('.type__message.is__visible')
810

911
// 信息提示图标
1012
await page.getByRole('button', { name: '信息提示图标' }).first().click()
1113
await expect(modal).toHaveClass(/tiny-modal-svg__info/)
1214
await page.getByRole('button', { name: '确定' }).click()
13-
// ----消息状态示例----
14-
await page.getByRole('button', { name: '信息提示图标' }).nth(1).click()
15-
await expect(message).toHaveClass(/status__info/)
1615

1716
// 成功提示图标
1817
await page.getByRole('button', { name: '成功提示图标' }).first().click()
1918
await expect(modal).toHaveClass(/tiny-modal-svg__success/)
2019
await page.getByRole('button', { name: '确定' }).click()
21-
// ----消息状态示例----
22-
await page.getByRole('button', { name: '成功提示图标' }).nth(1).click()
23-
await expect(message).toHaveClass(/status__success/)
2420

2521
// 警告提示图标
2622
await page.getByRole('button', { name: '警告提示图标' }).first().click()
2723
await expect(modal).toHaveClass(/tiny-modal-svg__warning/)
2824
await page.getByRole('button', { name: '确定' }).click()
29-
// ----消息状态示例----
30-
await page.getByRole('button', { name: '警告提示图标' }).nth(1).click()
31-
await expect(message).toHaveClass(/status__warning/)
3225

3326
// 错误提示图标
3427
await page.getByRole('button', { name: '错误提示图标' }).first().click()
3528
await expect(modal).toHaveClass(/tiny-svg tiny-modal-svg__error/)
3629
await page.getByRole('button', { name: '确定' }).click()
37-
// ----消息状态示例----
38-
await page.getByRole('button', { name: '错误提示图标' }).nth(1).click()
39-
await expect(message).toHaveClass(/status__error/)
4030

4131
// 加载提示图标
4232
await page.getByRole('button', { name: '加载提示图标' }).first().click()
4333
await expect(modal).toHaveClass(/tiny-modal-svg__refresh/)
4434
await page.getByRole('button', { name: '确定' }).click()
35+
36+
// ----消息状态示例----
37+
await page.getByRole('button', { name: '信息提示图标' }).nth(1).click()
38+
await expect(message).toHaveClass(/status__info/)
39+
40+
// ----消息状态示例----
41+
await page.getByRole('button', { name: '成功提示图标' }).nth(1).click()
42+
await expect(message.nth(1)).toHaveClass(/status__success/)
43+
44+
// ----消息状态示例----
45+
await page.getByRole('button', { name: '警告提示图标' }).nth(1).click()
46+
await expect(message.nth(2)).toHaveClass(/status__warning/)
47+
48+
// ----消息状态示例----
49+
await page.getByRole('button', { name: '错误提示图标' }).nth(1).click()
50+
await expect(message.nth(3)).toHaveClass(/status__error/)
51+
4552
// ----消息状态示例----
4653
await page.getByRole('button', { name: '加载提示图标' }).nth(1).click()
47-
await expect(message).toHaveClass(/status__loading/)
54+
await expect(message.nth(4)).toHaveClass(/status__loading/)
4855
})

‎packages/vue/src/modal/src/pc.vue‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,10 @@ export default defineComponent({
160160
h(
161161
'div',
162162
{
163+
role: 'dialog',
164+
'aria-modal': 'true',
165+
'aria-labelledby': 'modal_unique_0',
166+
'aria-describedby': 'modal_unique_1',
163167
class: 'tiny-modal__box',
164168
style: state.boxStyle,
165169
ref: 'modalBox',
@@ -187,6 +191,7 @@ export default defineComponent({
187191
[
188192
typeof status === 'string'
189193
? h(STATUS_MAPPING_COMPINENT[status.toUpperCase()], {
194+
'aria-label': `${constants.STATUS_MAPPING_CLASSS[status.toUpperCase()] || 'default'}-circle`,
190195
class: [constants.STATUS_MAPPING_CLASSS[status.toUpperCase()]]
191196
})
192197
: h(status, {
@@ -199,13 +204,15 @@ export default defineComponent({
199204
? h(
200205
'span',
201206
{
202-
class: 'tiny-modal__title'
207+
class: 'tiny-modal__title',
208+
id: 'modal_unique_0'
203209
},
204210
title || t('ui.alert.title')
205211
)
206212
: null,
207213
resize
208214
? h(zoomLocat ? iconMinscreenRight() : iconFullscreenRight(), {
215+
'aria-label': 'Zoom',
209216
class: ['tiny-modal__zoom-btn', 'trigger__btn'],
210217
on: {
211218
click: this.toggleZoomEvent
@@ -214,6 +221,7 @@ export default defineComponent({
214221
: null,
215222
showClose
216223
? h(iconClose(), {
224+
'aria-label': 'Close',
217225
class: ['tiny-modal__close-btn', 'trigger__btn'],
218226
on: {
219227
click: this.closeEvent
@@ -238,6 +246,7 @@ export default defineComponent({
238246
[
239247
typeof status === 'string'
240248
? h(STATUS_MAPPING_COMPINENT[status.toUpperCase()], {
249+
'aria-label': `${constants.STATUS_MAPPING_CLASSS[status.toUpperCase()] || 'default'}-message-circle`,
241250
class: [constants.STATUS_MAPPING_CLASSS[status.toUpperCase()]]
242251
})
243252
: h(status, {
@@ -249,7 +258,8 @@ export default defineComponent({
249258
h(
250259
'div',
251260
{
252-
class: 'tiny-modal__content'
261+
class: 'tiny-modal__content',
262+
id: 'modal_unique_1'
253263
},
254264
defaultSlot
255265
? [defaultSlot.call(this, { $modal: this }, h)]
@@ -269,6 +279,7 @@ export default defineComponent({
269279
},
270280
[
271281
h(iconClose(), {
282+
'aria-label': 'Close',
272283
class: ['tiny-modal__close-btn'],
273284
on: {
274285
click: this.closeEvent

0 commit comments

Comments
 (0)