SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

fix(dialog): honor reduced motion over state animations

Browse source
This commit is contained in:
Danila Poyarkov 2026-09-10 22:40:19 +03:00
parent d3b8942dcc
commit cc99e6ecb3
2 changed files with 27 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/theme/dialog/index.ts
View file

@ -1,5 +1,5 @@
const dialogMotion =
'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:duration-180 data-[state=open]:ease-out data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-120 data-[state=closed]:ease-in motion-reduce:animate-none'
'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:duration-180 data-[state=open]:ease-out data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-120 data-[state=closed]:ease-in motion-reduce:data-[state=open]:animate-none motion-reduce:data-[state=closed]:animate-none'
export default {
slots: {

26
tests/e2e/settings/model-editor.spec.ts
View file

@ -30,6 +30,32 @@ test('model editing keeps the Settings shell stable and isolates the form', asyn
expect(await dialog.boundingBox()).toEqual(before)
})
for (const reducedMotion of ['reduce', 'no-preference'] as const) {
test(`model editing restores focus across repeated transitions with ${reducedMotion} motion`, async ({
page
}) => {
await page.emulateMedia({ reducedMotion })
await page.setViewportSize({ width: 900, height: 700 })
await page.goto('/?test')
await new CanvasHelper(page).waitForInit()
await page.getByTestId('app-settings-trigger').click()
await page.getByTestId('settings-section-ai').click()
const dialog = page.getByTestId('app-settings-dialog')
if (reducedMotion === 'reduce') await expect(dialog).toHaveCSS('animation-name', 'none')
const add = page.getByTestId('settings-add-model')
for (let attempt = 0; attempt < 3; attempt++) {
await add.click()
const editor = page.getByTestId('settings-model-editor')
await expect(editor.locator('input').first()).toBeFocused()
await editor.getByRole('button', { name: 'Cancel', exact: true }).click()
await expect(add).toBeFocused()
await expect(dialog.getByRole('tabpanel')).toHaveCount(1)
}
await page.getByTestId('app-settings-done').click()
await expect(dialog).not.toBeVisible()
})
}
test('page rows keep the same compact height while renaming', async ({ page }) => {
await page.goto('/?test')
await new CanvasHelper(page).waitForInit()