q2-tecton-elements 1.50.1 → 1.51.1

package/dist/collection/components/q2-option-list/test/q2-option-list-test.e2e.js

@@ -22,21 +22,6 @@ describe('q2-option-list', () => {
         const page = await setup({ html: '<q2-option-list></q2-option-list>' });
         expect(await getListOfStyleCompilationIssues(page, 'q2-option-list')).toHaveLength(0);
     });
-    describe('[A11y] guideline compliance', () => {
-        it('Does not have accessibility violations with only label', async () => {
-            const page = await setup({
-                html: `
-                    <q2-option-list>
-                        <q2-option value="1">Option 1</q2-option>
-                        <q2-option value="2">Option 2</q2-option>
-                        <q2-option value="3">Option 3</q2-option>
-                    </q2-option-list>
-                `,
-            });
-            const hasViolations = await evaluateA11y(page);
-            expect(hasViolations).toBe(false);
-        });
-    });
     describe('Selecting options', () => {
         it('emits change event and selects option', async function () {
             page = await setup({
@@ -495,445 +480,470 @@ describe('q2-option-list', () => {
             expect(await getFocusedValue(page)).toEqual('1');
         });
     });
-    describe('Keyboard', () => {
-        beforeEach(async () => {
-            page = await setup({
-                html: `
+    describe('Accessibility', () => {
+        describe('aXe DevTools', () => {
+            it('does not have accessibility violations', async () => {
+                const page = await setup({
+                    html: `
                     <q2-option-list>
-                        <q2-option display="Nebraska" value="NE">Nebraska</q2-option>
-                        <q2-option display="Nevada" value="NV">Nevada</q2-option>
-                        <q2-option display="New Hampshire" value="NH">New Hampshire</q2-option>
-                        <q2-option display="New Jersey" value="NJ">New Jersey</q2-option>
-                        <q2-option display="New Mexico" value="NM">New Mexico</q2-option>
-                        <q2-option display="New York" value="NY">New York</q2-option>
-                        <q2-option display="North Carolina" value="NC">North Carolina</q2-option>
-                        <q2-option display="North Dakota" value="ND">North Dakota</q2-option>
-                        <q2-option display="Ohio" value="OH">Ohio</q2-option>
-                        <q2-option display="Oklahoma" value="OK">Oklahoma</q2-option>
-                        <q2-option display="Oregon" value="OR">Oregon</q2-option>
-                        <q2-option display="Pennsylvania" value="PA">Pennsylvania</q2-option>
-                        <q2-option display="Rhode Island" value="RI">Rhode Island</q2-option>
+                        <q2-option value="1">Option 1</q2-option>
+                        <q2-option value="2">Option 2</q2-option>
+                        <q2-option value="3">Option 3</q2-option>
                     </q2-option-list>
-                    <button value="control">Control</button>
                 `,
+                });
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
             });
-            optionList = await page.find('q2-option-list');
-            optionsContainer = await page.find('q2-option-list >>> .options');
-            options = await page.findAll('q2-option');
-            popoverStateSpy = await optionList.spyOnEvent('popoverState');
-            changeSpy = await optionList.spyOnEvent('change');
         });
-        describe('externalKeydownHandler', () => {
-            let controlBtn;
+        describe('Accessibility Tree', () => { });
+        describe('Keyboard Controls', () => {
             beforeEach(async () => {
-                controlBtn = await page.find('button');
-                await controlBtn.focus();
-                await page.$eval('body', el => {
-                    const e = el.querySelector('button');
-                    const opt = el.querySelector('q2-option-list');
-                    e.addEventListener('keydown', e => {
-                        opt.handleExternalKeydown(e);
-                    });
+                page = await setup({
+                    html: `
+                        <q2-option-list>
+                            <q2-option display="Nebraska" value="NE">Nebraska</q2-option>
+                            <q2-option display="Nevada" value="NV">Nevada</q2-option>
+                            <q2-option display="New Hampshire" value="NH">New Hampshire</q2-option>
+                            <q2-option display="New Jersey" value="NJ">New Jersey</q2-option>
+                            <q2-option display="New Mexico" value="NM">New Mexico</q2-option>
+                            <q2-option display="New York" value="NY">New York</q2-option>
+                            <q2-option display="North Carolina" value="NC">North Carolina</q2-option>
+                            <q2-option display="North Dakota" value="ND">North Dakota</q2-option>
+                            <q2-option display="Ohio" value="OH">Ohio</q2-option>
+                            <q2-option display="Oklahoma" value="OK">Oklahoma</q2-option>
+                            <q2-option display="Oregon" value="OR">Oregon</q2-option>
+                            <q2-option display="Pennsylvania" value="PA">Pennsylvania</q2-option>
+                            <q2-option display="Rhode Island" value="RI">Rhode Island</q2-option>
+                        </q2-option-list>
+                        <button value="control">Control</button>
+                    `,
                 });
-                expect(await getFocusedValue(page)).toBe('control');
-            });
-            it('does not set the value, or dispatch state event to close container on Space', async () => {
-                await optionsContainer.press(' ');
-                expect(await optionList.getProperty('selectedOptions')).toEqual([]);
-                expect(popoverStateSpy).toHaveReceivedEventDetail({ open: true, action: 'open' });
-                expect(await getFocusedValue(page)).toBe(options[0].getAttribute('value'));
-            });
-            it('does not set the value, or dispatch state event to close container on Enter', async () => {
-                await optionsContainer.press('Enter');
-                expect(await optionList.getProperty('selectedOptions')).toEqual([]);
-                expect(popoverStateSpy).toHaveReceivedEventDetail({ open: true, action: 'open' });
-                expect(await getFocusedValue(page)).toBe(options[0].getAttribute('value'));
-            });
-            it('focuses last option, then previous option on ArrowUp', async () => {
-                await optionsContainer.press('ArrowUp');
-                expect(options[12]).toHaveAttribute('active');
-                expect(await getFocusedValue(page)).toBe(options[12].getAttribute('value'));
-                await optionsContainer.press('ArrowUp');
-                expect(options[11]).toHaveAttribute('active');
-                expect(await getFocusedValue(page)).toBe(options[11].getAttribute('value'));
-            });
-            it('focuses first option, then next option on ArrowDown', async () => {
-                await optionsContainer.press('ArrowDown');
-                expect(await getFocusedValue(page)).toBe(options[0].getAttribute('value'));
-                await optionsContainer.press('ArrowDown');
-                expect(await getFocusedValue(page)).toBe(options[1].getAttribute('value'));
-            });
-            it('focuses first option on Home', async () => {
-                await optionsContainer.press('End');
-                expect(options[12]).toHaveAttribute('active');
-                await optionsContainer.press('Home');
-                expect(options[0]).toHaveAttribute('active');
-                expect(await getFocusedValue(page)).toBe(options[0].getAttribute('value'));
-            });
-            it('focuses last option on End', async () => {
-                await optionsContainer.press('ArrowDown');
-                expect(options[0]).toHaveAttribute('active');
-                await optionsContainer.press('End');
-                expect(options[12]).toHaveAttribute('active');
-                expect(await getFocusedValue(page)).toBe(options[12].getAttribute('value'));
-            });
-            it('jumps focus back 10 options on PageUp', async () => {
-                await optionsContainer.press('End');
-                expect(options[12]).toHaveAttribute('active');
-                await optionsContainer.press('PageUp');
-                expect(options[2]).toHaveAttribute('active');
-                await optionsContainer.press('PageUp');
-                expect(options[0]).toHaveAttribute('active');
-            });
-            it('jumps focus forward 10 options on PageDown', async () => {
-                await optionsContainer.press('PageDown');
-                expect(options[10]).toHaveAttribute('active');
-                await optionsContainer.press('PageDown');
-                expect(options[12]).toHaveAttribute('active');
-            });
-            it('does not set the value, and dispatches state event to close container on Tab', async () => {
-                await optionsContainer.press('Tab');
-                expect(await optionList.getProperty('selectedOptions')).toEqual([]);
-                expect(popoverStateSpy).toHaveReceivedEventDetail({ open: false, action: 'close' });
-            });
-            it('dispatches state event to close container on Escape', async () => {
-                await optionsContainer.press('Escape');
-                expect(await optionList.getProperty('selectedOptions')).toEqual([]);
-                expect(popoverStateSpy).toHaveReceivedEventDetail({ open: false, action: 'close' });
+                optionList = await page.find('q2-option-list');
+                optionsContainer = await page.find('q2-option-list >>> .options');
+                options = await page.findAll('q2-option');
+                popoverStateSpy = await optionList.spyOnEvent('popoverState');
+                changeSpy = await optionList.spyOnEvent('change');
             });
-            describe('pseudo-search', () => {
-                it('emits change event if next matching option is found when printable character is pressed', async () => {
-                    await optionsContainer.press('o');
-                    await page.waitForChanges();
-                    expect(changeSpy).toHaveReceivedEventTimes(1);
-                    expect(changeSpy).toHaveReceivedEventDetail({
-                        value: 'OH',
-                        values: [{ value: 'OH', display: 'Ohio' }],
+            describe('externalKeydownHandler', () => {
+                let controlBtn;
+                beforeEach(async () => {
+                    controlBtn = await page.find('button');
+                    await controlBtn.focus();
+                    await page.$eval('body', el => {
+                        const e = el.querySelector('button');
+                        const opt = el.querySelector('q2-option-list');
+                        e.addEventListener('keydown', e => {
+                            opt.handleExternalKeydown(e);
+                        });
                     });
                     expect(await getFocusedValue(page)).toBe('control');
-                    await optionsContainer.press('o');
-                    expect(changeSpy).toHaveReceivedEventTimes(2);
-                    expect(changeSpy).toHaveReceivedEventDetail({
-                        value: 'OK',
-                        values: [{ value: 'OK', display: 'Oklahoma' }],
+                });
+                it('does not set the value, or dispatch state event to close container on Space', async () => {
+                    await optionsContainer.press(' ');
+                    expect(await optionList.getProperty('selectedOptions')).toEqual([]);
+                    expect(popoverStateSpy).toHaveReceivedEventDetail({ open: true, action: 'open' });
+                    expect(await getFocusedValue(page)).toBe(options[0].getAttribute('value'));
+                });
+                it('does not set the value, or dispatch state event to close container on Enter', async () => {
+                    await optionsContainer.press('Enter');
+                    expect(await optionList.getProperty('selectedOptions')).toEqual([]);
+                    expect(popoverStateSpy).toHaveReceivedEventDetail({ open: true, action: 'open' });
+                    expect(await getFocusedValue(page)).toBe(options[0].getAttribute('value'));
+                });
+                it('focuses last option, then previous option on ArrowUp', async () => {
+                    await optionsContainer.press('ArrowUp');
+                    expect(options[12]).toHaveAttribute('active');
+                    expect(await getFocusedValue(page)).toBe(options[12].getAttribute('value'));
+                    await optionsContainer.press('ArrowUp');
+                    expect(options[11]).toHaveAttribute('active');
+                    expect(await getFocusedValue(page)).toBe(options[11].getAttribute('value'));
+                });
+                it('focuses first option, then next option on ArrowDown', async () => {
+                    await optionsContainer.press('ArrowDown');
+                    expect(await getFocusedValue(page)).toBe(options[0].getAttribute('value'));
+                    await optionsContainer.press('ArrowDown');
+                    expect(await getFocusedValue(page)).toBe(options[1].getAttribute('value'));
+                });
+                it('focuses first option on Home', async () => {
+                    await optionsContainer.press('End');
+                    expect(options[12]).toHaveAttribute('active');
+                    await optionsContainer.press('Home');
+                    expect(options[0]).toHaveAttribute('active');
+                    expect(await getFocusedValue(page)).toBe(options[0].getAttribute('value'));
+                });
+                it('focuses last option on End', async () => {
+                    await optionsContainer.press('ArrowDown');
+                    expect(options[0]).toHaveAttribute('active');
+                    await optionsContainer.press('End');
+                    expect(options[12]).toHaveAttribute('active');
+                    expect(await getFocusedValue(page)).toBe(options[12].getAttribute('value'));
+                });
+                it('jumps focus back 10 options on PageUp', async () => {
+                    await optionsContainer.press('End');
+                    expect(options[12]).toHaveAttribute('active');
+                    await optionsContainer.press('PageUp');
+                    expect(options[2]).toHaveAttribute('active');
+                    await optionsContainer.press('PageUp');
+                    expect(options[0]).toHaveAttribute('active');
+                });
+                it('jumps focus forward 10 options on PageDown', async () => {
+                    await optionsContainer.press('PageDown');
+                    expect(options[10]).toHaveAttribute('active');
+                    await optionsContainer.press('PageDown');
+                    expect(options[12]).toHaveAttribute('active');
+                });
+                it('does not set the value, and dispatches state event to close container on Tab', async () => {
+                    await optionsContainer.press('Tab');
+                    expect(await optionList.getProperty('selectedOptions')).toEqual([]);
+                    expect(popoverStateSpy).toHaveReceivedEventDetail({ open: false, action: 'close' });
+                });
+                it('dispatches state event to close container on Escape', async () => {
+                    await optionsContainer.press('Escape');
+                    expect(await optionList.getProperty('selectedOptions')).toEqual([]);
+                    expect(popoverStateSpy).toHaveReceivedEventDetail({ open: false, action: 'close' });
+                });
+                describe('pseudo-search', () => {
+                    it('emits change event if next matching option is found when printable character is pressed', async () => {
+                        await optionsContainer.press('o');
+                        await page.waitForChanges();
+                        expect(changeSpy).toHaveReceivedEventTimes(1);
+                        expect(changeSpy).toHaveReceivedEventDetail({
+                            value: 'OH',
+                            values: [{ value: 'OH', display: 'Ohio' }],
+                        });
+                        expect(await getFocusedValue(page)).toBe('control');
+                        await optionsContainer.press('o');
+                        expect(changeSpy).toHaveReceivedEventTimes(2);
+                        expect(changeSpy).toHaveReceivedEventDetail({
+                            value: 'OK',
+                            values: [{ value: 'OK', display: 'Oklahoma' }],
+                        });
+                        expect(await getFocusedValue(page)).toBe('control');
+                        await page.waitForTimeout(2000);
+                        await optionsContainer.type('New J');
+                        expect(changeSpy).toHaveReceivedEventTimes(7);
+                        expect(changeSpy).toHaveReceivedEventDetail({
+                            value: 'NJ',
+                            values: [{ value: 'NJ', display: 'New Jersey' }],
+                        });
+                        expect(await getFocusedValue(page)).toBe('control');
                     });
-                    expect(await getFocusedValue(page)).toBe('control');
-                    await page.waitForTimeout(2000);
-                    await optionsContainer.type('New J');
-                    expect(changeSpy).toHaveReceivedEventTimes(7);
-                    expect(changeSpy).toHaveReceivedEventDetail({
-                        value: 'NJ',
-                        values: [{ value: 'NJ', display: 'New Jersey' }],
+                    it('emit change event if next option is found when same character is pressed 3 times', async () => {
+                        await optionsContainer.press('o');
+                        await page.waitForChanges();
+                        expect(changeSpy).toHaveReceivedEventTimes(1);
+                        expect(changeSpy).toHaveReceivedEventDetail({
+                            value: 'OH',
+                            values: [{ value: 'OH', display: 'Ohio' }],
+                        });
+                        expect(await getFocusedValue(page)).toBe('control');
+                        await optionsContainer.press('o');
+                        await page.waitForChanges();
+                        expect(changeSpy).toHaveReceivedEventTimes(2);
+                        expect(await getFocusedValue(page)).toBe('control');
+                        await optionsContainer.press('o');
+                        await page.waitForChanges();
+                        expect(changeSpy).toHaveReceivedEventTimes(3);
+                        expect(await getFocusedValue(page)).toBe('control');
                     });
-                    expect(await getFocusedValue(page)).toBe('control');
                 });
-                it('emit change event if next option is found when same character is pressed 3 times', async () => {
-                    await optionsContainer.press('o');
-                    await page.waitForChanges();
-                    expect(changeSpy).toHaveReceivedEventTimes(1);
-                    expect(changeSpy).toHaveReceivedEventDetail({
-                        value: 'OH',
-                        values: [{ value: 'OH', display: 'Ohio' }],
+                describe('when multiselect', () => {
+                    beforeEach(async () => {
+                        await optionList.setProperty('multiple', true);
+                        await page.waitForChanges();
+                        await setDefaultActiveElement(page);
+                        await page.waitForChanges();
+                        changeSpy = await optionList.spyOnEvent('change');
+                        expect(options[0]).toHaveAttribute('active');
+                    });
+                    const selectAndDeselectMultipleOptions = async (key) => {
+                        // Selecting second option
+                        await optionsContainer.press('ArrowDown');
+                        expect(options[1]).toHaveAttribute('active');
+                        expect(options[1]).not.toHaveAttribute('selected');
+                        await optionsContainer.press(key);
+                        expect(options[1]).toHaveAttribute('selected');
+                        expect(changeSpy).toHaveReceivedEventDetail({
+                            value: 'NV',
+                            values: [{ display: 'Nevada', value: 'NV' }],
+                        });
+                        expect(await optionList.getProperty('selectedOptions')).toEqual([
+                            { display: 'Nevada', value: 'NV' },
+                        ]);
+                        // Selecting fourth option
+                        await optionsContainer.press('ArrowDown');
+                        await optionsContainer.press('ArrowDown');
+                        expect(options[3]).toHaveAttribute('active');
+                        expect(options[3]).not.toHaveAttribute('selected');
+                        await optionsContainer.press(key);
+                        expect(options[3]).toHaveAttribute('selected');
+                        expect(changeSpy).toHaveReceivedEventDetail({
+                            value: 'NJ',
+                            values: [
+                                { display: 'Nevada', value: 'NV' },
+                                { display: 'New Jersey', value: 'NJ' },
+                            ],
+                        });
+                        expect(await optionList.getProperty('selectedOptions')).toEqual([
+                            { display: 'Nevada', value: 'NV' },
+                            { display: 'New Jersey', value: 'NJ' },
+                        ]);
+                        // Deselecting fourth option
+                        await optionsContainer.press(key);
+                        expect(options[3]).not.toHaveAttribute('selected');
+                        expect(changeSpy).toHaveReceivedEventDetail({
+                            value: 'NJ',
+                            values: [{ display: 'Nevada', value: 'NV' }],
+                        });
+                        expect(await optionList.getProperty('selectedOptions')).toEqual([
+                            { display: 'Nevada', value: 'NV' },
+                        ]);
+                        // Selecting fifth option
+                        await optionsContainer.press('ArrowDown');
+                        expect(options[4]).not.toHaveAttribute('selected');
+                        await optionsContainer.press(key);
+                        expect(options[4]).toHaveAttribute('selected');
+                        expect(changeSpy).toHaveReceivedEventDetail({
+                            value: 'NM',
+                            values: [
+                                { display: 'Nevada', value: 'NV' },
+                                { display: 'New Mexico', value: 'NM' },
+                            ],
+                        });
+                        expect(await optionList.getProperty('selectedOptions')).toEqual([
+                            { display: 'Nevada', value: 'NV' },
+                            { display: 'New Mexico', value: 'NM' },
+                        ]);
+                    };
+                    it('can select and deselect multiple options via Space without closing list', async () => {
+                        await selectAndDeselectMultipleOptions('Space');
+                    });
+                    it('selects and deselects option on Enter, without closing list', async () => {
+                        await selectAndDeselectMultipleOptions('Enter');
                     });
-                    expect(await getFocusedValue(page)).toBe('control');
-                    await optionsContainer.press('o');
-                    await page.waitForChanges();
-                    expect(changeSpy).toHaveReceivedEventTimes(2);
-                    expect(await getFocusedValue(page)).toBe('control');
-                    await optionsContainer.press('o');
-                    await page.waitForChanges();
-                    expect(changeSpy).toHaveReceivedEventTimes(3);
-                    expect(await getFocusedValue(page)).toBe('control');
                 });
             });
-            describe('when multiselect', () => {
+            describe('internalKeydownHandler', () => {
                 beforeEach(async () => {
-                    await optionList.setProperty('multiple', true);
-                    await page.waitForChanges();
                     await setDefaultActiveElement(page);
                     await page.waitForChanges();
-                    changeSpy = await optionList.spyOnEvent('change');
                     expect(options[0]).toHaveAttribute('active');
-                });
-                const selectAndDeselectMultipleOptions = async (key) => {
-                    // Selecting second option
-                    await optionsContainer.press('ArrowDown');
-                    expect(options[1]).toHaveAttribute('active');
-                    expect(options[1]).not.toHaveAttribute('selected');
-                    await optionsContainer.press(key);
-                    expect(options[1]).toHaveAttribute('selected');
-                    expect(changeSpy).toHaveReceivedEventDetail({
-                        value: 'NV',
-                        values: [{ display: 'Nevada', value: 'NV' }],
+                    expect(await getFocusedValue(page)).toEqual('NE');
+                });
+                describe("when role is 'menu'", () => {
+                    it('focuses first option on Enter', async () => {
+                        await optionsContainer.press('Enter');
+                        expect(options[0]).toHaveAttribute('active');
+                        expect(await optionList.getProperty('selectedOptions')).toEqual([
+                            { display: 'Nebraska', value: 'NE' },
+                        ]);
+                        expect(await getFocusedOptionValue(page)).toBe(options[0].getAttribute('value'));
                     });
-                    expect(await optionList.getProperty('selectedOptions')).toEqual([
-                        { display: 'Nevada', value: 'NV' },
-                    ]);
-                    // Selecting fourth option
-                    await optionsContainer.press('ArrowDown');
-                    await optionsContainer.press('ArrowDown');
-                    expect(options[3]).toHaveAttribute('active');
-                    expect(options[3]).not.toHaveAttribute('selected');
-                    await optionsContainer.press(key);
-                    expect(options[3]).toHaveAttribute('selected');
-                    expect(changeSpy).toHaveReceivedEventDetail({
-                        value: 'NJ',
-                        values: [
-                            { display: 'Nevada', value: 'NV' },
-                            { display: 'New Jersey', value: 'NJ' },
-                        ],
+                    it('focuses first option on Space', async () => {
+                        await optionsContainer.press(' ');
+                        expect(options[0]).toHaveAttribute('active');
+                        expect(await optionList.getProperty('selectedOptions')).toEqual([
+                            { display: 'Nebraska', value: 'NE' },
+                        ]);
+                        expect(await getFocusedOptionValue(page)).toBe(options[0].getAttribute('value'));
                     });
+                });
+                it('sets the value, and dispatches state event to close container on Space', async () => {
+                    await optionsContainer.press(' ');
+                    await page.waitForChanges();
                     expect(await optionList.getProperty('selectedOptions')).toEqual([
-                        { display: 'Nevada', value: 'NV' },
-                        { display: 'New Jersey', value: 'NJ' },
+                        { display: 'Nebraska', value: 'NE' },
                     ]);
-                    // Deselecting fourth option
-                    await optionsContainer.press(key);
-                    expect(options[3]).not.toHaveAttribute('selected');
-                    expect(changeSpy).toHaveReceivedEventDetail({
-                        value: 'NJ',
-                        values: [{ display: 'Nevada', value: 'NV' }],
-                    });
+                    expect(popoverStateSpy).toHaveReceivedEventDetail({ open: false, action: 'select' });
+                });
+                it('sets the value, and dispatches state event to close container on Enter', async () => {
+                    await optionsContainer.press('Enter');
                     expect(await optionList.getProperty('selectedOptions')).toEqual([
-                        { display: 'Nevada', value: 'NV' },
+                        { display: 'Nebraska', value: 'NE' },
                     ]);
-                    // Selecting fifth option
+                    expect(popoverStateSpy).toHaveReceivedEventDetail({ open: false, action: 'select' });
+                });
+                it('focuses previous option on ArrowUp', async () => {
                     await optionsContainer.press('ArrowDown');
-                    expect(options[4]).not.toHaveAttribute('selected');
-                    await optionsContainer.press(key);
-                    expect(options[4]).toHaveAttribute('selected');
-                    expect(changeSpy).toHaveReceivedEventDetail({
-                        value: 'NM',
-                        values: [
-                            { display: 'Nevada', value: 'NV' },
-                            { display: 'New Mexico', value: 'NM' },
-                        ],
-                    });
-                    expect(await optionList.getProperty('selectedOptions')).toEqual([
-                        { display: 'Nevada', value: 'NV' },
-                        { display: 'New Mexico', value: 'NM' },
-                    ]);
-                };
-                it('can select and deselect multiple options via Space without closing list', async () => {
-                    await selectAndDeselectMultipleOptions('Space');
+                    expect(options[1]).toHaveAttribute('active');
+                    await optionsContainer.press('ArrowUp');
+                    expect(options[0]).toHaveAttribute('active');
+                    expect(await getFocusedValue(page)).toBe(options[0].getAttribute('value'));
                 });
-                it('selects and deselects option on Enter, without closing list', async () => {
-                    await selectAndDeselectMultipleOptions('Enter');
+                it('focuses next option on ArrowDown', async () => {
+                    await optionsContainer.press('ArrowDown');
+                    expect(await getFocusedValue(page)).toBe(options[1].getAttribute('value'));
                 });
-            });
-        });
-        describe('internalKeydownHandler', () => {
-            beforeEach(async () => {
-                await setDefaultActiveElement(page);
-                await page.waitForChanges();
-                expect(options[0]).toHaveAttribute('active');
-                expect(await getFocusedValue(page)).toEqual('NE');
-            });
-            describe("when role is 'menu'", () => {
-                it('focuses first option on Enter', async () => {
-                    await optionsContainer.press('Enter');
+                it('focuses first option on Home', async () => {
+                    await optionsContainer.press('ArrowDown');
+                    expect(options[1]).toHaveAttribute('active');
+                    await optionsContainer.press('Home');
                     expect(options[0]).toHaveAttribute('active');
-                    expect(await optionList.getProperty('selectedOptions')).toEqual([
-                        { display: 'Nebraska', value: 'NE' },
-                    ]);
-                    expect(await getFocusedOptionValue(page)).toBe(options[0].getAttribute('value'));
+                    expect(await getFocusedValue(page)).toBe(options[0].getAttribute('value'));
                 });
-                it('focuses first option on Space', async () => {
-                    await optionsContainer.press(' ');
+                it('focuses last option on End', async () => {
+                    await optionsContainer.press('ArrowDown');
+                    expect(options[1]).toHaveAttribute('active');
+                    await optionsContainer.press('End');
+                    expect(options[12]).toHaveAttribute('active');
+                    expect(await getFocusedValue(page)).toBe(options[12].getAttribute('value'));
+                });
+                it('jumps focus back 10 options on PageUp', async () => {
+                    await optionsContainer.press('End');
+                    expect(options[12]).toHaveAttribute('active');
+                    await optionsContainer.press('PageUp');
+                    expect(options[2]).toHaveAttribute('active');
+                    await optionsContainer.press('PageUp');
                     expect(options[0]).toHaveAttribute('active');
+                });
+                it('jumps focus forward 10 options on PageDown', async () => {
+                    await optionsContainer.press('PageDown');
+                    expect(options[10]).toHaveAttribute('active');
+                    await optionsContainer.press('PageDown');
+                    expect(options[12]).toHaveAttribute('active');
+                });
+                it('sets the value and moves focus away from the q2-option-list on Tab ', async () => {
+                    await optionsContainer.press('Tab');
                     expect(await optionList.getProperty('selectedOptions')).toEqual([
                         { display: 'Nebraska', value: 'NE' },
                     ]);
-                    expect(await getFocusedOptionValue(page)).toBe(options[0].getAttribute('value'));
+                    expect(await getFocusedValue(page)).toEqual('control');
                 });
-            });
-            it('sets the value, and dispatches state event to close container on Space', async () => {
-                await optionsContainer.press(' ');
-                await page.waitForChanges();
-                expect(await optionList.getProperty('selectedOptions')).toEqual([{ display: 'Nebraska', value: 'NE' }]);
-                expect(popoverStateSpy).toHaveReceivedEventDetail({ open: false, action: 'select' });
-            });
-            it('sets the value, and dispatches state event to close container on Enter', async () => {
-                await optionsContainer.press('Enter');
-                expect(await optionList.getProperty('selectedOptions')).toEqual([{ display: 'Nebraska', value: 'NE' }]);
-                expect(popoverStateSpy).toHaveReceivedEventDetail({ open: false, action: 'select' });
-            });
-            it('focuses previous option on ArrowUp', async () => {
-                await optionsContainer.press('ArrowDown');
-                expect(options[1]).toHaveAttribute('active');
-                await optionsContainer.press('ArrowUp');
-                expect(options[0]).toHaveAttribute('active');
-                expect(await getFocusedValue(page)).toBe(options[0].getAttribute('value'));
-            });
-            it('focuses next option on ArrowDown', async () => {
-                await optionsContainer.press('ArrowDown');
-                expect(await getFocusedValue(page)).toBe(options[1].getAttribute('value'));
-            });
-            it('focuses first option on Home', async () => {
-                await optionsContainer.press('ArrowDown');
-                expect(options[1]).toHaveAttribute('active');
-                await optionsContainer.press('Home');
-                expect(options[0]).toHaveAttribute('active');
-                expect(await getFocusedValue(page)).toBe(options[0].getAttribute('value'));
-            });
-            it('focuses last option on End', async () => {
-                await optionsContainer.press('ArrowDown');
-                expect(options[1]).toHaveAttribute('active');
-                await optionsContainer.press('End');
-                expect(options[12]).toHaveAttribute('active');
-                expect(await getFocusedValue(page)).toBe(options[12].getAttribute('value'));
-            });
-            it('jumps focus back 10 options on PageUp', async () => {
-                await optionsContainer.press('End');
-                expect(options[12]).toHaveAttribute('active');
-                await optionsContainer.press('PageUp');
-                expect(options[2]).toHaveAttribute('active');
-                await optionsContainer.press('PageUp');
-                expect(options[0]).toHaveAttribute('active');
-            });
-            it('jumps focus forward 10 options on PageDown', async () => {
-                await optionsContainer.press('PageDown');
-                expect(options[10]).toHaveAttribute('active');
-                await optionsContainer.press('PageDown');
-                expect(options[12]).toHaveAttribute('active');
-            });
-            it('sets the value and moves focus away from the q2-option-list on Tab ', async () => {
-                await optionsContainer.press('Tab');
-                expect(await optionList.getProperty('selectedOptions')).toEqual([{ display: 'Nebraska', value: 'NE' }]);
-                expect(await getFocusedValue(page)).toEqual('control');
-            });
-            it('dispatches state event to close container on Escape', async () => {
-                await optionsContainer.press('Escape');
-                expect(await optionList.getProperty('selectedOptions')).toEqual([]);
-                expect(popoverStateSpy).toHaveReceivedEventDetail({ open: false, action: 'close' });
-            });
-            it('stays on first option on ArrowUp if already on first option', async () => {
-                await optionsContainer.press('Home');
-                expect(options[0]).toHaveAttribute('active');
-                expect(await getFocusedValue(page)).toBe(options[0].getAttribute('value'));
-                await optionsContainer.press('ArrowUp');
-                expect(options[0]).toHaveAttribute('active');
-                expect(await getFocusedValue(page)).toBe(options[0].getAttribute('value'));
-            });
-            it('stays on last option on ArrowDown if already on last option', async () => {
-                await optionsContainer.press('End');
-                expect(options[12]).toHaveAttribute('active');
-                expect(await getFocusedValue(page)).toBe(options[12].getAttribute('value'));
-                await optionsContainer.press('ArrowDown');
-                expect(options[12]).toHaveAttribute('active');
-                expect(await getFocusedValue(page)).toBe(options[12].getAttribute('value'));
-            });
-            describe('pseudo-search', () => {
-                it('searches for option if printable character is pressed', async () => {
-                    await optionsContainer.press('o');
-                    await page.waitForChanges();
-                    expect(await getFocusedValue(page)).toEqual('OH');
-                    expect(changeSpy).toHaveReceivedEventTimes(0);
-                    // doesn't change focus if no match
-                    await optionsContainer.press('o');
-                    expect(await getFocusedValue(page)).toEqual('OK');
-                    expect(changeSpy).toHaveReceivedEventTimes(0);
-                    await page.waitForTimeout(2000);
-                    await optionsContainer.type('New J');
-                    expect(await getFocusedValue(page)).toEqual('NJ');
-                    expect(changeSpy).toHaveReceivedEventTimes(0);
-                });
-                it('searches for next option if same character is pressed 3 times', async () => {
-                    await optionsContainer.press('o');
-                    await page.waitForChanges();
-                    expect(await getFocusedValue(page)).toEqual('OH');
-                    expect(changeSpy).toHaveReceivedEventTimes(0);
-                    await optionsContainer.press('o');
-                    await page.waitForChanges();
-                    expect(await getFocusedValue(page)).toEqual('OK');
-                    expect(changeSpy).toHaveReceivedEventTimes(0);
-                    await optionsContainer.press('o');
-                    await page.waitForChanges();
-                    expect(await getFocusedValue(page)).toEqual('OR');
-                    expect(changeSpy).toHaveReceivedEventTimes(0);
+                it('dispatches state event to close container on Escape', async () => {
+                    await optionsContainer.press('Escape');
+                    expect(await optionList.getProperty('selectedOptions')).toEqual([]);
+                    expect(popoverStateSpy).toHaveReceivedEventDetail({ open: false, action: 'close' });
                 });
-            });
-            describe('when multiselect', () => {
-                beforeEach(async () => {
-                    await optionList.setProperty('multiple', true);
-                    await page.waitForChanges();
-                    await setDefaultActiveElement(page);
-                    await page.waitForChanges();
-                    changeSpy = await optionList.spyOnEvent('change');
+                it('stays on first option on ArrowUp if already on first option', async () => {
+                    await optionsContainer.press('Home');
                     expect(options[0]).toHaveAttribute('active');
+                    expect(await getFocusedValue(page)).toBe(options[0].getAttribute('value'));
+                    await optionsContainer.press('ArrowUp');
+                    expect(options[0]).toHaveAttribute('active');
+                    expect(await getFocusedValue(page)).toBe(options[0].getAttribute('value'));
                 });
-                const selectAndDeselectMultipleOptions = async (key) => {
-                    // Selecting second option
+                it('stays on last option on ArrowDown if already on last option', async () => {
+                    await optionsContainer.press('End');
+                    expect(options[12]).toHaveAttribute('active');
+                    expect(await getFocusedValue(page)).toBe(options[12].getAttribute('value'));
                     await optionsContainer.press('ArrowDown');
-                    expect(options[1]).toHaveAttribute('active');
-                    expect(options[1]).not.toHaveAttribute('selected');
-                    await optionsContainer.press(key);
-                    expect(options[1]).toHaveAttribute('selected');
-                    expect(changeSpy).toHaveReceivedEventDetail({
-                        value: 'NV',
-                        values: [{ display: 'Nevada', value: 'NV' }],
+                    expect(options[12]).toHaveAttribute('active');
+                    expect(await getFocusedValue(page)).toBe(options[12].getAttribute('value'));
+                });
+                describe('pseudo-search', () => {
+                    it('searches for option if printable character is pressed', async () => {
+                        await optionsContainer.press('o');
+                        await page.waitForChanges();
+                        expect(await getFocusedValue(page)).toEqual('OH');
+                        expect(changeSpy).toHaveReceivedEventTimes(0);
+                        // doesn't change focus if no match
+                        await optionsContainer.press('o');
+                        expect(await getFocusedValue(page)).toEqual('OK');
+                        expect(changeSpy).toHaveReceivedEventTimes(0);
+                        await page.waitForTimeout(2000);
+                        await optionsContainer.type('New J');
+                        expect(await getFocusedValue(page)).toEqual('NJ');
+                        expect(changeSpy).toHaveReceivedEventTimes(0);
                     });
-                    expect(await optionList.getProperty('selectedOptions')).toEqual([
-                        { display: 'Nevada', value: 'NV' },
-                    ]);
-                    // Selecting fourth option
-                    await optionsContainer.press('ArrowDown');
-                    await optionsContainer.press('ArrowDown');
-                    expect(options[3]).toHaveAttribute('active');
-                    expect(options[3]).not.toHaveAttribute('selected');
-                    await optionsContainer.press(key);
-                    expect(options[3]).toHaveAttribute('selected');
-                    expect(changeSpy).toHaveReceivedEventDetail({
-                        value: 'NJ',
-                        values: [
-                            { display: 'Nevada', value: 'NV' },
-                            { display: 'New Jersey', value: 'NJ' },
-                        ],
+                    it('searches for next option if same character is pressed 3 times', async () => {
+                        await optionsContainer.press('o');
+                        await page.waitForChanges();
+                        expect(await getFocusedValue(page)).toEqual('OH');
+                        expect(changeSpy).toHaveReceivedEventTimes(0);
+                        await optionsContainer.press('o');
+                        await page.waitForChanges();
+                        expect(await getFocusedValue(page)).toEqual('OK');
+                        expect(changeSpy).toHaveReceivedEventTimes(0);
+                        await optionsContainer.press('o');
+                        await page.waitForChanges();
+                        expect(await getFocusedValue(page)).toEqual('OR');
+                        expect(changeSpy).toHaveReceivedEventTimes(0);
                     });
-                    expect(await optionList.getProperty('selectedOptions')).toEqual([
-                        { display: 'Nevada', value: 'NV' },
-                        { display: 'New Jersey', value: 'NJ' },
-                    ]);
-                    // Deselecting fourth option
-                    await optionsContainer.press(key);
-                    expect(options[3]).not.toHaveAttribute('selected');
-                    expect(changeSpy).toHaveReceivedEventDetail({
-                        value: 'NJ',
-                        values: [{ display: 'Nevada', value: 'NV' }],
+                });
+                describe('when multiselect', () => {
+                    beforeEach(async () => {
+                        await optionList.setProperty('multiple', true);
+                        await page.waitForChanges();
+                        await setDefaultActiveElement(page);
+                        await page.waitForChanges();
+                        changeSpy = await optionList.spyOnEvent('change');
+                        expect(options[0]).toHaveAttribute('active');
                     });
-                    expect(await optionList.getProperty('selectedOptions')).toEqual([
-                        { display: 'Nevada', value: 'NV' },
-                    ]);
-                    // Selecting fifth option
-                    await optionsContainer.press('ArrowDown');
-                    expect(options[4]).not.toHaveAttribute('selected');
-                    await optionsContainer.press(key);
-                    expect(options[4]).toHaveAttribute('selected');
-                    expect(changeSpy).toHaveReceivedEventDetail({
-                        value: 'NM',
-                        values: [
+                    const selectAndDeselectMultipleOptions = async (key) => {
+                        // Selecting second option
+                        await optionsContainer.press('ArrowDown');
+                        expect(options[1]).toHaveAttribute('active');
+                        expect(options[1]).not.toHaveAttribute('selected');
+                        await optionsContainer.press(key);
+                        expect(options[1]).toHaveAttribute('selected');
+                        expect(changeSpy).toHaveReceivedEventDetail({
+                            value: 'NV',
+                            values: [{ display: 'Nevada', value: 'NV' }],
+                        });
+                        expect(await optionList.getProperty('selectedOptions')).toEqual([
+                            { display: 'Nevada', value: 'NV' },
+                        ]);
+                        // Selecting fourth option
+                        await optionsContainer.press('ArrowDown');
+                        await optionsContainer.press('ArrowDown');
+                        expect(options[3]).toHaveAttribute('active');
+                        expect(options[3]).not.toHaveAttribute('selected');
+                        await optionsContainer.press(key);
+                        expect(options[3]).toHaveAttribute('selected');
+                        expect(changeSpy).toHaveReceivedEventDetail({
+                            value: 'NJ',
+                            values: [
+                                { display: 'Nevada', value: 'NV' },
+                                { display: 'New Jersey', value: 'NJ' },
+                            ],
+                        });
+                        expect(await optionList.getProperty('selectedOptions')).toEqual([
+                            { display: 'Nevada', value: 'NV' },
+                            { display: 'New Jersey', value: 'NJ' },
+                        ]);
+                        // Deselecting fourth option
+                        await optionsContainer.press(key);
+                        expect(options[3]).not.toHaveAttribute('selected');
+                        expect(changeSpy).toHaveReceivedEventDetail({
+                            value: 'NJ',
+                            values: [{ display: 'Nevada', value: 'NV' }],
+                        });
+                        expect(await optionList.getProperty('selectedOptions')).toEqual([
+                            { display: 'Nevada', value: 'NV' },
+                        ]);
+                        // Selecting fifth option
+                        await optionsContainer.press('ArrowDown');
+                        expect(options[4]).not.toHaveAttribute('selected');
+                        await optionsContainer.press(key);
+                        expect(options[4]).toHaveAttribute('selected');
+                        expect(changeSpy).toHaveReceivedEventDetail({
+                            value: 'NM',
+                            values: [
+                                { display: 'Nevada', value: 'NV' },
+                                { display: 'New Mexico', value: 'NM' },
+                            ],
+                        });
+                        expect(await optionList.getProperty('selectedOptions')).toEqual([
                             { display: 'Nevada', value: 'NV' },
                             { display: 'New Mexico', value: 'NM' },
-                        ],
+                        ]);
+                    };
+                    it('can select and deselect multiple options via Space, without closing list', async () => {
+                        await selectAndDeselectMultipleOptions('Space');
+                    });
+                    it('selects and deselects option on Enter, without closing list', async () => {
+                        await selectAndDeselectMultipleOptions('Enter');
+                    });
+                    it('does not set the value or dispatch state event to close container on Tab when role equals "listbox"', async () => {
+                        await optionsContainer.press('Tab');
+                        expect(await optionList.getProperty('selectedOptions')).toEqual([]);
+                        expect(popoverStateSpy).not.toHaveReceivedEvent();
                     });
-                    expect(await optionList.getProperty('selectedOptions')).toEqual([
-                        { display: 'Nevada', value: 'NV' },
-                        { display: 'New Mexico', value: 'NM' },
-                    ]);
-                };
-                it('can select and deselect multiple options via Space, without closing list', async () => {
-                    await selectAndDeselectMultipleOptions('Space');
-                });
-                it('selects and deselects option on Enter, without closing list', async () => {
-                    await selectAndDeselectMultipleOptions('Enter');
-                });
-                it('does not set the value or dispatch state event to close container on Tab when role equals "listbox"', async () => {
-                    await optionsContainer.press('Tab');
-                    expect(await optionList.getProperty('selectedOptions')).toEqual([]);
-                    expect(popoverStateSpy).not.toHaveReceivedEvent();
                 });
             });
         });
+        describe('Other', () => { });
     });
 });
 //# sourceMappingURL=q2-option-list-test.e2e.js.map