Skip to content

fix(modal): [modal] add aria-* attribute #3941

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zzcr merged 2 commits into from
Jan 12, 2026
Merged

fix(modal): [modal] add aria-* attribute #3941

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
21d7426
fix(modal): add aria-* attribute
James-9696 Dec 25, 2025
fa9bc67
fix: modify review comments
James-9696 Jan 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions examples/sites/demos/pc/app/modal/basic-usage.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ test('基本用法', async ({ page }) => {
await page.goto('modal#basic-usage')

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

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

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

// 打开弹窗 2
await page.getByRole('button', { name: '打开弹窗 2' }).click()
await expect(content.nth(2)).toHaveText(/窗口内容2/)
await expect(content).toHaveText(/窗口内容2/)
await page.getByRole('button', { name: '确定' }).click()
})
6 changes: 3 additions & 3 deletions examples/sites/demos/pc/app/modal/modal-footer-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
<div>
<h2>函数式调用</h2>
<div class="content">
<tiny-button @click="btnClick">自定义弹窗底部</tiny-button>
<tiny-button @click="btnClick">函数式自定义弹窗底部</tiny-button>
</div>
<h2>标签式调用</h2>
<div class="content">
<tiny-button @click="openModal">自定义弹窗底部</tiny-button>
<tiny-button @click="openModal">标签式自定义弹窗底部</tiny-button>
<tiny-modal
v-model="show"
type="confirm"
Expand All @@ -20,7 +20,7 @@
</div>
<h2>#foot 插槽</h2>
<div class="content">
<tiny-button @click="openModal_1">自定义弹窗底部</tiny-button>
<tiny-button @click="openModal_1">插槽自定义弹窗底部</tiny-button>
<tiny-modal
v-model="show1"
type="confirm"
Expand Down
13 changes: 9 additions & 4 deletions examples/sites/demos/pc/app/modal/modal-footer.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,18 @@ import { test, expect } from '@playwright/test'
test('自定义弹窗底部', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('modal#modal-footer')
const footer = page.locator('.tiny-modal__footer')
const footer = page.locator('.tiny-modal__footer > .tiny-button--info')
const footerLink = page.locator('.tiny-link--primary')

// 自定义弹窗底部
await page.getByRole('button', { name: '自定义弹窗底部' }).first().click()
await page.getByRole('button', { name: '函数式自定义弹窗底部' }).click()
await expect(footer.first()).toHaveText(/Okk/)
await page.getByRole('button', { name: 'Okk~~' }).click()

await page.getByRole('button', { name: '自定义弹窗底部' }).nth(2).click()
await expect(footer.nth(1)).toHaveText(/返回/)
await page.getByRole('button', { name: '标签式自定义弹窗底部' }).click()
await expect(footer.first()).toHaveText(/Okk/)
await page.getByRole('button', { name: 'Okk~~' }).click()

await page.getByRole('button', { name: '插槽自定义弹窗底部' }).click()
await expect(footerLink.first()).toHaveText(/返回/)
})
6 changes: 3 additions & 3 deletions examples/sites/demos/pc/app/modal/modal-footer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
<div>
<h2>函数式调用</h2>
<div class="content">
<tiny-button @click="btnClick">自定义弹窗底部</tiny-button>
<tiny-button @click="btnClick">函数式自定义弹窗底部</tiny-button>
</div>
<h2>标签式调用</h2>
<div class="content">
<tiny-button @click="openModal">自定义弹窗底部</tiny-button>
<tiny-button @click="openModal">标签式自定义弹窗底部</tiny-button>
<tiny-modal
v-model="show"
type="confirm"
Expand All @@ -20,7 +20,7 @@
</div>
<h2>#foot 插槽</h2>
<div class="content">
<tiny-button @click="openModal_1">自定义弹窗底部</tiny-button>
<tiny-button @click="openModal_1">插槽自定义弹窗底部</tiny-button>
<tiny-modal
v-model="show1"
type="confirm"
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/modal/modal-header.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ test('自定义弹窗标题', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('modal#modal-header')
const demo = page.locator('#modal-header')
const header = page.locator('.tiny-modal__title')
const header = page.locator('.tiny-modal.is__visible')

// 自定义弹窗标题
await demo.getByRole('button', { name: '自定义弹窗标题' }).first().click()
await expect(header.first()).toHaveText(/自定义弹窗标题/)
await expect(header).toHaveText(/自定义弹窗标题/)
await page.getByRole('button', { name: '确定' }).click()
})
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/modal/modal-size.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import { test, expect } from '@playwright/test'
test('弹窗大小全屏', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('modal#modal-size')
const modal = page.locator('.tiny-modal')
const modal = page.locator('.status__question')
Copy link

@coderabbitai coderabbitai bot Dec 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

# First, examine the test file to see the actual changes
head -20 examples/sites/demos/pc/app/modal/modal-size.spec.ts

Repository: opentiny/tiny-vue

Length of output: 178

🏁 Script executed:

# Search for the modal demo HTML/template files
fd -e html -e vue examples/sites/demos/pc/app/modal/ | head -20

Repository: opentiny/tiny-vue

Length of output: 502

🏁 Script executed:

# Search for .status__question selector in the modal demo directory
rg "status.*question|status__question" examples/sites/demos/pc/app/modal/ -B 3 -A 3

Repository: opentiny/tiny-vue

Length of output: 814

🏁 Script executed:

# Corrected fd command to search in modal directory
fd . --full-path 'examples/sites/demos/pc/app/modal/' --type f | grep -E '\.(vue|html|jsx|tsx)$'

Repository: opentiny/tiny-vue

Length of output: 1802

🏁 Script executed:

# Read the entire modal-size.spec.ts file to see context
cat examples/sites/demos/pc/app/modal/modal-size.spec.ts

Repository: opentiny/tiny-vue

Length of output: 727

🏁 Script executed:

# Search for where .status__question class is defined or applied in modal-related files
rg "status__question" examples/sites/demos/pc/app/modal/

Repository: opentiny/tiny-vue

Length of output: 163

🏁 Script executed:

# Check the modal-size.vue demo to see if .status__question class is present
cat examples/sites/demos/pc/app/modal/modal-size.vue

Repository: opentiny/tiny-vue

Length of output: 1490

🏁 Script executed:

# Also check the composition-api version
cat examples/sites/demos/pc/app/modal/modal-size-composition-api.vue

Repository: opentiny/tiny-vue

Length of output: 1375

🏁 Script executed:

# Search for status__question in all modal demo files to understand where it comes from
rg "status__question" examples/sites/demos/pc/app/modal/ -B 5 -A 5

Repository: opentiny/tiny-vue

Length of output: 1133

🏁 Script executed:

# Check the status.vue file since it's likely related to status classes
cat examples/sites/demos/pc/app/modal/status.vue

Repository: opentiny/tiny-vue

Length of output: 3034

🏁 Script executed:

# Also check the status-composition-api version
cat examples/sites/demos/pc/app/modal/status-composition-api.vue

Repository: opentiny/tiny-vue

Length of output: 2874

🏁 Script executed:

# Search for where .status__question class is defined in the component library
rg "status__question" --type vue --type ts --type js -B 3 -A 3 | head -50

Repository: opentiny/tiny-vue

Length of output: 88

🏁 Script executed:

# Check if modal-size demo uses any status class at all
rg "status" examples/sites/demos/pc/app/modal/modal-size.vue examples/sites/demos/pc/app/modal/modal-size-composition-api.vue

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Look at other modal test files to see what selectors they use
fd -e spec.ts --full-path 'examples/sites/demos/pc/app/modal/' | xargs grep -h "locator\|goto" | head -30

Repository: opentiny/tiny-vue

Length of output: 1594

🏁 Script executed:

# Search comprehensively for status__question in the entire codebase
rg "status__question" --type-list

Repository: opentiny/tiny-vue

Length of output: 450

🏁 Script executed:

# Try without type restrictions
rg "status__question"

Repository: opentiny/tiny-vue

Length of output: 396

🏁 Script executed:

# Check if there's a test output or expected markup showing what .status__question should be
rg "question" examples/sites/demos/pc/app/modal/ | grep -v node_modules

Repository: opentiny/tiny-vue

Length of output: 163

🏁 Script executed:

# Let me check what the modal component generates at runtime - look at the Modal component source
fd -e vue -e ts --full-path "packages/*/modal" | head -10

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Check the theme file to see what status classes exist
cat packages/theme/src/modal/index.less | grep -A 5 "status__"

Repository: opentiny/tiny-vue

Length of output: 784

🏁 Script executed:

# Look at the Modal component to see what status values are available
fd -e ts -e js "modal" packages/vue/src | head -20

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Find the modal component implementation
find packages -name "*modal*" -type f | grep -E '\.(ts|js|vue)$' | grep -E 'component|src' | head -20

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Check if modal-size demo ever sets status to "question"
rg "question" examples/sites/demos/pc/app/modal/modal-size.vue examples/sites/demos/pc/app/modal/modal-size-composition-api.vue -i

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Check what classes the actual modal in modal-size demo would have
# Look for the modal structure that would be rendered
rg "type__confirm\|tiny-modal" examples/sites/demos/pc/app/modal/modal-size.vue examples/sites/demos/pc/app/modal/modal-size-composition-api.vue -B 2 -A 2

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Search across all modal test files to see what other selectors target the modal element
rg "locator\(" examples/sites/demos/pc/app/modal/*.spec.ts | grep -i "modal"

Repository: opentiny/tiny-vue

Length of output: 2928

🏁 Script executed:

# Check if there's a way status="question" is set dynamically in modal-size
rg "Modal\.\|status.*=" examples/sites/demos/pc/app/modal/modal-size.vue examples/sites/demos/pc/app/modal/modal-size-composition-api.vue -B 1 -A 1

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Check the status.spec.ts test to confirm what selector it uses
cat examples/sites/demos/pc/app/modal/status.spec.ts | head -20

Repository: opentiny/tiny-vue

Length of output: 856

🏁 Script executed:

# Verify the actual CSS class that gets applied to modals created by Modal.confirm()
rg "type__confirm|status__" packages/theme/src/modal/index.less -B 2 -A 5 | head -40

Repository: opentiny/tiny-vue

Length of output: 1143

🏁 Script executed:

# Confirm what status/type the Modal.confirm() call creates by default
rg "Modal.confirm" packages/vue/src -A 10 | head -30

Repository: opentiny/tiny-vue

Length of output: 2339

🏁 Script executed:

# Check the test more carefully - does line 13 make sense with the selector from line 6?
cat examples/sites/demos/pc/app/modal/modal-size.spec.ts

Repository: opentiny/tiny-vue

Length of output: 727

Selector .status__question is incorrect—modal-size demo never applies this class.

The test creates a modal via Modal.confirm() without a status parameter, so the modal will never have the .status__question class. Use .type__confirm or .tiny-modal.is__visible instead, consistent with other modal tests (e.g., modal-resize.spec.ts, basic-usage.spec.ts).

Also applies to: 13-13

🤖 Prompt for AI Agents 
In examples/sites/demos/pc/app/modal/modal-size.spec.ts around lines 6 and 13,
the test is selecting `.status__question` which is never applied in this demo
(Modal.confirm() is called without a status), so replace those selectors with
the correct ones used by other modal tests — e.g. use `.type__confirm` or the
visible modal selector `.tiny-modal.is__visible` to target the created modal;
update both occurrences to one of these valid selectors so the test reliably
finds the modal.

const box = page.locator('.type__confirm > .tiny-modal__box')
await page.getByRole('button', { name: '自定义弹窗大小' }).first().click()
await expect(box.first()).toHaveCSS('width', '800px')
await page.getByRole('button', { name: '确定' }).click()

await page.getByRole('button', { name: '弹窗全屏' }).first().click()
await expect(modal.nth(2)).toHaveClass(/is__maximize/)
await expect(modal).toHaveClass(/is__maximize/)
await page.getByRole('button', { name: '确定' }).click()
})
37 changes: 22 additions & 15 deletions examples/sites/demos/pc/app/modal/status.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,46 +3,53 @@ import { test, expect } from '@playwright/test'
test('状态和图标', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('modal#status')
const modal = page.locator('.tiny-modal__status-wrapper svg').first()
const message = page.locator('.type__message')
const modal = page.locator(
'.tiny-modal__wrapper.is__visible > .tiny-modal__box > .tiny-modal__header > .tiny-modal__status-wrapper > svg'
)
const message = page.locator('.type__message.is__visible')

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

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

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

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

// 加载提示图标
await page.getByRole('button', { name: '加载提示图标' }).first().click()
await expect(modal).toHaveClass(/tiny-modal-svg__refresh/)
await page.getByRole('button', { name: '确定' }).click()

// ----消息状态示例----
await page.getByRole('button', { name: '信息提示图标' }).nth(1).click()
await expect(message).toHaveClass(/status__info/)

// ----消息状态示例----
await page.getByRole('button', { name: '成功提示图标' }).nth(1).click()
await expect(message.nth(1)).toHaveClass(/status__success/)

// ----消息状态示例----
await page.getByRole('button', { name: '警告提示图标' }).nth(1).click()
await expect(message.nth(2)).toHaveClass(/status__warning/)

// ----消息状态示例----
await page.getByRole('button', { name: '错误提示图标' }).nth(1).click()
await expect(message.nth(3)).toHaveClass(/status__error/)

// ----消息状态示例----
await page.getByRole('button', { name: '加载提示图标' }).nth(1).click()
await expect(message).toHaveClass(/status__loading/)
await expect(message.nth(4)).toHaveClass(/status__loading/)
Comment on lines +36 to +54
Copy link

@coderabbitai coderabbitai bot Dec 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# First, let's read the test file to understand the full context
cat -n examples/sites/demos/pc/app/modal/status.spec.ts

Repository: opentiny/tiny-vue

Length of output: 2593

🏁 Script executed:

# Search for message implementation with duration/timeout
fd -e 'ts' -e 'js' -e 'tsx' -e 'jsx' packages/vue/src -type f | xargs grep -l "type.*message" | head -10

Repository: opentiny/tiny-vue

Length of output: 231

🏁 Script executed:

# Search for message component or factory that might handle auto-dismiss
find packages/vue/src -name "*message*" -type f

Repository: opentiny/tiny-vue

Length of output: 107

🏁 Script executed:

# Look for duration property in message-related code
rg "duration" packages/vue/src --type ts --type js -B 3 -A 3 | grep -i message -A 3 -B 3 | head -50

Repository: opentiny/tiny-vue

Length of output: 1558

🏁 Script executed:

# Check the modal implementation
head -200 packages/vue/src/modal/src/index.ts

Repository: opentiny/tiny-vue

Length of output: 3270

🏁 Script executed:

# Look for duration-related logic in modal
rg "duration" packages/vue/src/modal/src/index.ts -B 2 -A 5

Repository: opentiny/tiny-vue

Length of output: 317

🏁 Script executed:

# Find the setup implementation for modal
find packages/vue/src/modal -name "*.ts" -o -name "*.tsx" -o -name "*.js" | grep -v test | grep -v __tests__

Repository: opentiny/tiny-vue

Length of output: 128

🏁 Script executed:

# Search for where duration is used in the modal component
rg "duration" packages/vue/src/modal -B 3 -A 3 --type-list

Repository: opentiny/tiny-vue

Length of output: 450

🏁 Script executed:

# Search for where duration is used in the modal component
rg "duration" packages/vue/src/modal -B 3 -A 3

Repository: opentiny/tiny-vue

Length of output: 3183

🏁 Script executed:

# Look at the full duration test to understand the auto-dismiss behavior
sed -n '60,80p' packages/vue/src/modal/__tests__/modal.test.tsx

Repository: opentiny/tiny-vue

Length of output: 560

🏁 Script executed:

# Search for the actual implementation that handles auto-dismiss (likely onMounted or watch)
rg "onMounted\|onBeforeUnmount\|watch\|setTimeout" packages/vue/src/modal/src/pc.vue -B 2 -A 8 | head -100

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Look for the modal setup logic - check what $setup does
rg "\$setup" packages/vue/src/modal/src/index.ts -B 5 -A 5

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Check if there's a setup.ts or similar file
find packages/vue/src/modal -name "*setup*" -type f

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Look for JavaScript/TypeScript implementation files in modal
ls -la packages/vue/src/modal/src/

Repository: opentiny/tiny-vue

Length of output: 357

🏁 Script executed:

# Read the pc.vue implementation to find duration-based auto-dismiss logic
cat -n packages/vue/src/modal/src/pc.vue

Repository: opentiny/tiny-vue

Length of output: 13871

🏁 Script executed:

# Look for the renderless modal implementation
find . -path "*/vue-renderless/modal*" -type f 2>/dev/null | head -20

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Search for renderless modal in node_modules or source
rg "vue-renderless/modal" packages/vue/src -l

Repository: opentiny/tiny-vue

Length of output: 170

🏁 Script executed:

# Find the renderless implementation in the repo
find . -name "modal" -type d | grep -i renderless

Repository: opentiny/tiny-vue

Length of output: 92

🏁 Script executed:

# Check if renderless is a separate package directory
ls -la packages/ | grep renderless

Repository: opentiny/tiny-vue

Length of output: 122

🏁 Script executed:

# Search for where the modal duration auto-dismiss might be implemented
rg "setTimeout\|setInterval" packages/ -l --max-count 5 | grep -i modal

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Check the renderless modal implementation
ls -la packages/renderless/src/modal/

Repository: opentiny/tiny-vue

Length of output: 298

🏁 Script executed:

# Look for the modal setup logic in renderless
find packages/renderless/src/modal -name "*.ts" -o -name "*.js"

Repository: opentiny/tiny-vue

Length of output: 136

🏁 Script executed:

# Check the vue.ts file for duration handling
cat -n packages/renderless/src/modal/vue.ts

Repository: opentiny/tiny-vue

Length of output: 5317

🏁 Script executed:

# Search for duration in the renderless modal implementation
rg "duration" packages/renderless/src/modal/ -B 3 -A 10

Repository: opentiny/tiny-vue

Length of output: 1921

🏁 Script executed:

# Get more context around the duration setTimeout calls
sed -n '1,150p' packages/renderless/src/modal/index.ts | tail -80

Repository: opentiny/tiny-vue

Length of output: 2167

🏁 Script executed:

# Get the specific section with the first duration setTimeout
sed -n '200,300p' packages/renderless/src/modal/index.ts

Repository: opentiny/tiny-vue

Length of output: 2797

🏁 Script executed:

# Look for the mouseEnterEvent and mouseLeaveEvent handlers
rg "mouseEnterEvent|mouseLeaveEvent" packages/renderless/src/modal/index.ts -B 2 -A 10

Repository: opentiny/tiny-vue

Length of output: 444

Add explicit timing controls to avoid race conditions between auto-dismiss and assertions.

Messages auto-dismiss after duration (default 3000ms) and pause on hover. However, the rapid succession of button clicks (lines 36-54) creates a race condition: assertions on accumulated messages may fail if the auto-dismiss timer fires before they complete. Consider either:

  • Adding explicit waits (await page.waitForTimeout()) between test blocks
  • Using await expect().toHaveClass() with explicit polling or timeout options
  • Waiting for messages to dismiss between assertions if testing them individually
🤖 Prompt for AI Agents 
In examples/sites/demos/pc/app/modal/status.spec.ts around lines 36-54, the test
clicks several buttons in rapid succession which can race with the messages'
auto-dismiss timers; update the test to add explicit timing controls by
inserting short awaits between actions (e.g., await page.waitForTimeout(200-500)
after each click) or by using expect with explicit timeout/polling (e.g., await
expect(message.nth(i)).toHaveClass(..., { timeout: 2000 })) and/or wait for each
message to be dismissed before proceeding; ensure each assertion waits long
enough for the message to appear and stabilise to avoid flakiness.

})
15 changes: 13 additions & 2 deletions packages/vue/src/modal/src/pc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,10 @@ export default defineComponent({
h(
'div',
{
role: 'dialog',
'aria-modal': 'true',
'aria-labelledby': 'modal_unique_0',
'aria-describedby': 'modal_unique_1',
class: 'tiny-modal__box',
style: state.boxStyle,
ref: 'modalBox',
Expand Down Expand Up @@ -187,6 +191,7 @@ export default defineComponent({
[
typeof status === 'string'
? h(STATUS_MAPPING_COMPINENT[status.toUpperCase()], {
'aria-label': `${constants.STATUS_MAPPING_CLASSS[status.toUpperCase()] || 'default'}-circle`,
class: [constants.STATUS_MAPPING_CLASSS[status.toUpperCase()]]
})
: h(status, {
Expand All @@ -199,13 +204,15 @@ export default defineComponent({
? h(
'span',
{
class: 'tiny-modal__title'
class: 'tiny-modal__title',
id: 'modal_unique_0'
},
title || t('ui.alert.title')
)
: null,
resize
? h(zoomLocat ? iconMinscreenRight() : iconFullscreenRight(), {
'aria-label': 'Zoom',
class: ['tiny-modal__zoom-btn', 'trigger__btn'],
on: {
click: this.toggleZoomEvent
Expand All @@ -214,6 +221,7 @@ export default defineComponent({
: null,
showClose
? h(iconClose(), {
'aria-label': 'Close',
class: ['tiny-modal__close-btn', 'trigger__btn'],
on: {
click: this.closeEvent
Expand All @@ -238,6 +246,7 @@ export default defineComponent({
[
typeof status === 'string'
? h(STATUS_MAPPING_COMPINENT[status.toUpperCase()], {
'aria-label': `${constants.STATUS_MAPPING_CLASSS[status.toUpperCase()] || 'default'}-message-circle`,
class: [constants.STATUS_MAPPING_CLASSS[status.toUpperCase()]]
})
: h(status, {
Expand All @@ -249,7 +258,8 @@ export default defineComponent({
h(
'div',
{
class: 'tiny-modal__content'
class: 'tiny-modal__content',
id: 'modal_unique_1'
},
defaultSlot
? [defaultSlot.call(this, { $modal: this }, h)]
Expand All @@ -269,6 +279,7 @@ export default defineComponent({
},
[
h(iconClose(), {
'aria-label': 'Close',
class: ['tiny-modal__close-btn'],
on: {
click: this.closeEvent
Expand Down
Loading