@patternfly/elements 3.0.1 → 4.0.0

package/pf-select/test/pf-select.spec.js

@@ -1,18 +1,19 @@
-import { expect, html, nextFrame } from '@open-wc/testing';
+import { expect, html, aTimeout, nextFrame } from '@open-wc/testing';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
 import { PfSelect } from '../pf-select.js';
 import { sendKeys } from '@web/test-runner-commands';
-import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
-async function shiftHold() {
+import { a11ySnapshot, querySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { clickElementAtCenter, clickElementAtOffset } from '@patternfly/pfe-tools/test/utils.js';
+async function holdShift() {
     await sendKeys({ down: 'Shift' });
 }
-async function shiftRelease() {
+async function releaseShift() {
     await sendKeys({ up: 'Shift' });
 }
-async function ctrlA() {
+async function holdCtrl() {
     await sendKeys({ down: 'Control' });
-    await sendKeys({ down: 'a' });
-    await sendKeys({ up: 'a' });
+}
+async function releaseCtrl() {
     await sendKeys({ up: 'Control' });
 }
 function press(key) {
@@ -20,32 +21,334 @@ function press(key) {
         await sendKeys({ press: key });
     };
 }
-function getValues(element) {
-    return [element.selected].flat().filter(x => !!x).map(x => x.value);
+/**
+ * Compare selection to an array of strings
+ * @param element pf-select
+ * @returns a list of values of each selected option
+ */
+function getSelectedOptionValues(element) {
+    return Array.from(element.querySelectorAll('[selected]'), x => x.value);
+}
+// a11yShapshot does not surface the options
+function getVisibleOptionValues(element) {
+    return element.options.filter(x => !x.hidden).map(x => x.value);
+}
+// a11yShapshot does not surface the options
+function getActiveOption(element) {
+    return element.options.find(x => x.active);
+}
+/**
+ * NOTE because of the copy-to-shadow-root shtick in ActivedescendantController,
+ * we can't just pick an option (from light dom);
+ * @param element pf-select
+ * @param index item index
+ */
+async function clickItemAtIndex(element, index) {
+    const itemHeight = 44;
+    await clickElementAtOffset(element, [
+        10,
+        element.offsetHeight + (itemHeight * (index + 1)) - itemHeight / 2,
+    ], {
+        allowOutOfBounds: true,
+    });
 }
 describe('<pf-select>', function () {
-    let element;
-    const updateComplete = () => element.updateComplete;
-    const focus = () => element.focus();
-    describe('simply instantiating', function () {
-        it('imperatively instantiates', function () {
-            expect(document.createElement('pf-select')).to.be.an.instanceof(PfSelect);
-        });
-        it('should upgrade', async function () {
-            element = await createFixture(html `<pf-select></pf-select>`);
-            const klass = customElements.get('pf-select');
-            expect(element)
-                .to.be.an.instanceOf(klass)
-                .and
-                .to.be.an.instanceOf(PfSelect);
+    it('imperatively instantiates', function () {
+        expect(document.createElement('pf-select')).to.be.an.instanceof(PfSelect);
+    });
+    it('should upgrade', async function () {
+        expect(await createFixture(html `<pf-select></pf-select>`))
+            .to.be.an.instanceOf(customElements.get('pf-select'))
+            .and
+            .to.be.an.instanceOf(PfSelect);
+    });
+    describe('with accessible-label attribute and 3 items', function () {
+        let element;
+        const updateComplete = () => element.updateComplete;
+        const focus = () => element.focus;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-select accessible-label="label">
+          <pf-option value="1">1</pf-option>
+          <pf-option value="2">2</pf-option>
+          <pf-option value="3">3</pf-option>
+        </pf-select>`);
+        });
+        it('passes aXe audit', async function () {
+            await expect(element).to.be.accessible();
+        });
+        it('labels the combobox with the accessible-label attribuet', async function () {
+            expect(await a11ySnapshot()).to.axContainQuery({
+                role: 'combobox',
+                name: 'label',
+            });
+        });
+        it('does not have redundant role', async function () {
+            expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+        });
+        it('sets aria-setsize="3" and aria-posinset on items', function () {
+            element.options.forEach((option, i) => {
+                expect(option).to.have.attr('aria-setsize', '3');
+                expect(option).to.have.attr('aria-posinset', `${i + 1}`);
+            });
+        });
+        describe('focus()', function () {
+            beforeEach(focus);
+            beforeEach(updateComplete);
+            describe('ArrowDown', function () {
+                beforeEach(press('ArrowDown'));
+                it('labels the listbox with the accessible-label attribute', async function () {
+                    expect(await a11ySnapshot()).to.axContainQuery({
+                        role: 'listbox',
+                        name: 'label',
+                    });
+                });
+                it('focuses on the first item', async function () {
+                    expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+                });
+                describe('Space', function () {
+                    beforeEach(press(' '));
+                    beforeEach(updateComplete);
+                    it('selects option 1', function () {
+                        expect(getSelectedOptionValues(element)).to.deep.equal([
+                            '1',
+                        ]);
+                    });
+                    it('exposes selection to assistive technology', async function () {
+                        expect(await a11ySnapshot()).to.axContainQuery({
+                            role: 'combobox',
+                            value: '1',
+                        });
+                    });
+                });
+            });
+        });
+    });
+    describe('with `placeholder` attribute and 3 items', function () {
+        let element;
+        const updateComplete = () => element.updateComplete;
+        const focus = () => element.focus;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-select placeholder="placeholder">
+          <pf-option value="1">1</pf-option>
+          <pf-option value="2">2</pf-option>
+          <pf-option value="3">3</pf-option>
+        </pf-select>`);
+        });
+        it('passes aXe audit', async function () {
+            await expect(element).to.be.accessible();
+        });
+        it('labels the combobox with the placeholder attribute', async function () {
+            expect(await a11ySnapshot()).to.axContainQuery({
+                role: 'combobox',
+                name: 'placeholder',
+            });
+        });
+        it('does not have redundant role', async function () {
+            expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+        });
+        it('sets aria-setsize="4" and aria-posinset on items', function () {
+            element.options.forEach((option, i) => {
+                expect(option).to.have.attr('aria-setsize', '4');
+                expect(option).to.have.attr('aria-posinset', `${i + 1}`);
+            });
+        });
+        describe('focus()', function () {
+            beforeEach(focus);
+            beforeEach(updateComplete);
+            describe('ArrowDown', function () {
+                beforeEach(press('ArrowDown'));
+                it('labels the listbox with the placeholder attribute', async function () {
+                    expect(await a11ySnapshot()).to.axContainQuery({
+                        role: 'listbox',
+                        name: 'placeholder',
+                    });
+                });
+                it('focuses on the placeholder item', async function () {
+                    expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('placeholder');
+                });
+                describe('Space', function () {
+                    beforeEach(press(' '));
+                    beforeEach(updateComplete);
+                    it('selects nothing', async function () {
+                        expect(await a11ySnapshot()).to.axContainRole('listbox');
+                    });
+                    it('does not close the listbox nothing', function () {
+                        expect(getSelectedOptionValues(element)).to.deep.equal([]);
+                    });
+                    describe('ArrowDown', function () {
+                        beforeEach(press('ArrowDown'));
+                        beforeEach(updateComplete);
+                        it('focuses on the first item', async function () {
+                            expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+                        });
+                        describe('Space', function () {
+                            beforeEach(press(' '));
+                            beforeEach(updateComplete);
+                            it('selects option 1', function () {
+                                expect(getSelectedOptionValues(element)).to.deep.equal([
+                                    '1',
+                                ]);
+                            });
+                            it('exposes selection to assistive technology', async function () {
+                                expect(await a11ySnapshot()).to.axContainQuery({
+                                    role: 'combobox',
+                                    value: '1',
+                                });
+                            });
+                        });
+                    });
+                });
+            });
+        });
+    });
+    describe('with 3 items and associated <label> elements', function () {
+        let element;
+        const updateComplete = () => element.updateComplete;
+        const focus = () => element.focus;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-select id="select">
+          <pf-option value="1">1</pf-option>
+          <pf-option value="2">2</pf-option>
+          <pf-option value="3">3</pf-option>
+        </pf-select>
+        <label for="select">label1</label>
+        <label for="select">label2</label>
+        `);
+        });
+        it('passes aXe audit', async function () {
+            await expect(element).to.be.accessible();
+        });
+        it('does not have redundant role', async function () {
+            expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+        });
+        it('labels the combobox with the label elements', async function () {
+            expect(await a11ySnapshot()).to.axContainQuery({
+                role: 'combobox',
+                name: 'label1label2',
+            });
+        });
+        it('sets aria-setsize="3" and aria-posinset on items', function () {
+            element.options.forEach((option, i) => {
+                expect(option).to.have.attr('aria-setsize', '3');
+                expect(option).to.have.attr('aria-posinset', `${i + 1}`);
+            });
+        });
+        describe('focus()', function () {
+            beforeEach(focus);
+            beforeEach(updateComplete);
+            describe('ArrowDown', function () {
+                beforeEach(press('ArrowDown'));
+                it('labels the listbox with the label elements', async function () {
+                    expect(await a11ySnapshot()).to.axContainQuery({
+                        role: 'listbox',
+                        name: 'label1label2',
+                    });
+                });
+                it('focuses on the first item', async function () {
+                    expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+                });
+                describe('Space', function () {
+                    beforeEach(press(' '));
+                    beforeEach(updateComplete);
+                    it('selects option 1', function () {
+                        expect(getSelectedOptionValues(element)).to.deep.equal([
+                            '1',
+                        ]);
+                    });
+                    it('exposes selection to assistive technology', async function () {
+                        expect(await a11ySnapshot()).to.axContainQuery({
+                            role: 'combobox',
+                            value: '1',
+                        });
+                    });
+                });
+            });
+        });
+    });
+    describe('in a deep shadow root', function () {
+        let element;
+        const focus = () => element.focus();
+        const updateComplete = () => element.updateComplete;
+        beforeEach(async function () {
+            const fixture = await createFixture(html `
+      <shadow-root>
+        <template shadowrootmode="open">
+          <shadow-root>
+            <template shadowrootmode="open">
+              <pf-select variant="single"
+                         accessible-label="Choose a number"
+                         placeholder="Choose a number">
+                <pf-option value="1">1</pf-option>
+                <pf-option value="2">2</pf-option>
+                <pf-option value="3">3</pf-option>
+                <pf-option value="4">4</pf-option>
+                <pf-option value="5">5</pf-option>
+                <pf-option value="6">6</pf-option>
+                <pf-option value="7">7</pf-option>
+                <pf-option value="8">8</pf-option>
+              </pf-select>
+            </template>
+          </shadow-root>
+        </template>
+      </shadow-root>`);
+            function attachShadowRoots(root) {
+                root?.querySelectorAll('template[shadowrootmode]').forEach(template => {
+                    const mode = template.getAttribute('shadowrootmode');
+                    const shadowRoot = template.parentElement?.attachShadow?.({ mode });
+                    shadowRoot?.appendChild(template.content);
+                    template.remove();
+                    attachShadowRoots(shadowRoot);
+                });
+            }
+            attachShadowRoots(document);
+            const select = fixture.shadowRoot?.firstElementChild?.shadowRoot?.querySelector('pf-select');
+            if (select) {
+                element = select;
+                await element?.updateComplete;
+            }
+            else {
+                throw new Error('no element!');
+            }
+        });
+        describe('expanding', function () {
+            beforeEach(focus);
+            beforeEach(press('Enter'));
+            describe('ArrowDown', function () {
+                beforeEach(press('ArrowDown'));
+                beforeEach(updateComplete);
+                it('remains expanded', function () {
+                    expect(element.expanded).to.be.true;
+                });
+                describe('ArrowDown', function () {
+                    beforeEach(press('ArrowDown'));
+                    beforeEach(updateComplete);
+                    it('remains expanded', function () {
+                        expect(element.expanded).to.be.true;
+                    });
+                    describe('Space', function () {
+                        beforeEach(press(' '));
+                        beforeEach(updateComplete);
+                        it('closes', function () {
+                            expect(element.expanded).to.be.false;
+                        });
+                        it('sets value', function () {
+                            expect(element.value).to.equal('2');
+                        });
+                    });
+                });
+            });
         });
     });
-    describe('variant="single"', function () {
+    describe('with 8 items', function () {
+        let element;
+        const updateComplete = () => element.updateComplete;
+        const focus = () => element.focus();
         beforeEach(async function () {
             element = await createFixture(html `
-        <pf-select variant="single"
-                   accessible-label="Choose a number"
-                   placeholder="Choose a number">
+        <pf-select>
           <pf-option value="1">1</pf-option>
           <pf-option value="2">2</pf-option>
           <pf-option value="3">3</pf-option>
@@ -56,402 +359,538 @@ describe('<pf-select>', function () {
           <pf-option value="8">8</pf-option>
         </pf-select>`);
         });
-        it('is accessible', async function () {
-            await expect(element).to.be.accessible();
+        it('does not pass aXe audit', async function () {
+            await expect(element).to.not.be.accessible();
         });
-        describe('without accessible label', function () {
-            beforeEach(function () {
-                element.accessibleLabel = undefined;
+        it('sets aria-setsize and aria-posinset on items', function () {
+            element.options.forEach((option, i) => {
+                expect(option).to.have.attr('aria-setsize', '8');
+                expect(option).to.have.attr('aria-posinset', `${i + 1}`);
             });
+        });
+        describe('click combobox button', function () {
+            beforeEach(() => clickElementAtCenter(element));
             beforeEach(updateComplete);
-            it('fails accessibility audit', async function () {
+            it('does not pass aXe audit', async function () {
                 await expect(element).to.not.be.accessible();
             });
-        });
-        describe('calling focus())', function () {
-            beforeEach(function () {
-                element.focus();
+            it('expands the listbox', async function () {
+                expect(await a11ySnapshot()).to.axContainRole('listbox');
+            });
+            it('focuses on the first item', async function () {
+                expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+            });
+            describe('Tab', function () {
+                beforeEach(press('Tab'));
+                it('does not focus the combobox button', async function () {
+                    expect(await a11ySnapshot()).to.not.have.axTreeFocusedNode;
+                });
             });
+        });
+        describe('focus()', function () {
+            beforeEach(focus);
             beforeEach(updateComplete);
-            describe('pressing Enter', function () {
+            it('focuses on the combobox button', async function () {
+                expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
+            });
+            it('does not expand the listbox', async function () {
+                expect(element.expanded).to.be.false;
+                expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+            });
+            describe('Enter', function () {
                 beforeEach(press('Enter'));
                 beforeEach(updateComplete);
-                it('expands', async function () {
+                it('expands the listbox', async function () {
                     expect(element.expanded).to.be.true;
-                    const snapshot = await a11ySnapshot();
-                    const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                    expect(listbox).to.be.ok;
+                    expect(await a11ySnapshot()).to.axContainRole('listbox');
                 });
-                it('focuses on the placeholder', async function () {
-                    const snapshot = await a11ySnapshot();
-                    const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                    const focused = listbox?.children?.find(x => x.focused);
-                    expect(focused?.name).to.equal('Choose a number');
+                it('focuses on the first item', async function () {
+                    expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
                 });
             });
-            describe('pressing Space', function () {
+            describe('Space', function () {
+                beforeEach(function () {
+                    document.body.style.height = '8000px';
+                });
+                afterEach(function () {
+                    document.body.style.height = 'initial';
+                });
                 beforeEach(press(' '));
                 beforeEach(updateComplete);
-                it('expands', async function () {
-                    expect(element.expanded).to.be.true;
-                    const snapshot = await a11ySnapshot();
-                    expect(snapshot.children?.at(1)).to.be.ok;
-                    expect(snapshot.children?.at(1)?.role).to.equal('listbox');
+                beforeEach(() => aTimeout(300));
+                it('expands the listbox', async function () {
+                    expect(await a11ySnapshot()).to.axContainRole('listbox');
                 });
-                it('focuses on the placeholder', async function () {
-                    const snapshot = await a11ySnapshot();
-                    const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                    const focused = listbox?.children?.find(x => x.focused);
-                    expect(focused?.name).to.equal('Choose a number');
+                it('focuses on the first item', async function () {
+                    expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+                });
+                it('does not scroll the screen', function () {
+                    expect(window.scrollY).to.equal(0);
+                });
+            });
+            describe('Home', function () {
+                beforeEach(press('Home'));
+                beforeEach(updateComplete);
+                it('expands the listbox', async function () {
+                    expect(await a11ySnapshot()).to.axContainRole('listbox');
+                });
+                it('focuses on option 1', async function () {
+                    expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+                });
+            });
+            describe('End', function () {
+                beforeEach(press('End'));
+                beforeEach(updateComplete);
+                it('expands the listbox', async function () {
+                    expect(await a11ySnapshot()).to.axContainRole('listbox');
+                });
+                it('focuses on option 8', async function () {
+                    expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('8');
                 });
             });
-            describe('pressing ArrowDown', function () {
+            describe('ArrowDown', function () {
                 beforeEach(press('ArrowDown'));
                 beforeEach(updateComplete);
-                it('expands', async function () {
+                it('expands the listbox', async function () {
                     expect(element.expanded).to.be.true;
-                    const snapshot = await a11ySnapshot();
-                    const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                    expect(listbox).to.be.ok;
+                    expect(await a11ySnapshot()).to.axContainRole('listbox');
                 });
-                it('focuses on option 1', async function () {
-                    const snapshot = await a11ySnapshot();
-                    const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                    const focused = listbox?.children?.find(x => x.focused);
-                    expect(focused?.name).to.equal('Choose a number');
+                it('focuses on the first item', async function () {
+                    expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
                 });
-                describe('then pressing ArrowUp', function () {
+                describe('ArrowUp', function () {
                     beforeEach(press('ArrowUp'));
                     beforeEach(updateComplete);
                     it('focuses on the last option', async function () {
-                        const snapshot = await a11ySnapshot();
-                        const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                        const focused = listbox?.children?.find(x => x.focused);
-                        expect(focused?.name).to.equal('8');
+                        expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('8');
                     });
-                    describe('then pressing ArrowDown', function () {
+                    describe('ArrowDown', function () {
                         beforeEach(press('ArrowDown'));
                         beforeEach(updateComplete);
-                        it('focuses on the placeholder', async function () {
-                            const snapshot = await a11ySnapshot();
-                            const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                            const focused = listbox?.children?.find(x => x.focused);
-                            expect(focused?.name).to.equal('Choose a number');
+                        it('focuses on option 1', async function () {
+                            expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
                         });
                     });
                 });
-                describe('then pressing ArrowDown', function () {
+                describe('ArrowDown', function () {
                     beforeEach(press('ArrowDown'));
                     beforeEach(updateComplete);
-                    it('focuses on option 1', async function () {
-                        const snapshot = await a11ySnapshot();
-                        const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                        const focused = listbox?.children?.find(x => x.focused);
-                        expect(focused?.name).to.equal('1');
+                    it('focuses on option 2', async function () {
+                        expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('2');
                     });
-                    describe('then pressing ArrowUp', function () {
+                    describe('ArrowUp', function () {
                         beforeEach(press('ArrowUp'));
                         beforeEach(updateComplete);
-                        it('focuses on the placeholder', async function () {
-                            const snapshot = await a11ySnapshot();
-                            const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                            const focused = listbox?.children?.find(x => x.focused);
-                            expect(focused?.name).to.equal('Choose a number');
+                        it('focuses on option 1', async function () {
+                            expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+                        });
+                    });
+                    describe('ArrowDown', function () {
+                        beforeEach(press('ArrowDown'));
+                        beforeEach(updateComplete);
+                        it('focuses on option 3', async function () {
+                            expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('3');
+                        });
+                        describe('Enter', function () {
+                            beforeEach(press('Enter'));
+                            beforeEach(updateComplete);
+                            it('selects option 3', function () {
+                                expect(getSelectedOptionValues(element)).to.deep.equal([
+                                    '3',
+                                ]);
+                            });
+                            it('exposes selection to assistive technology', async function () {
+                                expect(await a11ySnapshot()).to.axContainQuery({
+                                    role: 'combobox',
+                                    value: '3',
+                                });
+                            });
+                            it('hides the listbox', async function () {
+                                expect(element.expanded).to.be.false;
+                                expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+                            });
+                            describe('ArrowDown', function () {
+                                beforeEach(press('ArrowDown'));
+                                beforeEach(updateComplete);
+                                it('expands the listbox', async function () {
+                                    expect(element.expanded).to.be.true;
+                                    expect(await a11ySnapshot()).to.axContainRole('listbox');
+                                });
+                                describe('Home', function () {
+                                    beforeEach(press('Home'));
+                                    beforeEach(updateComplete);
+                                    it('focuses on option 1', async function () {
+                                        expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+                                    });
+                                    describe('Home', function () {
+                                        beforeEach(press('Home'));
+                                        beforeEach(updateComplete);
+                                        it('focuses on option 1', async function () {
+                                            expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+                                        });
+                                    });
+                                });
+                            });
                         });
                     });
-                    describe('then pressing Enter', function () {
+                    describe('Enter', function () {
                         beforeEach(press('Enter'));
                         beforeEach(updateComplete);
-                        it('selects option 1', function () {
-                            expect(getValues(element)).to.deep.equal(['1']);
+                        it('selects option 2', function () {
+                            expect(getSelectedOptionValues(element)).to.deep.equal(['2']);
+                        });
+                        it('exposes selection to assistive technology', async function () {
+                            expect(await a11ySnapshot()).to.axContainQuery({
+                                role: 'combobox',
+                                value: '2',
+                            });
                         });
                     });
                 });
-                describe('then pressing Space', function () {
+                describe('Space', function () {
                     beforeEach(press(' '));
                     beforeEach(updateComplete);
-                    it('closes', function () {
+                    it('hides the listbox', async function () {
                         expect(element.expanded).to.be.false;
+                        expect(await a11ySnapshot()).to.not.axContainRole('listbox');
                     });
-                    it('hides the listbox', async function () {
-                        const snapshot = await a11ySnapshot();
-                        expect(snapshot.children?.find(x => x.role === 'listbox')).to.be.undefined;
+                    it('focuses the combobox toggle', async function () {
+                        expect(await a11ySnapshot())
+                            .axTreeFocusedNode
+                            .to.have.axRole('combobox');
                     });
-                    it('focuses the button', async function () {
-                        const snapshot = await a11ySnapshot();
-                        const focused = snapshot.children?.find(x => x.focused);
-                        expect(focused?.role).to.equal('combobox');
-                        expect(focused?.haspopup).to.equal('listbox');
+                    it('selects option 1', function () {
+                        expect(getSelectedOptionValues(element)).to.deep.equal([
+                            '1',
+                        ]);
                     });
-                    it('does not select anything', async function () {
-                        // because the placeholder was focused
-                        expect(getValues(element)).to.deep.equal([]);
+                    it('exposes selection to assistive technology', async function () {
+                        expect(await a11ySnapshot()).to.axContainQuery({
+                            role: 'combobox',
+                            value: '1',
+                        });
                     });
                 });
-                describe('then pressing Tab', function () {
+                describe('Tab', function () {
                     beforeEach(press('Tab'));
                     beforeEach(nextFrame);
                     beforeEach(updateComplete);
-                    it('closes', function () {
-                        expect(element.expanded).to.be.false;
-                    });
                     it('hides the listbox', async function () {
-                        const snapshot = await a11ySnapshot();
-                        expect(snapshot.children?.at(1)).to.be.undefined;
+                        expect(element.expanded).to.be.false;
+                        expect(await a11ySnapshot()).to.not.axContainRole('listbox');
                     });
-                    it('focuses the button', async function () {
-                        const snapshot = await a11ySnapshot();
-                        const focused = snapshot.children?.find(x => x.focused);
-                        expect(focused?.role).to.equal('combobox');
-                        expect(focused?.haspopup).to.equal('listbox');
+                    it('does not focus on the combobox button', async function () {
+                        expect(await a11ySnapshot()).to.not.have.axTreeFocusedNode;
                     });
                 });
-                describe('then pressing Shift+Tab', function () {
-                    beforeEach(shiftHold);
+                describe('Shift+Tab', function () {
+                    beforeEach(holdShift);
                     beforeEach(press('Tab'));
-                    beforeEach(shiftRelease);
+                    beforeEach(releaseShift);
                     beforeEach(updateComplete);
-                    it('closes', function () {
-                        expect(element.expanded).to.be.false;
-                    });
                     it('hides the listbox', async function () {
-                        const snapshot = await a11ySnapshot();
-                        const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                        expect(listbox).to.be.undefined;
+                        expect(element.expanded).to.be.false;
+                        expect(await a11ySnapshot()).to.not.axContainRole('listbox');
                     });
                     it('focuses the button', async function () {
-                        const snapshot = await a11ySnapshot();
-                        const focused = snapshot.children?.find(x => x.focused);
-                        expect(focused?.role).to.equal('combobox');
-                        expect(focused?.haspopup).to.equal('listbox');
+                        expect(await a11ySnapshot())
+                            .axTreeFocusedNode
+                            .to.have.axRole('combobox');
                     });
                 });
-                describe('then pressing Escape', function () {
+                describe('Escape', function () {
                     beforeEach(press('Escape'));
                     beforeEach(nextFrame);
                     beforeEach(updateComplete);
-                    it('closes', function () {
-                        expect(element.expanded).to.be.false;
-                    });
                     it('hides the listbox', async function () {
-                        const snapshot = await a11ySnapshot();
-                        expect(snapshot.children?.at(1)).to.be.undefined;
+                        expect(element.expanded).to.be.false;
+                        expect(await a11ySnapshot()).to.not.axContainRole('listbox');
                     });
                     it('focuses the button', async function () {
-                        const snapshot = await a11ySnapshot();
-                        const focused = snapshot.children?.find(x => x.focused);
-                        expect(focused?.role).to.equal('combobox');
-                        expect(focused?.haspopup).to.equal('listbox');
+                        expect(await a11ySnapshot())
+                            .axTreeFocusedNode
+                            .to.have.axRole('combobox');
                     });
                 });
             });
         });
     });
-    describe('variant="checkbox"', function () {
-        beforeEach(async function () {
-            element = await createFixture(html `
-        <pf-select variant="checkbox"
-                   accessible-label="Check it out">
-          <pf-option value="1">1</pf-option>
-          <pf-option value="2">2</pf-option>
-          <pf-option value="3">3</pf-option>
-          <pf-option value="4">4</pf-option>
-          <pf-option value="5">5</pf-option>
-          <pf-option value="6">6</pf-option>
-          <pf-option value="7">7</pf-option>
-          <pf-option value="8">8</pf-option>
-        </pf-select>`);
-        });
-        it('is accessible', async function () {
-            await expect(element).to.be.accessible();
+});
+describe('<pf-select variant="checkbox">', function () {
+    let element;
+    let items;
+    const updateComplete = () => element.updateComplete;
+    const focus = () => element.focus();
+    beforeEach(async function () {
+        element = await createFixture(html `
+      <pf-select variant="checkbox"
+                 placeholder="placeholder"
+                 accessible-label="Check it out">
+        <pf-option value="1">1</pf-option>
+        <pf-option value="2">2</pf-option>
+        <pf-option value="3">3</pf-option>
+        <pf-option value="4">4</pf-option>
+        <pf-option value="5">5</pf-option>
+        <pf-option value="6">6</pf-option>
+        <pf-option value="7">7</pf-option>
+        <pf-option value="8">8</pf-option>
+      </pf-select>`);
+        items = Array.from(element.querySelectorAll('pf-option'));
+    });
+    it('is accessible', async function () {
+        await expect(element).to.be.accessible();
+    });
+    it('does not have redundant role', async function () {
+        expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+    });
+    describe('focus()', function () {
+        beforeEach(focus);
+        beforeEach(updateComplete);
+        describe('Enter', function () {
+            beforeEach(press('Enter'));
+            beforeEach(updateComplete);
+            it('expands the listbox', async function () {
+                expect(element.expanded).to.be.true;
+                const snapshot = await a11ySnapshot();
+                expect(snapshot.children?.at(1)).to.be.ok;
+                expect(snapshot.children?.at(1)?.role).to.equal('listbox');
+            });
+            it('should NOT use checkbox role for options', async function () {
+                const snapshot = await a11ySnapshot();
+                expect(snapshot.children?.at(1)?.children?.filter(x => x.role === 'checkbox')?.length)
+                    .to.equal(0);
+            });
         });
-        describe('calling focus())', function () {
-            beforeEach(function () {
-                element.focus();
+        describe('Space', function () {
+            beforeEach(press(' '));
+            beforeEach(updateComplete);
+            it('expands the listbox', async function () {
+                expect(element.expanded).to.be.true;
+                expect(await a11ySnapshot()).to.axContainRole('listbox');
             });
+        });
+        describe('ArrowDown', function () {
+            beforeEach(press('ArrowDown'));
             beforeEach(updateComplete);
-            describe('pressing Enter', function () {
-                beforeEach(press('Enter'));
+            it('expands the listbox', async function () {
+                expect(element.expanded).to.be.true;
+                expect(await a11ySnapshot()).to.axContainRole('listbox');
+            });
+            it('focuses the placeholder', async function () {
+                expect(await a11ySnapshot()).to.have.axTreeFocusedNode.to.have.axName('placeholder');
+            });
+            describe('Shift+Tab', function () {
+                beforeEach(holdShift);
+                beforeEach(press('Tab'));
+                beforeEach(releaseShift);
                 beforeEach(updateComplete);
-                it('expands', async function () {
-                    expect(element.expanded).to.be.true;
-                    const snapshot = await a11ySnapshot();
-                    expect(snapshot.children?.at(1)).to.be.ok;
-                    expect(snapshot.children?.at(1)?.role).to.equal('listbox');
+                it('hides the listbox', async function () {
+                    expect(element.expanded).to.be.false;
+                    expect(await a11ySnapshot()).to.not.axContainRole('listbox');
                 });
-                it('should NOT use checkbox role for options', async function () {
-                    const snapshot = await a11ySnapshot();
-                    expect(snapshot.children?.at(1)?.children?.filter(x => x.role === 'checkbox')?.length)
-                        .to.equal(0);
+                it('focuses the button', async function () {
+                    expect(await a11ySnapshot())
+                        .axTreeFocusedNode
+                        .to.have.axRole('combobox');
                 });
             });
-            describe('pressing Space', function () {
-                beforeEach(press(' '));
+            describe('Tab', function () {
+                beforeEach(press('Tab'));
+                beforeEach(nextFrame);
                 beforeEach(updateComplete);
-                it('expands', async function () {
-                    expect(element.expanded).to.be.true;
+                // a little extra sleep to de-flake this test
+                beforeEach(nextFrame);
+                beforeEach(updateComplete);
+                it('closes', function () {
+                    expect(element.expanded).to.be.false;
+                });
+                it('hides the listbox', async function () {
                     const snapshot = await a11ySnapshot();
-                    expect(snapshot.children?.at(1)).to.be.ok;
-                    expect(snapshot.children?.at(1)?.role).to.equal('listbox');
+                    const listbox = snapshot.children?.find(x => x.role === 'listbox');
+                    expect(listbox).to.be.undefined;
                 });
             });
-            describe('pressing ArrowDown', function () {
-                beforeEach(press('ArrowDown'));
+            describe('Escape', function () {
+                beforeEach(press('Escape'));
                 beforeEach(updateComplete);
-                it('expands', async function () {
-                    expect(element.expanded).to.be.true;
+                it('closes', function () {
+                    expect(element.expanded).to.be.false;
+                });
+                it('hides the listbox', async function () {
                     const snapshot = await a11ySnapshot();
-                    expect(snapshot.children?.at(1)).to.be.ok;
-                    expect(snapshot.children?.at(1)?.role).to.equal('listbox');
+                    expect(snapshot.children?.at(1)).to.be.undefined;
                 });
-                describe('then pressing Shift+Tab', function () {
-                    beforeEach(shiftHold);
-                    beforeEach(press('Tab'));
-                    beforeEach(shiftRelease);
-                    beforeEach(updateComplete);
-                    it('closes', async function () {
-                        expect(element.expanded).to.be.false;
-                    });
-                    it('hides the listbox', async function () {
-                        const snapshot = await a11ySnapshot();
-                        expect(snapshot.children?.at(1)).to.be.undefined;
-                    });
-                    it('focuses the button', async function () {
-                        const snapshot = await a11ySnapshot();
-                        expect(snapshot.children?.at(0)?.role).to.equal('combobox');
-                        expect(snapshot.children?.at(0)?.focused).to.be.true;
-                    });
+                it('focuses the button', async function () {
+                    const snapshot = await a11ySnapshot();
+                    const focused = querySnapshot(snapshot, { focused: true });
+                    expect(focused?.role).to.equal('combobox');
                 });
-                describe('then pressing Tab', function () {
-                    beforeEach(press('Tab'));
-                    beforeEach(nextFrame);
-                    beforeEach(updateComplete);
-                    // a little extra sleep to de-flake this test
-                    beforeEach(nextFrame);
-                    beforeEach(updateComplete);
-                    it('closes', function () {
-                        expect(element.expanded).to.be.false;
-                    });
-                    it('hides the listbox', async function () {
-                        const snapshot = await a11ySnapshot();
-                        const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                        expect(listbox).to.be.undefined;
-                    });
+            });
+            describe('Ctrl-A', function () {
+                beforeEach(holdCtrl);
+                beforeEach(press('A'));
+                beforeEach(releaseCtrl);
+                beforeEach(updateComplete);
+                it('selects all', function () {
+                    expect(element.selected.length).to.equal(items.length);
                 });
-                describe('then pressing Escape', function () {
-                    beforeEach(press('Escape'));
+                it('remains expanded', async function () {
+                    expect(element.expanded).to.be.true;
+                    expect(await a11ySnapshot()).to.axContainRole('listbox');
+                });
+                describe('Ctrl-A', function () {
+                    beforeEach(holdCtrl);
+                    beforeEach(press('A'));
+                    beforeEach(releaseCtrl);
                     beforeEach(updateComplete);
-                    it('closes', function () {
-                        expect(element.expanded).to.be.false;
-                    });
-                    it('hides the listbox', async function () {
-                        const snapshot = await a11ySnapshot();
-                        expect(snapshot.children?.at(1)).to.be.undefined;
+                    it('deselects all', function () {
+                        expect(element.selected.length).to.equal(0);
                     });
-                    it('focuses the button', async function () {
-                        const snapshot = await a11ySnapshot();
-                        const focused = snapshot.children?.find(x => x.focused);
-                        expect(focused?.role).to.equal('combobox');
+                    it('remains expanded', async function () {
+                        expect(element.expanded).to.be.true;
+                        expect(await a11ySnapshot()).to.axContainRole('listbox');
                     });
                 });
-                describe('then pressing Space', function () {
+            });
+            describe('Space', function () {
+                it('does not select anything', function () {
+                    expect(element.selected).to.deep.equal([]);
+                });
+            });
+            describe('ArrowDown', function () {
+                beforeEach(press('ArrowDown'));
+                beforeEach(updateComplete);
+                describe('Space', function () {
                     beforeEach(press(' '));
                     beforeEach(updateComplete);
                     it('selects option 1', function () {
                         // because the placeholder was focused
-                        expect(getValues(element)).to.deep.equal(['1']);
+                        expect(getSelectedOptionValues(element)).to.deep.equal(['1']);
                     });
                     it('remains expanded', async function () {
                         expect(element.expanded).to.be.true;
-                        const snapshot = await a11ySnapshot();
-                        expect(snapshot.children?.at(1)?.role).to.equal('listbox');
+                        expect(await a11ySnapshot()).to.axContainRole('listbox');
                     });
-                    describe('then pressing ArrowDown', function () {
+                    describe('ArrowDown', function () {
                         beforeEach(press('ArrowDown'));
                         beforeEach(updateComplete);
-                        it('focuses option 1', async function () {
+                        it('focuses option 2', async function () {
                             const snapshot = await a11ySnapshot();
-                            const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                            const focused = listbox?.children?.find(x => x.focused);
-                            expect(focused?.name).to.equal('2');
+                            expect(snapshot).to.have.axQuery({
+                                focused: true,
+                                name: '2',
+                            });
                         });
-                        describe('then pressing Enter', function () {
+                        describe('Enter', function () {
                             beforeEach(press('Enter'));
                             beforeEach(updateComplete);
                             it('adds option 2 to selection', function () {
-                                expect(getValues(element)).to.deep.equal([
+                                expect(getSelectedOptionValues(element)).to.deep.equal([
                                     '1',
                                     '2',
                                 ]);
                             });
                             it('remains expanded', async function () {
                                 expect(element.expanded).to.be.true;
-                                const snapshot = await a11ySnapshot();
-                                expect(snapshot.children?.at(1)?.role).to.equal('listbox');
+                                expect(await a11ySnapshot()).to.axContainRole('listbox');
                             });
-                            describe('then holding Shift and pressing down arrow / enter twice in a row', function () {
-                                beforeEach(shiftHold);
-                                beforeEach(press('ArrowDown'));
-                                beforeEach(press('Enter'));
-                                beforeEach(press('ArrowDown'));
+                        });
+                    });
+                    describe('holding Shift', function () {
+                        beforeEach(holdShift);
+                        afterEach(releaseShift);
+                        describe('ArrowDown', function () {
+                            beforeEach(press('ArrowDown'));
+                            beforeEach(nextFrame);
+                            it('adds option 2 to selection', function () {
+                                expect(getSelectedOptionValues(element)).to.deep.equal([
+                                    '1',
+                                    '2',
+                                ]);
+                            });
+                            describe('Enter', function () {
                                 beforeEach(press('Enter'));
-                                beforeEach(shiftRelease);
                                 beforeEach(updateComplete);
-                                it('adds options 2 and 3 to the selected list', function () {
-                                    expect(getValues(element)).to.deep.equal([
+                                it('makes no change', function () {
+                                    expect(getSelectedOptionValues(element)).to.deep.equal([
                                         '1',
                                         '2',
-                                        '3',
-                                        '4',
                                     ]);
                                 });
-                                describe('then pressing ArrowUp and Enter', function () {
-                                    beforeEach(press('ArrowUp'));
-                                    beforeEach(press('Enter'));
+                                beforeEach(updateComplete);
+                                describe('ArrowDown', function () {
+                                    beforeEach(press('ArrowDown'));
                                     beforeEach(updateComplete);
-                                    it('deselects option 3', function () {
-                                        expect(getValues(element)).to.deep.equal([
+                                    it('adds option 3 to the selected list', function () {
+                                        expect(getSelectedOptionValues(element)).to.deep.equal([
                                             '1',
                                             '2',
-                                            '4',
+                                            '3',
                                         ]);
                                     });
-                                    describe('then holding down Shift and pressing arrow up / enter twice in a row', function () {
-                                        beforeEach(press('ArrowUp'));
+                                    describe('ArrowUp', function () {
                                         beforeEach(press('Enter'));
                                         beforeEach(updateComplete);
-                                        beforeEach(press('ArrowUp'));
-                                        beforeEach(press('Enter'));
-                                        beforeEach(updateComplete);
-                                        beforeEach(shiftRelease);
-                                        beforeEach(updateComplete);
-                                        it('deselects options 1 and 2', function () {
-                                            expect(getValues(element)).to.deep.equal([
-                                                '4',
+                                        it('makes no change to selection', function () {
+                                            expect(getSelectedOptionValues(element)).to.deep.equal([
+                                                '1',
+                                                '2',
+                                                '3',
                                             ]);
                                         });
-                                        describe('then pressing Ctrl+A', function () {
-                                            beforeEach(ctrlA);
-                                            beforeEach(updateComplete);
-                                            it('selects all options', function () {
-                                                expect(getValues(element)).to.deep.equal([
-                                                    '1',
-                                                    '2',
-                                                    '3',
-                                                    '4',
-                                                    '5',
-                                                    '6',
-                                                    '7',
-                                                    '8',
-                                                ]);
-                                            });
-                                            describe('then pressing Ctrl+A again', function () {
-                                                beforeEach(ctrlA);
-                                                beforeEach(updateComplete);
-                                                it('deselects all options', function () {
-                                                    expect(getValues(element)).to.deep.equal([]);
-                                                });
-                                            });
+                                    });
+                                });
+                            });
+                        });
+                    });
+                });
+            });
+            describe('clicking the first item', function () {
+                beforeEach(() => clickElementAtCenter(items.at(0)));
+                beforeEach(updateComplete);
+                it('selects option 1', function () {
+                    // because the placeholder was focused
+                    expect(getSelectedOptionValues(element)).to.deep.equal([
+                        '1',
+                    ]);
+                });
+                it('remains expanded', async function () {
+                    expect(element.expanded).to.be.true;
+                    expect(await a11ySnapshot()).to.axContainRole('listbox');
+                });
+                describe('holding Shift', function () {
+                    beforeEach(holdShift);
+                    afterEach(releaseShift);
+                    describe('clicking the 7th item', function () {
+                        beforeEach(() => clickElementAtCenter(items.at(6)));
+                        it('remains expanded', async function () {
+                            expect(element.expanded).to.be.true;
+                            expect(await a11ySnapshot()).to.axContainRole('listbox');
+                        });
+                        it('selects items 1-7', function () {
+                            expect(getSelectedOptionValues(element)).to.deep.equal([
+                                '1',
+                                '2',
+                                '3',
+                                '4',
+                                '5',
+                                '6',
+                                '7',
+                            ]);
+                        });
+                        describe('releasing Shift', function () {
+                            beforeEach(releaseShift);
+                            describe('clicking 6th item', function () {
+                                beforeEach(() => clickElementAtCenter(items.at(5)));
+                                it('deselects item 6', function () {
+                                    expect(getSelectedOptionValues(element)).to.not.contain('6');
+                                });
+                                describe('holding Shift', function () {
+                                    beforeEach(holdShift);
+                                    describe('clicking 2nd item', function () {
+                                        beforeEach(() => clickElementAtCenter(items.at(1)));
+                                        it('deselects items 2-6', function () {
+                                            expect(getSelectedOptionValues(element)).to.deep.equal(['1', '7']);
                                         });
                                     });
                                 });
@@ -462,393 +901,633 @@ describe('<pf-select>', function () {
             });
         });
     });
-    // try again when we implement activedescendant
-    describe.skip('variant="typeahead"', function () {
+});
+describe('<pf-select variant="typeahead">', function () {
+    let element;
+    const label = 'label';
+    const placeholder = 'placeholder';
+    const updateComplete = () => element.updateComplete;
+    const focus = () => element.focus();
+    beforeEach(async function () {
+        element = await createFixture(html `
+      <pf-select variant="typeahead">
+        <pf-option>Blue</pf-option>
+        <pf-option>Green</pf-option>
+        <pf-option>Magenta</pf-option>
+        <pf-option>Orange</pf-option>
+        <pf-option>Purple</pf-option>
+        <pf-option>Periwinkle</pf-option>
+        <pf-option>Pink</pf-option>
+        <pf-option>Red</pf-option>
+        <pf-option>Yellow</pf-option>
+      </pf-select>`);
+    });
+    beforeEach(nextFrame);
+    it('does not have redundant role', async function () {
+        expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+    });
+    it('labels the combobox input with the first option', async function () {
+        expect(await a11ySnapshot()).to.axContainQuery({
+            role: 'combobox',
+            name: 'Blue',
+        });
+    });
+    describe('with an `accessible-label` attribute', function () {
+        beforeEach(function () {
+            element.setAttribute('accessible-label', label);
+        });
+        beforeEach(nextFrame);
+        it('passes aXe audit', async function () {
+            await expect(element).to.be.accessible();
+        });
+        it('does not have redundant role', async function () {
+            expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+        });
+        it('labels the combobox with the label', async function () {
+            expect(await a11ySnapshot()).to.axContainQuery({
+                role: 'combobox',
+                name: label,
+            });
+        });
+        it('labels the toggle button with the label', async function () {
+            expect(await a11ySnapshot()).to.axContainQuery({
+                role: 'button',
+                name: label,
+            });
+        });
+        describe('show()', function () {
+            beforeEach(() => element.show());
+            it('labels the listbox with the placeholder attribute', async function () {
+                expect(await a11ySnapshot()).to.axContainQuery({
+                    role: 'listbox',
+                    name: 'label',
+                });
+            });
+        });
+    });
+    describe('with a `placeholder` attribute', function () {
+        beforeEach(function () {
+            element.setAttribute('placeholder', placeholder);
+        });
+        beforeEach(nextFrame);
+        it('passes aXe audit', async function () {
+            await expect(element).to.be.accessible();
+        });
+        it('lists the placeholder as first among the options', function () {
+            expect(element.options.at(0)).to.have.text(placeholder);
+        });
+        it('does not have redundant role', async function () {
+            expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+        });
+        it('labels the combobox with the placeholder', async function () {
+            expect(await a11ySnapshot()).to.axContainQuery({
+                role: 'combobox',
+                name: placeholder,
+            });
+        });
+        it('labels the toggle button with the placeholder', async function () {
+            expect(await a11ySnapshot()).to.axContainQuery({
+                role: 'button',
+                name: placeholder,
+            });
+        });
+        describe('show()', function () {
+            beforeEach(() => element.show());
+            it('labels the listbox with the placeholder attribute', async function () {
+                expect(await a11ySnapshot()).to.axContainQuery({
+                    role: 'listbox',
+                    name: 'placeholder',
+                });
+            });
+        });
+    });
+    describe('clicking the toggle button', function () {
         beforeEach(async function () {
-            element = await createFixture(html `
-        <pf-select variant="${'typeahead'}">
-          <pf-option value="Blue">Blue</pf-option>
-          <pf-option value="Green">Green</pf-option>
-          <pf-option value="Magenta">Magenta</pf-option>
-          <pf-option value="Orange">Orange</pf-option>
-          <pf-option value="Purple">Purple</pf-option>
-          <pf-option value="Pink">Pink</pf-option>
-          <pf-option value="Red">Red</pf-option>
-          <pf-option value="Yellow">Yellow</pf-option>
-        </pf-select>`);
+            await clickElementAtOffset(element, [-10, -10]);
+        });
+        it('shows the listbox', async function () {
+            expect(element.expanded).to.be.true;
+            expect(await a11ySnapshot()).to.axContainRole('listbox');
         });
-        describe('custom filtering', function () {
+        it('focuses the toggle button', async function () {
+            expect(element.expanded).to.be.true;
+            expect(await a11ySnapshot()).to.axContainQuery({
+                focused: true,
+                role: 'button',
+            });
+        });
+    });
+    describe('clicking the combobox input', function () {
+        beforeEach(async function () {
+            await clickElementAtOffset(element, [10, 10]);
+        });
+        it('shows the listbox', async function () {
+            expect(element.expanded).to.be.true;
+            expect(await a11ySnapshot()).to.axContainRole('listbox');
+        });
+        it('focuses the combobox', async function () {
+            expect(element.expanded).to.be.true;
+            expect(await a11ySnapshot()).to.axContainQuery({
+                focused: true,
+                role: 'combobox',
+            });
+        });
+        describe('clicking option 1', function () {
+            beforeEach(async function () {
+                await clickItemAtIndex(element, 0);
+            });
+            it('selects option 1', function () {
+                expect(getSelectedOptionValues(element)).to.deep.equal([
+                    'Blue',
+                ]);
+            });
+            it('closes the listbox', async function () {
+                expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+            });
+        });
+        describe('clicking option 2', function () {
+            beforeEach(async function () {
+                await clickItemAtIndex(element, 1);
+            });
+            it('selects option 1', function () {
+                expect(getSelectedOptionValues(element)).to.deep.equal([
+                    'Green',
+                ]);
+            });
+            it('closes the listbox', async function () {
+                expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+            });
+        });
+    });
+    describe('focus()', function () {
+        beforeEach(focus);
+        beforeEach(updateComplete);
+        it('focuses the combobox input', async function () {
+            expect(await a11ySnapshot()).axTreeFocusedNode
+                .to.have.axRole('combobox')
+                .and
+                .to.have.axName('Blue');
+        });
+        describe('"r"', function () {
+            beforeEach(press('r'));
+            beforeEach(updateComplete);
+            it('only shows options that start with "r" or "R"', async function () {
+                expect(getVisibleOptionValues(element)).to.deep.equal([
+                    'Red',
+                ]);
+            });
+        });
+        describe('Space', function () {
             beforeEach(function () {
-                // @ts-expect-error: we intend to implement this in the next release
-                element.customFilter = option => 
-                // @ts-expect-error: TODO add filter feature
-                new RegExp(element.filter).test(option.value);
+                document.body.style.height = '8000px';
             });
-            beforeEach(focus);
+            afterEach(function () {
+                document.body.style.height = 'initial';
+            });
+            beforeEach(press(' '));
             beforeEach(updateComplete);
-            describe('typing "r"', function () {
-                beforeEach(press('r'));
-                beforeEach(updateComplete);
-                it('shows options with "r" anywhere in them', async function () {
-                    const snapshot = await a11ySnapshot();
-                    const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                    expect(listbox?.children?.length).to.equal(3);
-                    expect(listbox?.children?.at(0)?.name).to.equal('Green');
-                    expect(listbox?.children?.at(1)?.name).to.equal('Orange');
-                    expect(listbox?.children?.at(2)?.name).to.equal('Purple');
-                });
+            beforeEach(() => aTimeout(300));
+            it('does not expand the listbox', async function () {
+                expect(await a11ySnapshot()).to.not.axContainRole('listbox');
             });
-            describe('typing "R"', function () {
-                beforeEach(press('R'));
-                beforeEach(nextFrame);
-                beforeEach(updateComplete);
-                it('shows options that contain "R"', async function () {
-                    const snapshot = await a11ySnapshot();
-                    const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                    expect(listbox?.children?.length).to.equal(1);
-                    expect(listbox?.children?.at(0)?.name).to.equal('Red');
-                });
+            it('does not scroll the screen', function () {
+                expect(window.scrollY).to.equal(0);
             });
         });
-        describe('calling focus()', function () {
-            beforeEach(focus);
+        describe('ArrowDown', function () {
+            beforeEach(press('ArrowDown'));
             beforeEach(updateComplete);
-            it('has a text input for typeahead', async function () {
-                const snapshot = await a11ySnapshot();
-                const [typeahead] = snapshot.children ?? [];
-                expect(typeahead).to.deep.equal({
-                    role: 'combobox',
-                    name: 'Options',
-                    focused: true,
-                    autocomplete: 'both',
-                    haspopup: 'listbox',
-                });
+            beforeEach(() => aTimeout(200));
+            it('shows the listbox', async function () {
+                expect(element.expanded).to.be.true;
+                expect(await a11ySnapshot()).to.axContainRole('listbox');
+            });
+            it('focuses option 1', function () {
+                expect(getActiveOption(element)).to.have.value('Blue');
             });
-            describe('typing "r"', function () {
-                beforeEach(press('r'));
+            it('does not move keyboard focus', async function () {
+                expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
+            });
+            describe('ArrowDown', function () {
+                beforeEach(press('ArrowDown'));
                 beforeEach(updateComplete);
-                it('only shows options that start with "r" or "R"', async function () {
-                    const snapshot = await a11ySnapshot();
-                    const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                    expect(listbox?.children?.every(x => x.name.toLowerCase().startsWith('r'))).to.be.true;
+                it('focuses option 2', function () {
+                    expect(getActiveOption(element)).to.have.text('Green');
                 });
-            });
-            describe('setting filter to "*"', function () {
-                beforeEach(function () {
-                    // @ts-expect-error: todo: add filter feature
-                    element.filter = '*';
+                describe('Enter', function () {
+                    beforeEach(press('Enter'));
+                    beforeEach(updateComplete);
+                    it('selects option 2', function () {
+                        expect(getSelectedOptionValues(element)).to.deep.equal([
+                            'Green',
+                        ]);
+                    });
+                    it('sets typeahead input to second option value', async function () {
+                        expect(await a11ySnapshot())
+                            .axTreeFocusedNode
+                            .to.have.axProperty('value', 'Green');
+                    });
+                    it('retains focus on combobox input', async function () {
+                        expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
+                    });
+                    it('hides the listbox', async function () {
+                        expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+                    });
+                    describe('focus()', function () {
+                        beforeEach(focus);
+                        describe('ArrowDown', function () {
+                            beforeEach(press('ArrowDown'));
+                            beforeEach(updateComplete);
+                            it('focuses option 2', function () {
+                                expect(getActiveOption(element)).to.have.text('Green');
+                            });
+                            it('only shows option 2', function () {
+                                expect(getVisibleOptionValues(element)).to.deep.equal([
+                                    'Green',
+                                ]);
+                            });
+                        });
+                    });
                 });
+            });
+            describe('ArrowUp', function () {
+                beforeEach(press('ArrowUp'));
                 beforeEach(updateComplete);
-                it('does not error', async function () {
-                    const snapshot = await a11ySnapshot();
-                    const [, , listbox] = snapshot.children ?? [];
-                    expect(listbox?.children).to.not.be.ok;
+                it('focuses the last item', async function () {
+                    expect(getActiveOption(element)).to.have.value('Yellow');
                 });
             });
-            describe('changing input value to "p"', function () {
-                beforeEach(press('p'));
+        });
+        describe('"p"', function () {
+            beforeEach(press('p'));
+            beforeEach(updateComplete);
+            it('shows the listbox and maintains focus', async function () {
+                expect(await a11ySnapshot())
+                    .to.axContainRole('listbox')
+                    .and.axTreeFocusedNode
+                    .to.have.axRole('combobox')
+                    .and.to.have.axProperty('value', 'p');
+            });
+            it('only shows listbox items starting with the letter p', function () {
+                expect(getVisibleOptionValues(element)).to.deep.equal([
+                    'Purple',
+                    'Periwinkle',
+                    'Pink',
+                ]);
+            });
+            describe('Backspace', function () {
+                beforeEach(press('Backspace'));
                 beforeEach(updateComplete);
-                it('only shows listbox items starting with the letter p', async function () {
-                    const snapshot = await a11ySnapshot();
-                    const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                    expect(listbox?.children?.length).to.equal(2);
-                    expect(listbox?.children?.at(0)?.name).to.equal('Purple');
-                    expect(listbox?.children?.at(1)?.name).to.equal('Pink');
+                it('shows the listbox and maintains focus', async function () {
+                    expect(await a11ySnapshot())
+                        .to.axContainRole('listbox')
+                        .and.axTreeFocusedNode
+                        .to.have.axRole('combobox')
+                        .and.to.not.have.axProperty('value', 'p');
                 });
-                it('maintains focus on the input', async function () {
-                    const snapshot = await a11ySnapshot();
-                    const focused = snapshot.children?.find(x => x.focused);
-                    expect(focused?.role).to.equal('combobox');
+                it('all options are visible', async function () {
+                    expect(getVisibleOptionValues(element)).to.deep.equal([
+                        'Blue',
+                        'Green',
+                        'Magenta',
+                        'Orange',
+                        'Purple',
+                        'Periwinkle',
+                        'Pink',
+                        'Red',
+                        'Yellow',
+                    ]);
                 });
-                describe('pressing Backspace so input value is ""', function () {
-                    beforeEach(press('Backspace'));
-                    beforeEach(updateComplete);
-                    it('all options are visible', async function () {
-                        const snapshot = await a11ySnapshot();
-                        const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                        expect(listbox?.children?.length).to.equal(8);
-                        expect(listbox?.children?.at(0)?.name).to.equal('Blue');
-                        expect(listbox?.children?.at(1)?.name).to.equal('Green');
-                        expect(listbox?.children?.at(2)?.name).to.equal('Magenta');
-                        expect(listbox?.children?.at(3)?.name).to.equal('Orange');
-                        expect(listbox?.children?.at(4)?.name).to.equal('Purple');
-                        expect(listbox?.children?.at(5)?.name).to.equal('Pink');
-                        expect(listbox?.children?.at(6)?.name).to.equal('Red');
-                        expect(listbox?.children?.at(7)?.name).to.equal('Yellow');
-                    });
-                });
-            });
-            describe('pressing ArrowDown', function () {
-                beforeEach(press('ArrowDown'));
-                beforeEach(nextFrame);
+            });
+            describe('"u"', function () {
+                beforeEach(press('u'));
                 beforeEach(updateComplete);
-                it('expands', async function () {
-                    expect(element.expanded).to.be.true;
-                    const snapshot = await a11ySnapshot();
-                    const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                    expect(listbox).to.be.ok;
-                });
-                it('selects the first item', async function () {
-                    const snapshot = await a11ySnapshot();
-                    const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                    const focused = listbox?.children?.find(x => x.focused);
-                    expect(focused).to.not.be.ok;
-                    const selected = listbox?.children?.find(x => x.selected);
-                    expect(selected).to.be.ok;
-                    expect(listbox?.children?.at(0)).to.equal(selected);
-                });
-                it('does not move keyboard focus', async function () {
-                    const snapshot = await a11ySnapshot();
-                    const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                    const focused = listbox?.children?.find(x => x.focused);
-                    expect(focused).to.not.be.ok;
+                it('only shows the option "Purple"', function () {
+                    expect(getVisibleOptionValues(element)).to.deep.equal([
+                        'Purple',
+                    ]);
                 });
-                describe('then pressing ArrowDown', function () {
+                describe('ArrowDown', function () {
                     beforeEach(press('ArrowDown'));
                     beforeEach(updateComplete);
-                    it('focuses the first option', async function () {
-                        const snapshot = await a11ySnapshot();
-                        const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                        const focused = listbox?.children?.find(x => x.focused);
-                        expect(focused).to.be.ok;
-                        expect(listbox?.children?.indexOf(focused)).to.equal(0);
-                    });
-                    describe('then pressing Enter', function () {
+                    it('focuses the option "Purple"', function () {
+                        expect(getActiveOption(element)).to.have.text('Purple');
+                    });
+                    describe('Enter', function () {
                         beforeEach(press('Enter'));
                         beforeEach(updateComplete);
-                        it('selects the second option', function () {
-                            expect(getValues(element)).to.deep.equal(['Green']);
-                        });
-                        it('sets typeahead input to second option value', async function () {
-                            const snapshot = await a11ySnapshot();
-                            const [combobox] = snapshot.children ?? [];
-                            expect(combobox?.value).to.equal('Green');
-                        });
-                        it('focuses on toggle button', async function () {
-                            const snapshot = await a11ySnapshot();
-                            const focused = snapshot.children?.find(x => x.focused);
-                            expect(focused?.role).to.equal('button');
-                            expect(focused?.haspopup).to.equal('listbox');
+                        it('selects the option "Purple"', function () {
+                            expect(getSelectedOptionValues(element)).to.deep.equal([
+                                'Purple',
+                            ]);
                         });
-                        it('closes', async function () {
-                            expect(element.expanded).to.be.false;
-                            const snapshot = await a11ySnapshot();
-                            const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                            expect(listbox).to.be.undefined;
+                        describe('Backspace (x5)', function () {
+                            beforeEach(press('Backspace'));
+                            beforeEach(press('Backspace'));
+                            beforeEach(press('Backspace'));
+                            beforeEach(press('Backspace'));
+                            beforeEach(press('Backspace'));
+                            it('shows the options starting with "P"', function () {
+                                expect(getVisibleOptionValues(element)).to.deep.equal([
+                                    'Purple',
+                                    'Periwinkle',
+                                    'Pink',
+                                ]);
+                            });
+                            describe('Home', function () {
+                                beforeEach(press('Home'));
+                                it('retains focus on the option "Purple"', function () {
+                                    expect(getActiveOption(element)).to.have.text('Purple');
+                                });
+                                it('moves cursor to start', function () {
+                                    // WARNING: ties test to DOM structure
+                                    const input = element.shadowRoot?.querySelector('input');
+                                    expect(input?.selectionStart).to.equal(0);
+                                });
+                            });
+                            describe('End', function () {
+                                beforeEach(press('End'));
+                                it('retains focus on the option "Purple"', function () {
+                                    expect(getActiveOption(element)).to.have.text('Purple');
+                                });
+                                it('moves cursor to start', function () {
+                                    // WARNING: ties test to DOM structure
+                                    const input = element.shadowRoot?.querySelector('input');
+                                    expect(input?.selectionStart).to.equal(1);
+                                });
+                            });
                         });
                     });
                 });
             });
         });
     });
-    // try again when we implement activedescendant
-    describe.skip('variant="typeaheadmulti"', function () {
-        beforeEach(async function () {
-            element = await createFixture(html `
-        <pf-select variant="typeaheadmulti">
-          <pf-option value="Amethyst">Amethyst</pf-option>
-          <pf-option value="Beryl">Beryl</pf-option>
-          <pf-option value="Chalcedony">Chalcedony</pf-option>
-          <pf-option value="Diamond">Diamond</pf-option>
-          <pf-option value="Emerald">Emerald</pf-option>
-          <pf-option value="Fool's Gold">Fool's Gold</pf-option>
-          <pf-option value="Garnet">Garnet</pf-option>
-          <pf-option value="Halite">Halite</pf-option>
-          <pf-option value="Iris">Iris</pf-option>
-        </pf-select>`);
+    describe.skip('setting filter to "*"', function () {
+        beforeEach(function () {
+            // @ts-expect-error: todo: add filter feature
+            element.filter = '*';
         });
-        describe('calling focus()', function () {
-            beforeEach(function () {
-                element.focus();
+        beforeEach(updateComplete);
+        it('does not error', async function () {
+            const snapshot = await a11ySnapshot();
+            const [, , listbox] = snapshot.children ?? [];
+            expect(listbox?.children).to.not.be.ok;
+        });
+    });
+    describe.skip('custom filtering', function () {
+        beforeEach(function () {
+            // @ts-expect-error: we intend to implement this in the next release
+            element.customFilter = option => 
+            // @ts-expect-error: TODO add filter feature
+            new RegExp(element.filter).test(option.value);
+        });
+        beforeEach(focus);
+        beforeEach(updateComplete);
+        describe('r', function () {
+            beforeEach(press('r'));
+            beforeEach(updateComplete);
+            it('shows options that contain "r"', async function () {
+                expect(getVisibleOptionValues(element)).to.deep.equal([
+                    'Green',
+                    'Orange',
+                    'Purple',
+                ]);
             });
+        });
+        describe('typing "R"', function () {
+            beforeEach(press('R'));
+            beforeEach(nextFrame);
             beforeEach(updateComplete);
-            it('focuses the typeahead input', async function () {
-                const snapshot = await a11ySnapshot();
-                const [input] = snapshot.children ?? [];
-                expect(input.focused).to.be.true;
-                expect(input.role).to.equal('combobox');
+            it('shows options that start with "r"', async function () {
+                expect(getVisibleOptionValues(element)).to.deep.equal([
+                    'Red',
+                ]);
             });
-            describe('pressing ArrowDown', function () {
-                beforeEach(press('ArrowDown'));
+        });
+    });
+});
+describe('<label for="select"><pf-select variant="typeahead">', function () {
+    let element;
+    beforeEach(async function () {
+        element = await createFixture(html `
+      <pf-select variant="typeahead" id="select">
+        <pf-option value="1">1</pf-option>
+        <pf-option value="2">2</pf-option>
+        <pf-option value="3">3</pf-option>
+      </pf-select>
+      <label for="select">label1</label>
+      <label for="select">label2</label>
+      `);
+    });
+    it('passes aXe audit', async function () {
+        await expect(element).to.be.accessible();
+    });
+    it('labels the combobox with the label elements', async function () {
+        expect(await a11ySnapshot()).to.axContainQuery({
+            role: 'combobox',
+            name: 'label1label2',
+        });
+    });
+    describe('show()', function () {
+        beforeEach(() => element.show());
+        it('labels the listbox with the placeholder attribute', async function () {
+            expect(await a11ySnapshot()).to.axContainQuery({
+                role: 'listbox',
+                name: 'label1label2',
+            });
+        });
+    });
+});
+// try again when we implement activedescendant
+describe.skip('<pf-select variant="typeaheadmulti">', function () {
+    let element;
+    const updateComplete = () => element.updateComplete;
+    const focus = () => element.focus();
+    beforeEach(async function () {
+        element = await createFixture(html `
+      <pf-select variant="typeaheadmulti">
+        <pf-option value="Amethyst">Amethyst</pf-option>
+        <pf-option value="Beryl">Beryl</pf-option>
+        <pf-option value="Chalcedony">Chalcedony</pf-option>
+        <pf-option value="Diamond">Diamond</pf-option>
+        <pf-option value="Emerald">Emerald</pf-option>
+        <pf-option value="Fool's Gold">Fool's Gold</pf-option>
+        <pf-option value="Garnet">Garnet</pf-option>
+        <pf-option value="Halite">Halite</pf-option>
+        <pf-option value="Iris">Iris</pf-option>
+      </pf-select>`);
+    });
+    describe('focus()', function () {
+        beforeEach(focus);
+        beforeEach(updateComplete);
+        it('focuses the typeahead input', async function () {
+            expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
+        });
+        describe('ArrowDown', function () {
+            beforeEach(press('ArrowDown'));
+            beforeEach(updateComplete);
+            it('shows the listbox', async function () {
+                expect(element.expanded).to.be.true;
+                expect(await a11ySnapshot()).to.axContainRole('listbox');
+            });
+            it('focuses the first option', async function () {
+                expect(getActiveOption(element)).to.have.property('value', 'Amethyst');
+            });
+            describe('Shift+Tab', function () {
+                beforeEach(holdShift);
+                beforeEach(press('Tab'));
+                beforeEach(releaseShift);
                 beforeEach(updateComplete);
-                it('expands', function () {
-                    expect(element.expanded).to.be.true;
+                it('closes', function () {
+                    expect(element.expanded).to.be.false;
                 });
-                it('shows the listbox', async function () {
-                    const snapshot = await a11ySnapshot();
-                    expect(snapshot.children?.find(x => x.role === 'listbox')).to.be.ok;
+                it('hides the listbox', async function () {
+                    expect(element.expanded).to.be.false;
+                    expect(await a11ySnapshot()).to.not.axContainRole('listbox');
                 });
-                it('focuses the first option', async function () {
-                    const snapshot = await a11ySnapshot();
-                    const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                    expect(listbox?.children?.find(x => x.focused)?.name).to.equal('Amethyst');
+                it('focuses the toggle button', async function () {
+                    expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
                 });
-                describe('then pressing Shift+Tab', function () {
-                    beforeEach(shiftHold);
+                describe('Shift+Tab', function () {
+                    beforeEach(holdShift);
                     beforeEach(press('Tab'));
-                    beforeEach(shiftRelease);
+                    beforeEach(releaseShift);
                     beforeEach(updateComplete);
-                    it('closes', function () {
-                        expect(element.expanded).to.be.false;
-                    });
-                    it('hides the listbox', async function () {
-                        const snapshot = await a11ySnapshot();
-                        expect(snapshot.children?.find(x => x.role === 'listbox')).to.be.undefined;
-                    });
-                    it('focuses the toggle button', async function () {
-                        const snapshot = await a11ySnapshot();
-                        const focused = snapshot?.children?.find(x => x.focused);
-                        expect(focused?.role).to.equal('button');
-                        expect(focused?.haspopup).to.equal('listbox');
-                    });
-                    describe('then pressing Shift+Tab', function () {
-                        beforeEach(shiftHold);
-                        beforeEach(press('Tab'));
-                        beforeEach(shiftRelease);
-                        beforeEach(updateComplete);
-                        it('focuses the combobox input', async function () {
-                            const snapshot = await a11ySnapshot();
-                            const focused = snapshot?.children?.find(x => x.focused);
-                            expect(focused?.role).to.equal('combobox');
-                            expect(focused?.haspopup).to.equal('listbox');
-                        });
+                    it('focuses the combobox input', async function () {
+                        expect(await a11ySnapshot())
+                            .axTreeFocusedNode
+                            .to.have.axRole('combobox');
                     });
                 });
-                describe('then pressing ArrowDown', function () {
-                    beforeEach(press('ArrowDown'));
+            });
+            describe('ArrowDown', function () {
+                beforeEach(press('ArrowDown'));
+                beforeEach(updateComplete);
+                describe('Enter', function () {
+                    beforeEach(press('Enter'));
                     beforeEach(updateComplete);
-                    describe('then pressing Enter', function () {
-                        beforeEach(press('Enter'));
-                        beforeEach(updateComplete);
-                        it('selects the second option', function () {
-                            expect(getValues(element)).to.deep.equal(['Beryl']);
-                        });
-                        it('focuses on second option', async function () {
-                            const snapshot = await a11ySnapshot();
-                            const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                            expect(listbox?.children?.find(x => x.focused)?.name).to.equal('Beryl');
-                        });
-                        it('remains expanded', async function () {
-                            expect(element.expanded).to.be.true;
-                            const snapshot = await a11ySnapshot();
-                            const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                            expect(listbox).to.be.ok;
+                    it('selects the second option', function () {
+                        expect(getSelectedOptionValues(element)).to.deep.equal(['Beryl']);
+                    });
+                    it('focuses on second option', async function () {
+                        expect(getActiveOption(element)).to.have.property('value', 'Beryl');
+                    });
+                    it('remains expanded', async function () {
+                        expect(element.expanded).to.be.true;
+                        expect(await a11ySnapshot()).to.axContainRole('listbox');
+                    });
+                    it('shows 1 chip', async function () {
+                        expect(await a11ySnapshot())
+                            .to.axContainQuery({
+                            role: 'button',
+                            name: 'Close',
+                            description: 'Beryl',
                         });
-                        it('shows 1 chip', async function () {
-                            const snapshot = await a11ySnapshot();
-                            const [, chip1close] = snapshot.children ?? [];
-                            expect(chip1close?.role).to.equal('button');
-                            expect(chip1close?.name).to.equal('Close');
-                            expect(chip1close?.description).to.equal('Beryl');
+                    });
+                    describe('ArrowUp', function () {
+                        beforeEach(press('ArrowUp'));
+                        beforeEach(updateComplete);
+                        it('focuses the first option', async function () {
+                            expect(getActiveOption(element)).to.equal('Amethyst');
+                            expect(await a11ySnapshot())
+                                .axTreeFocusedNode.to.have.axName('Amethyst');
                         });
-                        describe('then pressing ArrowUp', function () {
-                            beforeEach(press('ArrowUp'));
+                        describe('Enter', function () {
+                            beforeEach(press('Enter'));
                             beforeEach(updateComplete);
-                            it('focuses the first option', async function () {
-                                const snapshot = await a11ySnapshot();
-                                const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                                const focused = listbox?.children?.find(x => x.focused);
-                                expect(focused?.name).to.equal('Amethyst');
+                            it('adds second option to selected values', function () {
+                                expect(getSelectedOptionValues(element)).to.deep.equal([
+                                    'Amethyst',
+                                    'Beryl',
+                                ]);
                             });
-                            describe('then pressing Enter', function () {
-                                beforeEach(press('Enter'));
+                            it('accessible combo button label should be "2 items selected"', async function () {
+                                expect(await a11ySnapshot())
+                                    .axTreeFocusedNode
+                                    .to.have.axRole('combobox')
+                                    .and
+                                    .to.have.axName('2 items selected');
+                            });
+                            it('shows 2 chips', async function () {
+                                expect(await a11ySnapshot())
+                                    .to.axContainQuery({ role: 'button', name: 'Close', description: 'Amethyst' })
+                                    .and
+                                    .to.axContainQuery({ role: 'button', name: 'Close', description: 'Beryl' });
+                            });
+                            describe('Shift+Tab', function () {
+                                beforeEach(holdShift);
+                                beforeEach(press('Tab'));
+                                beforeEach(releaseShift);
                                 beforeEach(updateComplete);
-                                it('adds second option to selected values', function () {
-                                    expect(getValues(element)).to.deep.equal(['Amethyst', 'Beryl']);
-                                });
-                                it('accessible combo button label should be "2 items selected"', async function () {
-                                    const snapshot = await a11ySnapshot();
-                                    const button = snapshot.children?.find(x => x.role === 'combobox');
-                                    expect(button?.name).to.equal('2 items selected');
+                                it('focuses the combobox input', async function () {
+                                    expect(await a11ySnapshot())
+                                        .axTreeFocusedNode
+                                        .to.have.axRole('combobox');
                                 });
-                                it('shows 2 chips', async function () {
-                                    const snapshot = await a11ySnapshot();
-                                    const [, chip1close, , chip2close] = snapshot.children ?? [];
-                                    expect(chip1close?.role).to.equal('button');
-                                    expect(chip1close?.name).to.equal('Close');
-                                    expect(chip1close?.description).to.equal('Amethyst');
-                                    expect(chip2close?.role).to.equal('button');
-                                    expect(chip2close?.name).to.equal('Close');
-                                    expect(chip2close?.description).to.equal('Beryl');
-                                });
-                                describe('then pressing Shift+Tab', function () {
-                                    beforeEach(shiftHold);
+                                describe('Shift+Tab', function () {
+                                    beforeEach(holdShift);
                                     beforeEach(press('Tab'));
-                                    beforeEach(shiftRelease);
+                                    beforeEach(releaseShift);
                                     beforeEach(updateComplete);
-                                    it('focuses the toggle button', async function () {
-                                        const snapshot = await a11ySnapshot();
-                                        const focused = snapshot.children?.find(x => x.focused);
-                                        expect(focused?.role).to.equal('button');
-                                        expect(focused?.haspopup).to.equal('listbox');
+                                    it('focuses the combobox input', async function () {
+                                        expect(await a11ySnapshot())
+                                            .axTreeFocusedNode
+                                            .to.have.axRole('combobox');
                                     });
-                                    describe('then pressing Shift+Tab', function () {
-                                        beforeEach(shiftHold);
+                                    describe('Shift+Tab', function () {
+                                        beforeEach(holdShift);
                                         beforeEach(press('Tab'));
-                                        beforeEach(shiftRelease);
+                                        beforeEach(releaseShift);
                                         beforeEach(updateComplete);
-                                        it('focuses the combobox input', async function () {
-                                            const snapshot = await a11ySnapshot();
-                                            const focused = snapshot.children?.find(x => x.focused);
-                                            expect(focused?.role).to.equal('combobox');
+                                        it('focuses the last chip\'s close button', async function () {
+                                            expect(await a11ySnapshot())
+                                                .axTreeFocusedNode
+                                                .to.have.axRole('button')
+                                                .and
+                                                .to.have.axName('Close')
+                                                .and
+                                                .to.have.axDescription('Beryl');
                                         });
-                                        describe('then pressing Shift+Tab', function () {
-                                            beforeEach(shiftHold);
-                                            beforeEach(press('Tab'));
-                                            beforeEach(shiftRelease);
+                                        describe('Space', function () {
+                                            beforeEach(updateComplete);
+                                            beforeEach(press(' '));
                                             beforeEach(updateComplete);
-                                            it('focuses the last chip\'s close button', async function () {
-                                                const snapshot = await a11ySnapshot();
-                                                const focused = snapshot.children?.find(x => x.focused);
-                                                expect(focused?.role).to.equal('button');
-                                                expect(focused?.name).to.equal('Close');
-                                                expect(focused?.description).to.equal('Beryl');
+                                            beforeEach(updateComplete);
+                                            it('removes the second chip', async function () {
+                                                expect(await a11ySnapshot()).to.not.have.axDescription('Beryl');
                                             });
-                                            describe('then pressing Space', function () {
-                                                beforeEach(updateComplete);
-                                                beforeEach(press(' '));
-                                                beforeEach(updateComplete);
+                                            it('removes the second option from the selected values', function () {
+                                                expect(getSelectedOptionValues(element)).to.deep.equal([
+                                                    'Amethyst',
+                                                ]);
+                                            });
+                                            it('focuses the combobox', async function () {
+                                                expect(await a11ySnapshot())
+                                                    .axTreeFocusedNode
+                                                    .to.have.axRole('combobox');
+                                            });
+                                            describe('Shift+Tab', function () {
+                                                beforeEach(holdShift);
+                                                beforeEach(press('Tab'));
+                                                beforeEach(releaseShift);
                                                 beforeEach(updateComplete);
-                                                it('removes the second chip', async function () {
-                                                    const snapshot = await a11ySnapshot();
-                                                    const [, chip1close, ...rest] = snapshot.children ?? [];
-                                                    expect(chip1close?.role).to.equal('button');
-                                                    expect(chip1close?.name).to.equal('Close');
-                                                    expect(chip1close?.description).to.equal('Amethyst');
-                                                    expect(rest.filter(x => 'description' in x)?.length).to.equal(0);
-                                                });
-                                                it('removes the second option from the selected values', function () {
-                                                    expect(getValues(element)).to.deep.equal(['Amethyst']);
-                                                });
-                                                it('focuses the combobox', async function () {
-                                                    const snapshot = await a11ySnapshot();
-                                                    const focused = snapshot.children?.find(x => x.focused);
-                                                    expect(focused?.role).to.equal('combobox');
+                                                it('focuses the first chip', async function () {
+                                                    expect(await a11ySnapshot())
+                                                        .axTreeFocusedNode
+                                                        .to.have.axRole('combobox')
+                                                        .and
+                                                        .to.have.axDescription('Amethyst');
                                                 });
-                                                describe('then pressing Shift+Tab', function () {
-                                                    beforeEach(shiftHold);
-                                                    beforeEach(press('Tab'));
-                                                    beforeEach(shiftRelease);
+                                                describe('Space', function () {
+                                                    beforeEach(press(' '));
                                                     beforeEach(updateComplete);
-                                                    it('focuses the first chip', async function () {
-                                                        const snapshot = await a11ySnapshot();
-                                                        const focused = snapshot.children?.find(x => x.focused);
-                                                        expect(focused?.role).to.equal('button');
-                                                        expect(focused?.description).to.equal('Amethyst');
+                                                    it('removes all chips', async function () {
+                                                        expect(await a11ySnapshot()).to.not.axContainRole('button');
                                                     });
-                                                    describe('then pressing Space', function () {
-                                                        beforeEach(press(' '));
-                                                        beforeEach(updateComplete);
-                                                        it('removes all chips', async function () {
-                                                            const snapshot = await a11ySnapshot();
-                                                            expect(snapshot.children?.find(x => x.role === 'button' && x.name === 'Close'))
-                                                                .to.be.undefined;
-                                                        });
-                                                        it('focuses the typeahead input', async function () {
-                                                            const snapshot = await a11ySnapshot();
-                                                            const focused = snapshot.children?.find(x => x.focused);
-                                                            expect(focused?.role).to.equal('combobox');
-                                                        });
+                                                    it('focuses the combobox', async function () {
+                                                        expect(await a11ySnapshot())
+                                                            .axTreeFocusedNode
+                                                            .to.have.axRole('combobox');
                                                     });
                                                 });
                                             });