diff --git a/app/components/malio/accordion/Accordion.test.ts b/app/components/malio/accordion/Accordion.test.ts index 7640cb2..a97892f 100644 --- a/app/components/malio/accordion/Accordion.test.ts +++ b/app/components/malio/accordion/Accordion.test.ts @@ -134,3 +134,61 @@ describe('MalioAccordion — mode single & contrôlé', () => { expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['prix']]) }) }) + +describe('MalioAccordion — defaultOpen, disabled & clavier', () => { + const WITH_DEFAULT_OPEN = ` +

P

+

C

+ ` + const WITH_DISABLED = ` +

P

+

C

+ ` + + it('opens defaultOpen items initially in uncontrolled mode', async () => { + const wrapper = mountAccordion({}, WITH_DEFAULT_OPEN) + await nextTick() + const headers = wrapper.findAll('button[aria-expanded]') + expect(headers[0].attributes('aria-expanded')).toBe('false') + expect(headers[1].attributes('aria-expanded')).toBe('true') + }) + + it('sets disabled and aria-disabled on a disabled item', () => { + const wrapper = mountAccordion({}, WITH_DISABLED) + const headers = wrapper.findAll('button[aria-expanded]') + expect(headers[1].attributes('disabled')).toBeDefined() + expect(headers[1].attributes('aria-disabled')).toBe('true') + }) + + it('does not toggle a disabled item on click', async () => { + const wrapper = mountAccordion({}, WITH_DISABLED) + const headers = wrapper.findAll('button[aria-expanded]') + await headers[1].trigger('click') + expect(headers[1].attributes('aria-expanded')).toBe('false') + expect(wrapper.emitted('update:modelValue')).toBeUndefined() + }) + + it('moves focus to the next header on ArrowDown', async () => { + const root = document.createElement('div') + document.body.appendChild(root) + const wrapper = mountAccordion({}, TWO_ITEMS, root) + const headers = wrapper.findAll('button[aria-expanded]') + ;(headers[0].element as HTMLElement).focus() + await headers[0].trigger('keydown', {key: 'ArrowDown'}) + expect(document.activeElement).toBe(headers[1].element) + wrapper.unmount() + root.remove() + }) + + it('wraps focus to the first header on ArrowDown from the last', async () => { + const root = document.createElement('div') + document.body.appendChild(root) + const wrapper = mountAccordion({}, TWO_ITEMS, root) + const headers = wrapper.findAll('button[aria-expanded]') + ;(headers[1].element as HTMLElement).focus() + await headers[1].trigger('keydown', {key: 'ArrowDown'}) + expect(document.activeElement).toBe(headers[0].element) + wrapper.unmount() + root.remove() + }) +})