q2-tecton-elements 1.49.2 → 1.50.1

package/dist/{test/elements → collection/components/q2-pill/test}/q2-pill-test.e2e.js

@@ -1,4 +1,4 @@
-import { evaluateA11y, setup, getFocusedAttribute, getFocusedTagName, getFocusedOptionValue, getActiveElementTestId, getListOfStyleCompilationIssues, setTestStrings, } from "../helpers";
+import { evaluateA11y, setup, getFocusedAttribute, getFocusedTagName, getFocusedOptionValue, getActiveElementTestId, getListOfStyleCompilationIssues, setTestStrings, } from "../../../utils/helpers";
 describe('q2-pill', () => {
     let page;
     let pill;
@@ -31,53 +31,27 @@ describe('q2-pill', () => {
             const hasViolations = await evaluateA11y(page);
             expect(hasViolations).toBe(false);
         });
-    });
-    describe('when no options are provided', () => {
-        it('toggles active on click', async () => {
+        it("option-list should have a role of 'listbox' and the options a role of 'option'", async () => {
             page = await setup({
-                html: `<q2-pill label="My pill" value="my-pill-value"></q2-pill>`,
+                html: `
+                        <q2-pill label="My pill" open>
+                            <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-pill>
+                    `,
             });
-            pill = await page.find('q2-pill');
-            const closeBtn = await page.find('q2-pill >>> .btn-close');
-            const closeIcon = await page.find('q2-pill >>> q2-icon');
-            const btnWrapper = await page.find('q2-pill >>> .btn-wrapper');
-            const changeSpy = await pill.spyOnEvent('change');
-            expect(pill).not.toHaveAttribute('active');
-            expect(await closeBtn.isVisible()).toBe(false);
-            expect(closeIcon).toEqualAttribute('type', 'close');
-            expect(btnWrapper.classList.contains('has-icon')).toBe(false);
-            expect(btnWrapper.classList.contains('has-options')).toBe(false);
-            await pill.click();
-            await page.waitForChanges();
-            expect(pill).toHaveAttribute('active');
-            expect(await closeBtn.isVisible()).toBe(true);
-            expect(btnWrapper.classList.contains('has-icon')).toBe(true);
-            expect(btnWrapper.classList.contains('has-options')).toBe(false);
-            expect(changeSpy).toHaveReceivedEventDetail({
-                active: true,
-                value: 'my-pill-value',
-                values: [{ display: 'My pill', value: 'my-pill-value' }],
-            });
-            await pill.click();
             await page.waitForChanges();
-            expect(pill).not.toHaveAttribute('active');
-            expect(await closeBtn.isVisible()).toBe(false);
-            expect(btnWrapper.classList.contains('has-icon')).toBe(false);
-            expect(btnWrapper.classList.contains('has-options')).toBe(false);
-            expect(changeSpy).toHaveReceivedEventDetail({
-                active: false,
-                value: 'my-pill-value',
-                values: [],
-            });
-        });
-        it('zero is not rendered inside the click-elsewhere element (TCT-2433)', async () => {
-            page = await setup({
-                html: `<q2-pill label="My Pill"></q2-pill>`,
+            const snapshot = await page.accessibility.snapshot();
+            const button = snapshot.children[0].children[0];
+            const optionList = snapshot.children[1];
+            expect(button.role).toEqual('combobox');
+            expect(optionList.role).toEqual('listbox');
+            expect(optionList.children).toHaveLength(3);
+            optionList.children.forEach(child => {
+                expect(child.role).toEqual('option');
+                expect(child.name).toBeTruthy();
             });
-            pill = await page.find('q2-pill');
-            const clickElsewhere = await page.find('q2-pill >>> click-elsewhere');
-            expect(await pill.getProperty('label')).toBe('My Pill');
-            expect(clickElsewhere.textContent.slice(-1)).not.toBe('0');
         });
     });
     describe('Props', () => {
@@ -397,296 +371,6 @@ describe('q2-pill', () => {
                 });
             });
         });
-    });
-    describe('when options are provided', () => {
-        beforeEach(async () => {
-            page = await setup({
-                html: `
-                    <q2-pill label="My pill">
-                        <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-pill>
-                `,
-            });
-            pill = await page.find('q2-pill');
-            allOptions = await page.findAll('q2-option');
-            optionList = await page.find('q2-pill >>> q2-option-list');
-            popover = await page.find('q2-pill >>> q2-popover');
-            optionContainer = await page.find('q2-pill >>> q2-option-list >>> .options');
-            controlBtn = await page.find('q2-pill >>> .btn-primary');
-            changeSpy = await pill.spyOnEvent('change');
-        });
-        it('can select option via keyboard', async () => {
-            let closeBtn = await page.find('q2-pill >>> .btn-close');
-            let closeIcon = await page.find('q2-pill >>> q2-icon');
-            const btnWrapper = await page.find('q2-pill >>> .btn-wrapper');
-            expect(pill).not.toHaveAttribute('active');
-            expect(await closeBtn.isVisible()).toBe(true);
-            expect(closeIcon).toEqualAttribute('type', 'chevron-down');
-            expect(btnWrapper.classList.contains('has-icon')).toBe(true);
-            expect(btnWrapper.classList.contains('has-options')).toBe(true);
-            expect(popover).not.toHaveAttribute('open');
-            expect(closeBtn.tagName).toEqual('DIV');
-            await controlBtn.press('ArrowDown');
-            await page.waitForChanges();
-            expect(pill).not.toHaveAttribute('active');
-            expect(pill).toHaveAttribute('open');
-            expect(popover).toHaveAttribute('open');
-            expect(await getFocusedOptionValue(page)).toEqual('1');
-            await optionContainer.press('ArrowDown');
-            await page.waitForChanges();
-            expect(await getFocusedOptionValue(page)).toEqual('2');
-            await allOptions[1].press(' ');
-            await page.waitForChanges();
-            expect(pill).toHaveAttribute('active');
-            expect(pill).not.toHaveAttribute('open');
-            expect(popover).not.toHaveAttribute('open');
-            expect(changeSpy).toHaveReceivedEventDetail({
-                active: true,
-                value: '2',
-                values: [{ display: 'Option 2', value: '2' }],
-            });
-            expect(await optionList.getProperty('selectedOptions')).toEqual([{ display: 'Option 2', value: '2' }]);
-            closeBtn = await page.find('q2-pill >>> .btn-close');
-            closeIcon = await page.find('q2-pill >>> q2-icon');
-            expect(closeBtn.tagName).toEqual('BUTTON');
-            expect(closeIcon).toEqualAttribute('type', 'close');
-            await closeBtn.press(' ');
-            await page.waitForChanges();
-            expect(pill).not.toHaveAttribute('active');
-            expect(changeSpy).toHaveReceivedEventDetail({
-                active: false,
-                value: null,
-                values: [],
-            });
-            expect(await optionList.getProperty('selectedOptions')).toEqual([]);
-        });
-        it('can select option via mouse', async () => {
-            let closeBtn = await page.find('q2-pill >>> .btn-close');
-            let closeIcon = await page.find('q2-pill >>> q2-icon');
-            const btnWrapper = await page.find('q2-pill >>> .btn-wrapper');
-            expect(pill).not.toHaveAttribute('active');
-            expect(await closeBtn.isVisible()).toBe(true);
-            expect(closeIcon).toEqualAttribute('type', 'chevron-down');
-            expect(btnWrapper.classList.contains('has-icon')).toBe(true);
-            expect(btnWrapper.classList.contains('has-options')).toBe(true);
-            expect(popover).not.toHaveAttribute('open');
-            expect(closeBtn.tagName).toEqual('DIV');
-            await pill.click();
-            await page.waitForChanges();
-            expect(pill).not.toHaveAttribute('active');
-            expect(pill).toHaveAttribute('open');
-            expect(popover).toHaveAttribute('open');
-            expect(await getFocusedTagName(page)).toEqual('Q2-PILL');
-            await allOptions[1].click();
-            await page.waitForChanges();
-            expect(changeSpy).toHaveReceivedEventDetail({
-                active: true,
-                value: '2',
-                values: [{ display: 'Option 2', value: '2' }],
-            });
-            expect(await optionList.getProperty('selectedOptions')).toEqual([{ display: 'Option 2', value: '2' }]);
-            closeBtn = await page.find('q2-pill >>> .btn-close');
-            closeIcon = await page.find('q2-pill >>> q2-icon');
-            expect(closeBtn.tagName).toEqual('BUTTON');
-            expect(closeIcon).toEqualAttribute('type', 'close');
-            await closeBtn.click();
-            await page.waitForChanges();
-            expect(pill).not.toHaveAttribute('active');
-            expect(changeSpy).toHaveReceivedEventDetail({
-                active: false,
-                value: null,
-                values: [],
-            });
-            expect(await optionList.getProperty('selectedOptions')).toEqual([]);
-        });
-        describe('when multiple', () => {
-            it('can select multiple options via keyboard', async () => {
-                await pill.setProperty('multiple', true);
-                await page.waitForChanges();
-                let closeBtn = await page.find('q2-pill >>> .btn-close');
-                let closeIcon = await page.find('q2-pill >>> q2-icon');
-                const btnWrapper = await page.find('q2-pill >>> .btn-wrapper');
-                expect(pill).not.toHaveAttribute('active');
-                expect(await closeBtn.isVisible()).toBe(true);
-                expect(closeIcon).toEqualAttribute('type', 'chevron-down');
-                expect(btnWrapper.classList.contains('has-icon')).toBe(true);
-                expect(btnWrapper.classList.contains('has-options')).toBe(true);
-                expect(popover).not.toHaveAttribute('open');
-                expect(closeBtn.tagName).toEqual('DIV');
-                await controlBtn.press('ArrowDown');
-                await page.waitForChanges();
-                expect(pill).not.toHaveAttribute('active');
-                expect(pill).toHaveAttribute('open');
-                expect(popover).toHaveAttribute('open');
-                expect(await getFocusedOptionValue(page)).toEqual('1');
-                await optionContainer.press('ArrowDown');
-                await page.waitForChanges();
-                expect(await getFocusedOptionValue(page)).toEqual('2');
-                await allOptions[1].press(' ');
-                await page.waitForChanges();
-                expect(pill).toHaveAttribute('active');
-                expect(pill).toHaveAttribute('open');
-                expect(popover).toHaveAttribute('open');
-                expect(changeSpy).toHaveReceivedEventDetail({
-                    active: true,
-                    value: '2',
-                    values: [{ display: 'Option 2', value: '2' }],
-                });
-                expect(await optionList.getProperty('selectedOptions')).toEqual([{ display: 'Option 2', value: '2' }]);
-                closeBtn = await page.find('q2-pill >>> .btn-close');
-                closeIcon = await page.find('q2-pill >>> q2-icon');
-                expect(closeBtn.tagName).toEqual('BUTTON');
-                expect(closeIcon).toEqualAttribute('type', 'close');
-                await optionContainer.press('ArrowDown');
-                await page.waitForChanges();
-                expect(await getFocusedOptionValue(page)).toEqual('3');
-                await allOptions[2].press(' ');
-                await page.waitForChanges();
-                expect(changeSpy).toHaveReceivedEventDetail({
-                    active: true,
-                    value: '3',
-                    values: [
-                        { display: 'Option 2', value: '2' },
-                        { display: 'Option 3', value: '3' },
-                    ],
-                });
-                expect(await optionList.getProperty('selectedOptions')).toEqual([
-                    { display: 'Option 2', value: '2' },
-                    { display: 'Option 3', value: '3' },
-                ]);
-                expect(pill).toHaveAttribute('active');
-                expect(pill).toHaveAttribute('open');
-                expect(popover).toHaveAttribute('open');
-                await btnWrapper.click();
-                await page.waitForChanges();
-                expect(pill).toHaveAttribute('active');
-                expect(pill).not.toHaveAttribute('open');
-                expect(optionList).not.toHaveAttribute('open');
-                await closeBtn.click();
-                await page.waitForChanges();
-                expect(pill).not.toHaveAttribute('active');
-                expect(changeSpy).toHaveReceivedEventDetail({
-                    active: false,
-                    value: null,
-                    values: [],
-                });
-                expect(await optionList.getProperty('selectedOptions')).toEqual([]);
-            });
-            it('can select multiple options via mouse', async () => {
-                await pill.setProperty('multiple', true);
-                await page.waitForChanges();
-                let closeBtn = await page.find('q2-pill >>> .btn-close');
-                let closeIcon = await page.find('q2-pill >>> q2-icon');
-                const btnWrapper = await page.find('q2-pill >>> .btn-wrapper');
-                expect(pill).not.toHaveAttribute('active');
-                expect(await closeBtn.isVisible()).toBe(true);
-                expect(closeIcon).toEqualAttribute('type', 'chevron-down');
-                expect(btnWrapper.classList.contains('has-icon')).toBe(true);
-                expect(btnWrapper.classList.contains('has-options')).toBe(true);
-                expect(popover).not.toHaveAttribute('open');
-                expect(closeBtn.tagName).toEqual('DIV');
-                await pill.click();
-                await page.waitForChanges();
-                expect(pill).not.toHaveAttribute('active');
-                expect(pill).toHaveAttribute('open');
-                expect(popover).toHaveAttribute('open');
-                expect(await getFocusedTagName(page)).toEqual('Q2-PILL');
-                await allOptions[1].click();
-                await page.waitForChanges();
-                expect(pill).toHaveAttribute('active');
-                expect(pill).toHaveAttribute('open');
-                expect(popover).toHaveAttribute('open');
-                expect(changeSpy).toHaveReceivedEventDetail({
-                    active: true,
-                    value: '2',
-                    values: [{ display: 'Option 2', value: '2' }],
-                });
-                expect(await optionList.getProperty('selectedOptions')).toEqual([{ display: 'Option 2', value: '2' }]);
-                closeBtn = await page.find('q2-pill >>> .btn-close');
-                closeIcon = await page.find('q2-pill >>> q2-icon');
-                expect(closeBtn.tagName).toEqual('BUTTON');
-                expect(closeIcon).toEqualAttribute('type', 'close');
-                await allOptions[2].click();
-                await page.waitForChanges();
-                expect(changeSpy).toHaveReceivedEventDetail({
-                    active: true,
-                    value: '3',
-                    values: [
-                        { display: 'Option 2', value: '2' },
-                        { display: 'Option 3', value: '3' },
-                    ],
-                });
-                expect(await optionList.getProperty('selectedOptions')).toEqual([
-                    { display: 'Option 2', value: '2' },
-                    { display: 'Option 3', value: '3' },
-                ]);
-                expect(pill).toHaveAttribute('active');
-                expect(pill).toHaveAttribute('open');
-                expect(popover).toHaveAttribute('open');
-                await btnWrapper.click();
-                await page.waitForChanges();
-                expect(pill).toHaveAttribute('active');
-                expect(pill).not.toHaveAttribute('open');
-                expect(popover).not.toHaveAttribute('open');
-                await closeBtn.click();
-                await page.waitForChanges();
-                expect(pill).not.toHaveAttribute('active');
-                expect(changeSpy).toHaveReceivedEventDetail({
-                    active: false,
-                    value: null,
-                    values: [],
-                });
-                expect(await optionList.getProperty('selectedOptions')).toEqual([]);
-            });
-        });
-        describe('when keyboard is pressed', () => {
-            it('opens list and focuses first option on ArrowDown', async () => {
-                await controlBtn.press('ArrowDown');
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                expect(pill).toHaveAttribute('open');
-                expect(await getFocusedAttribute(page, 'value')).toEqual('1');
-            });
-            it('opens list and focuses last option on ArrowUp', async () => {
-                await controlBtn.press('ArrowUp');
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                expect(pill).toHaveAttribute('open');
-                expect(await getFocusedAttribute(page, 'value')).toEqual('3');
-            });
-            it('opens list and does not focus first option on Enter', async () => {
-                await controlBtn.press('Enter');
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                expect(pill).toHaveAttribute('open');
-                expect(await getActiveElementTestId(page)).toEqual('btn-control');
-            });
-            it('opens list and does not focus first option on Space', async () => {
-                await controlBtn.press(' ');
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                expect(pill).toHaveAttribute('open');
-                expect(await getActiveElementTestId(page)).toEqual('btn-control');
-            });
-            it('opens list and focuses last option on Home', async () => {
-                await controlBtn.press('Home');
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                expect(pill).toHaveAttribute('open');
-                expect(await getFocusedOptionValue(page)).toEqual('1');
-            });
-            it('opens list and focuses last option on End', async () => {
-                await controlBtn.press('End');
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                expect(pill).toHaveAttribute('open');
-                expect(await getFocusedAttribute(page, 'value')).toEqual('3');
-            });
-        });
-    });
-    describe('Props', () => {
         describe('label', () => {
             describe('when provided', () => {
                 it('renders with provided label', async () => {
@@ -816,96 +500,504 @@ describe('q2-pill', () => {
                 expect(await pill.getProperty('popoverAlignment')).toEqual('right');
             });
         });
-    });
-    describe('focus', () => {
-        let page;
-        let pill;
-        beforeEach(async () => {
-            page = await setup({
-                html: `
-                    <q2-pill label="My pill" value="my-pill-value">
+        describe('borderless', () => {
+            let page;
+            beforeEach(async () => {
+                page = await setup({
+                    html: `
+                    <q2-pill label="My pill" value="my-pill-value" borderless>
                         <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-pill>
                 `,
+                });
+            });
+            it('border style should be none when borderless', async function () {
+                const borderStyle = await page.$eval('q2-pill >>> button', el => {
+                    return window.getComputedStyle(el).getPropertyValue('border-style');
+                });
+                expect(borderStyle).toEqual('none');
             });
-            pill = await page.find('q2-pill');
-        });
-        it('focuses active option and opens the list when focus event is dispatched', async function () {
-            await pill.triggerEvent('focus');
-            await page.waitForChanges();
-            expect(await getFocusedAttribute(page, 'test-id')).toEqual('btn-control');
-        });
-        it('focuses active option and opens the list when element.focus() is called', async function () {
-            await pill.focus();
-            await page.waitForChanges();
-            expect(await getFocusedAttribute(page, 'test-id')).toEqual('btn-control');
         });
     });
-    describe('borderless', () => {
-        let page;
+    describe('Methods', () => {
         beforeEach(async () => {
             page = await setup({
                 html: `
-                    <q2-pill label="My pill" value="my-pill-value" borderless>
+                    <q2-pill label="My Pill">
                         <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-pill>
                 `,
             });
+            pill = await page.find('q2-pill');
         });
-        it('border style should be none when borerless', async function () {
-            const borderStyle = await page.$eval('q2-pill >>> button', el => {
-                return window.getComputedStyle(el).getPropertyValue('border-style');
-            });
-            expect(borderStyle).toEqual('none');
+        it('openPopover() opens the popover', async () => {
+            await pill.callMethod('openPopover');
+            await page.waitForChanges();
+            expect(pill).toHaveAttribute('open');
         });
-    });
-    describe('Regressions', () => {
-        describe('TCT-2161', () => {
-            it('leaves the element when Tab is pressed', async function () {
-                page = await setup({
-                    html: `
-                        <q2-pill label="My pill">
-                            <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-pill>
-                        <button test-id="btn-next">Test</button>
-                    `,
-                });
-                pill = await page.find('q2-pill');
-                await pill.focus();
-                expect(await getActiveElementTestId(page)).toEqual('btn-control');
-                await pill.press('Tab');
+        it('closePopover() closes the popover', async () => {
+            expect(pill).not.toHaveAttribute('open');
+            await pill.callMethod('openPopover');
+            await page.waitForChanges();
+            expect(pill).toHaveAttribute('open');
+            await pill.callMethod('closePopover');
+            await page.waitForChanges();
+            expect(pill).not.toHaveAttribute('open');
+        });
+        describe('setValue()', () => {
+            it('opens the popover, clicks the option matching the provided value, and closes the popover ', async () => {
+                const clickSpy = await pill.spyOnEvent('change');
+                await pill.callMethod('setValue', '1');
                 await page.waitForChanges();
-                expect(await getActiveElementTestId(page)).toEqual('btn-next');
+                expect(pill).not.toHaveAttribute('open');
+                expect(clickSpy).toHaveReceivedEventDetail({
+                    value: '1',
+                    values: [{ display: 'Option 1', value: '1' }],
+                    active: true,
+                });
+            });
+            describe('when multiple', () => {
+                it('opens the popover and selects the values matching the provided values', async () => {
+                    pill.setProperty('multiple', true);
+                    await page.waitForChanges();
+                    const clickSpy = await pill.spyOnEvent('change');
+                    await pill.callMethod('setValue', ['1', '3']);
+                    await page.waitForChanges();
+                    expect(pill).not.toHaveAttribute('open');
+                    expect(clickSpy).toHaveReceivedEventDetail({
+                        values: [
+                            { display: 'Option 1', value: '1' },
+                            { display: 'Option 3', value: '3' },
+                        ],
+                        active: true,
+                    });
+                });
+                it('keeps popover open when passed in args', async () => {
+                    pill.setProperty('multiple', true);
+                    await page.waitForChanges();
+                    const clickSpy = await pill.spyOnEvent('change');
+                    await pill.callMethod('setValue', ['1', '3'], { closePopover: false });
+                    await page.waitForChanges();
+                    expect(pill).toHaveAttribute('open');
+                    expect(clickSpy).toHaveReceivedEventDetail({
+                        values: [
+                            { display: 'Option 1', value: '1' },
+                            { display: 'Option 3', value: '3' },
+                        ],
+                        active: true,
+                    });
+                });
             });
         });
     });
-    describe('Accessibility', () => {
-        it("option-list should have a role of 'listbox' and the options a role of 'option'", async () => {
+    describe('Click', () => {
+        describe('when no options are provided', () => {
+            it('toggles active on click', async () => {
+                page = await setup({
+                    html: `<q2-pill label="My pill" value="my-pill-value"></q2-pill>`,
+                });
+                pill = await page.find('q2-pill');
+                const closeBtn = await page.find('q2-pill >>> .btn-close');
+                const closeIcon = await page.find('q2-pill >>> q2-icon');
+                const btnWrapper = await page.find('q2-pill >>> .btn-wrapper');
+                const changeSpy = await pill.spyOnEvent('change');
+                expect(pill).not.toHaveAttribute('active');
+                expect(await closeBtn.isVisible()).toBe(false);
+                expect(closeIcon).toEqualAttribute('type', 'close');
+                expect(btnWrapper.classList.contains('has-icon')).toBe(false);
+                expect(btnWrapper.classList.contains('has-options')).toBe(false);
+                await pill.click();
+                await page.waitForChanges();
+                expect(pill).toHaveAttribute('active');
+                expect(await closeBtn.isVisible()).toBe(true);
+                expect(btnWrapper.classList.contains('has-icon')).toBe(true);
+                expect(btnWrapper.classList.contains('has-options')).toBe(false);
+                expect(changeSpy).toHaveReceivedEventDetail({
+                    active: true,
+                    value: 'my-pill-value',
+                    values: [{ display: 'My pill', value: 'my-pill-value' }],
+                });
+                await pill.click();
+                await page.waitForChanges();
+                expect(pill).not.toHaveAttribute('active');
+                expect(await closeBtn.isVisible()).toBe(false);
+                expect(btnWrapper.classList.contains('has-icon')).toBe(false);
+                expect(btnWrapper.classList.contains('has-options')).toBe(false);
+                expect(changeSpy).toHaveReceivedEventDetail({
+                    active: false,
+                    value: 'my-pill-value',
+                    values: [],
+                });
+            });
+        });
+        describe('when options are provided', () => {
+            beforeEach(async () => {
+                page = await setup({
+                    html: `
+                    <q2-pill label="My pill">
+                        <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-pill>
+                `,
+                });
+                pill = await page.find('q2-pill');
+                allOptions = await page.findAll('q2-option');
+                optionList = await page.find('q2-pill >>> q2-option-list');
+                popover = await page.find('q2-pill >>> q2-popover');
+                optionContainer = await page.find('q2-pill >>> q2-option-list >>> .options');
+                controlBtn = await page.find('q2-pill >>> .btn-primary');
+                changeSpy = await pill.spyOnEvent('change');
+            });
+            it('can select options via mouse', async () => {
+                let closeBtn = await page.find('q2-pill >>> .btn-close');
+                let closeIcon = await page.find('q2-pill >>> q2-icon');
+                const btnWrapper = await page.find('q2-pill >>> .btn-wrapper');
+                expect(pill).not.toHaveAttribute('active');
+                expect(await closeBtn.isVisible()).toBe(true);
+                expect(closeIcon).toEqualAttribute('type', 'chevron-down');
+                expect(btnWrapper.classList.contains('has-icon')).toBe(true);
+                expect(btnWrapper.classList.contains('has-options')).toBe(true);
+                expect(popover).not.toHaveAttribute('open');
+                expect(closeBtn.tagName).toEqual('DIV');
+                await pill.click();
+                await page.waitForChanges();
+                expect(pill).not.toHaveAttribute('active');
+                expect(pill).toHaveAttribute('open');
+                expect(popover).toHaveAttribute('open');
+                expect(await getFocusedTagName(page)).toEqual('Q2-PILL');
+                await allOptions[1].click();
+                await page.waitForChanges();
+                expect(changeSpy).toHaveReceivedEventDetail({
+                    active: true,
+                    value: '2',
+                    values: [{ display: 'Option 2', value: '2' }],
+                });
+                expect(await optionList.getProperty('selectedOptions')).toEqual([{ display: 'Option 2', value: '2' }]);
+                closeBtn = await page.find('q2-pill >>> .btn-close');
+                closeIcon = await page.find('q2-pill >>> q2-icon');
+                expect(closeBtn.tagName).toEqual('BUTTON');
+                expect(closeIcon).toEqualAttribute('type', 'close');
+                await closeBtn.click();
+                await page.waitForChanges();
+                expect(pill).not.toHaveAttribute('active');
+                expect(changeSpy).toHaveReceivedEventDetail({
+                    active: false,
+                    value: null,
+                    values: [],
+                });
+                expect(await optionList.getProperty('selectedOptions')).toEqual([]);
+            });
+            describe('when multiple', () => {
+                it('can select multiple options via mouse', async () => {
+                    pill.setProperty('multiple', true);
+                    await page.waitForChanges();
+                    let closeBtn = await page.find('q2-pill >>> .btn-close');
+                    let closeIcon = await page.find('q2-pill >>> q2-icon');
+                    const btnWrapper = await page.find('q2-pill >>> .btn-wrapper');
+                    expect(pill).not.toHaveAttribute('active');
+                    expect(await closeBtn.isVisible()).toBe(true);
+                    expect(closeIcon).toEqualAttribute('type', 'chevron-down');
+                    expect(btnWrapper.classList.contains('has-icon')).toBe(true);
+                    expect(btnWrapper.classList.contains('has-options')).toBe(true);
+                    expect(popover).not.toHaveAttribute('open');
+                    expect(closeBtn.tagName).toEqual('DIV');
+                    await pill.click();
+                    await page.waitForChanges();
+                    expect(pill).not.toHaveAttribute('active');
+                    expect(pill).toHaveAttribute('open');
+                    expect(popover).toHaveAttribute('open');
+                    expect(await getFocusedTagName(page)).toEqual('Q2-PILL');
+                    await allOptions[1].click();
+                    await page.waitForChanges();
+                    expect(pill).toHaveAttribute('active');
+                    expect(pill).toHaveAttribute('open');
+                    expect(popover).toHaveAttribute('open');
+                    expect(changeSpy).toHaveReceivedEventDetail({
+                        active: true,
+                        values: [{ display: 'Option 2', value: '2' }],
+                    });
+                    expect(await optionList.getProperty('selectedOptions')).toEqual([
+                        { display: 'Option 2', value: '2' },
+                    ]);
+                    closeBtn = await page.find('q2-pill >>> .btn-close');
+                    closeIcon = await page.find('q2-pill >>> q2-icon');
+                    expect(closeBtn.tagName).toEqual('BUTTON');
+                    expect(closeIcon).toEqualAttribute('type', 'close');
+                    await allOptions[2].click();
+                    await page.waitForChanges();
+                    expect(changeSpy).toHaveReceivedEventDetail({
+                        active: true,
+                        values: [
+                            { display: 'Option 2', value: '2' },
+                            { display: 'Option 3', value: '3' },
+                        ],
+                    });
+                    expect(await optionList.getProperty('selectedOptions')).toEqual([
+                        { display: 'Option 2', value: '2' },
+                        { display: 'Option 3', value: '3' },
+                    ]);
+                    expect(pill).toHaveAttribute('active');
+                    expect(pill).toHaveAttribute('open');
+                    expect(popover).toHaveAttribute('open');
+                    await btnWrapper.click();
+                    await page.waitForChanges();
+                    expect(pill).toHaveAttribute('active');
+                    expect(pill).not.toHaveAttribute('open');
+                    expect(popover).not.toHaveAttribute('open');
+                    await closeBtn.click();
+                    await page.waitForChanges();
+                    expect(pill).not.toHaveAttribute('active');
+                    expect(changeSpy).toHaveReceivedEventDetail({
+                        active: false,
+                        value: null,
+                        values: [],
+                    });
+                    expect(await optionList.getProperty('selectedOptions')).toEqual([]);
+                });
+            });
+        });
+    });
+    describe('Keyboard', () => {
+        beforeEach(async () => {
             page = await setup({
                 html: `
-                    <q2-pill label="My pill" open>
+                    <q2-pill label="My pill">
                         <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-pill>
                 `,
             });
+            pill = await page.find('q2-pill');
+            allOptions = await page.findAll('q2-option');
+            optionList = await page.find('q2-pill >>> q2-option-list');
+            popover = await page.find('q2-pill >>> q2-popover');
+            optionContainer = await page.find('q2-pill >>> q2-option-list >>> .options');
+            controlBtn = await page.find('q2-pill >>> .btn-primary');
+            changeSpy = await pill.spyOnEvent('change');
+        });
+        describe('pill button interactions', () => {
+            it('opens list and focuses first option on ArrowDown', async () => {
+                await controlBtn.press('ArrowDown');
+                await page.waitForChanges();
+                expect(popover).toHaveAttribute('open');
+                expect(pill).toHaveAttribute('open');
+                expect(await getFocusedAttribute(page, 'value')).toEqual('1');
+            });
+            it('opens list and focuses last option on ArrowUp', async () => {
+                await controlBtn.press('ArrowUp');
+                await page.waitForChanges();
+                expect(popover).toHaveAttribute('open');
+                expect(pill).toHaveAttribute('open');
+                expect(await getFocusedAttribute(page, 'value')).toEqual('3');
+            });
+            it('opens list and does not focus first option on Enter', async () => {
+                await controlBtn.press('Enter');
+                await page.waitForChanges();
+                expect(popover).toHaveAttribute('open');
+                expect(pill).toHaveAttribute('open');
+                expect(await getActiveElementTestId(page)).toEqual('btn-control');
+            });
+            it('opens list and does not focus first option on Space', async () => {
+                await controlBtn.press(' ');
+                await page.waitForChanges();
+                expect(popover).toHaveAttribute('open');
+                expect(pill).toHaveAttribute('open');
+                expect(await getActiveElementTestId(page)).toEqual('btn-control');
+            });
+            it('opens list and focuses last option on Home', async () => {
+                await controlBtn.press('Home');
+                await page.waitForChanges();
+                expect(popover).toHaveAttribute('open');
+                expect(pill).toHaveAttribute('open');
+                expect(await getFocusedOptionValue(page)).toEqual('1');
+            });
+            it('opens list and focuses last option on End', async () => {
+                await controlBtn.press('End');
+                await page.waitForChanges();
+                expect(popover).toHaveAttribute('open');
+                expect(pill).toHaveAttribute('open');
+                expect(await getFocusedAttribute(page, 'value')).toEqual('3');
+            });
+        });
+        describe('option list interactions', () => {
+            it('can select options via keyboard', async () => {
+                let closeBtn = await page.find('q2-pill >>> .btn-close');
+                let closeIcon = await page.find('q2-pill >>> q2-icon');
+                const btnWrapper = await page.find('q2-pill >>> .btn-wrapper');
+                expect(pill).not.toHaveAttribute('active');
+                expect(await closeBtn.isVisible()).toBe(true);
+                expect(closeIcon).toEqualAttribute('type', 'chevron-down');
+                expect(btnWrapper.classList.contains('has-icon')).toBe(true);
+                expect(btnWrapper.classList.contains('has-options')).toBe(true);
+                expect(popover).not.toHaveAttribute('open');
+                expect(closeBtn.tagName).toEqual('DIV');
+                await controlBtn.press('ArrowDown');
+                await page.waitForChanges();
+                expect(pill).not.toHaveAttribute('active');
+                expect(pill).toHaveAttribute('open');
+                expect(popover).toHaveAttribute('open');
+                expect(await getFocusedOptionValue(page)).toEqual('1');
+                await optionContainer.press('ArrowDown');
+                await page.waitForChanges();
+                expect(await getFocusedOptionValue(page)).toEqual('2');
+                await allOptions[1].press(' ');
+                await page.waitForChanges();
+                expect(pill).toHaveAttribute('active');
+                expect(pill).not.toHaveAttribute('open');
+                expect(popover).not.toHaveAttribute('open');
+                expect(changeSpy).toHaveReceivedEventDetail({
+                    active: true,
+                    value: '2',
+                    values: [{ display: 'Option 2', value: '2' }],
+                });
+                expect(await optionList.getProperty('selectedOptions')).toEqual([{ display: 'Option 2', value: '2' }]);
+                closeBtn = await page.find('q2-pill >>> .btn-close');
+                closeIcon = await page.find('q2-pill >>> q2-icon');
+                expect(closeBtn.tagName).toEqual('BUTTON');
+                expect(closeIcon).toEqualAttribute('type', 'close');
+                await closeBtn.press(' ');
+                await page.waitForChanges();
+                expect(pill).not.toHaveAttribute('active');
+                expect(changeSpy).toHaveReceivedEventDetail({
+                    active: false,
+                    value: null,
+                    values: [],
+                });
+                expect(await optionList.getProperty('selectedOptions')).toEqual([]);
+            });
+            describe('when multiple', () => {
+                it('can select multiple options via keyboard', async () => {
+                    pill.setProperty('multiple', true);
+                    await page.waitForChanges();
+                    let closeBtn = await page.find('q2-pill >>> .btn-close');
+                    let closeIcon = await page.find('q2-pill >>> q2-icon');
+                    const btnWrapper = await page.find('q2-pill >>> .btn-wrapper');
+                    expect(pill).not.toHaveAttribute('active');
+                    expect(await closeBtn.isVisible()).toBe(true);
+                    expect(closeIcon).toEqualAttribute('type', 'chevron-down');
+                    expect(btnWrapper.classList.contains('has-icon')).toBe(true);
+                    expect(btnWrapper.classList.contains('has-options')).toBe(true);
+                    expect(popover).not.toHaveAttribute('open');
+                    expect(closeBtn.tagName).toEqual('DIV');
+                    await controlBtn.press('ArrowDown');
+                    await page.waitForChanges();
+                    expect(pill).not.toHaveAttribute('active');
+                    expect(pill).toHaveAttribute('open');
+                    expect(popover).toHaveAttribute('open');
+                    expect(await getFocusedOptionValue(page)).toEqual('1');
+                    await optionContainer.press('ArrowDown');
+                    await page.waitForChanges();
+                    expect(await getFocusedOptionValue(page)).toEqual('2');
+                    await allOptions[1].press(' ');
+                    await page.waitForChanges();
+                    expect(pill).toHaveAttribute('active');
+                    expect(pill).toHaveAttribute('open');
+                    expect(popover).toHaveAttribute('open');
+                    expect(changeSpy).toHaveReceivedEventDetail({
+                        active: true,
+                        values: [{ display: 'Option 2', value: '2' }],
+                    });
+                    expect(await optionList.getProperty('selectedOptions')).toEqual([
+                        { display: 'Option 2', value: '2' },
+                    ]);
+                    closeBtn = await page.find('q2-pill >>> .btn-close');
+                    closeIcon = await page.find('q2-pill >>> q2-icon');
+                    expect(closeBtn.tagName).toEqual('BUTTON');
+                    expect(closeIcon).toEqualAttribute('type', 'close');
+                    await optionContainer.press('ArrowDown');
+                    await page.waitForChanges();
+                    expect(await getFocusedOptionValue(page)).toEqual('3');
+                    await allOptions[2].press(' ');
+                    await page.waitForChanges();
+                    expect(changeSpy).toHaveReceivedEventDetail({
+                        active: true,
+                        values: [
+                            { display: 'Option 2', value: '2' },
+                            { display: 'Option 3', value: '3' },
+                        ],
+                    });
+                    expect(await optionList.getProperty('selectedOptions')).toEqual([
+                        { display: 'Option 2', value: '2' },
+                        { display: 'Option 3', value: '3' },
+                    ]);
+                    expect(pill).toHaveAttribute('active');
+                    expect(pill).toHaveAttribute('open');
+                    expect(popover).toHaveAttribute('open');
+                    await btnWrapper.click();
+                    await page.waitForChanges();
+                    expect(pill).toHaveAttribute('active');
+                    expect(pill).not.toHaveAttribute('open');
+                    expect(optionList).not.toHaveAttribute('open');
+                    await closeBtn.click();
+                    await page.waitForChanges();
+                    expect(pill).not.toHaveAttribute('active');
+                    expect(changeSpy).toHaveReceivedEventDetail({
+                        active: false,
+                        value: null,
+                        values: [],
+                    });
+                    expect(await optionList.getProperty('selectedOptions')).toEqual([]);
+                });
+            });
+        });
+    });
+    describe('Focus', () => {
+        let page;
+        let pill;
+        beforeEach(async () => {
+            page = await setup({
+                html: `
+                        <q2-pill label="My pill" value="my-pill-value">
+                            <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-pill>
+                    `,
+            });
+            pill = await page.find('q2-pill');
+        });
+        it('focuses the <button> element when focus event is dispatched', async function () {
+            pill.triggerEvent('focus');
             await page.waitForChanges();
-            const snapshot = await page.accessibility.snapshot();
-            const button = snapshot.children[0].children[0];
-            const optionList = snapshot.children[1];
-            expect(button.role).toEqual('combobox');
-            expect(optionList.role).toEqual('listbox');
-            expect(optionList.children).toHaveLength(3);
-            optionList.children.forEach(child => {
-                expect(child.role).toEqual('option');
-                expect(child.name).toBeTruthy();
+            expect(await getFocusedAttribute(page, 'test-id')).toEqual('btn-control');
+        });
+    });
+    describe('Regressions', () => {
+        describe('TCT-2161', () => {
+            it('leaves the element when Tab is pressed', async function () {
+                page = await setup({
+                    html: `
+                            <q2-pill label="My pill">
+                                <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-pill>
+                            <button test-id="btn-next">Test</button>
+                        `,
+                });
+                pill = await page.find('q2-pill');
+                await pill.focus();
+                expect(await getActiveElementTestId(page)).toEqual('btn-control');
+                await pill.press('Tab');
+                await page.waitForChanges();
+                expect(await getActiveElementTestId(page)).toEqual('btn-next');
+            });
+        });
+        describe('TCT-2433', () => {
+            it('zero is not rendered inside the click-elsewhere element', async () => {
+                page = await setup({
+                    html: `<q2-pill label="My Pill"></q2-pill>`,
+                });
+                pill = await page.find('q2-pill');
+                const clickElsewhere = await page.find('q2-pill >>> click-elsewhere');
+                expect(await pill.getProperty('label')).toBe('My Pill');
+                expect(clickElsewhere.textContent.slice(-1)).not.toBe('0');
             });
         });
     });