fix : scroll-lock empilable, contenteditable focusable et tests focus-trap du MalioDrawer

This commit is contained in:
2026-05-21 16:44:46 +02:00
parent e7af92808f
commit 527766ab4c
2 changed files with 72 additions and 4 deletions

View File

@@ -263,4 +263,48 @@ describe('MalioDrawer', () => {
wrapper.unmount()
trigger.remove()
})
it('moves focus to the close button on open (default showClose)', async () => {
const wrapper = mount(DrawerForTest, {
props: { modelValue: false, showClose: true },
attachTo: document.body,
global: { stubs: { Teleport: true } },
})
await wrapper.setProps({ modelValue: true })
await wrapper.vm.$nextTick()
expect(document.activeElement).toBe(wrapper.find('[data-test="close-button"]').element)
wrapper.unmount()
})
it('wraps focus to the first element when Tab is pressed on the last element', async () => {
const wrapper = mount(DrawerForTest, {
props: { modelValue: true, showClose: false },
slots: { default: '<button data-test="btn1">First</button><button data-test="btn2">Last</button>' },
attachTo: document.body,
global: { stubs: { Teleport: true } },
})
await wrapper.vm.$nextTick()
const last = wrapper.find('[data-test="btn2"]').element as HTMLElement
last.focus()
expect(document.activeElement).toBe(last)
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Tab' })
expect(document.activeElement).toBe(wrapper.find('[data-test="btn1"]').element)
wrapper.unmount()
})
it('wraps focus to the last element when Shift+Tab is pressed on the first element', async () => {
const wrapper = mount(DrawerForTest, {
props: { modelValue: true, showClose: false },
slots: { default: '<button data-test="btn1">First</button><button data-test="btn2">Last</button>' },
attachTo: document.body,
global: { stubs: { Teleport: true } },
})
await wrapper.vm.$nextTick()
const first = wrapper.find('[data-test="btn1"]').element as HTMLElement
first.focus()
expect(document.activeElement).toBe(first)
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Tab', shiftKey: true })
expect(document.activeElement).toBe(wrapper.find('[data-test="btn2"]').element)
wrapper.unmount()
})
})