adobe · Feb 26, 2025
diff --git a/‎.changeset/lemon-points-ring.md
+16 b/‎.changeset/lemon-points-ring.md
+16
diff --git a/‎.circleci/config.yml
+1-1 b/‎.circleci/config.yml
+1-1
diff --git a/‎packages/action-group/src/ActionGroup.ts
+14-5 b/‎packages/action-group/src/ActionGroup.ts
+14-5
diff --git a/‎packages/action-group/test/action-group.test.ts
+79-45 b/‎packages/action-group/test/action-group.test.ts
+79-45
diff --git a/‎packages/action-menu/src/ActionMenu.ts
+28 b/‎packages/action-menu/src/ActionMenu.ts
+28
diff --git a/‎packages/action-menu/stories/action-menu.stories.ts
+22 b/‎packages/action-menu/stories/action-menu.stories.ts
+22
diff --git a/‎packages/action-menu/test/action-menu-directive.test.ts
+7-3 b/‎packages/action-menu/test/action-menu-directive.test.ts
+7-3
diff --git a/‎packages/action-menu/test/action-menu-groups.test.ts
+9-15 b/‎packages/action-menu/test/action-menu-groups.test.ts
+9-15
diff --git a/‎packages/action-menu/test/index.ts
+135-74 b/‎packages/action-menu/test/index.ts
+135-74
diff --git a/‎packages/combobox/src/Combobox.ts
+13-2 b/‎packages/combobox/src/Combobox.ts
+13-2
diff --git a/‎packages/combobox/test/combobox-a11y.test.ts
+7-65 b/‎packages/combobox/test/combobox-a11y.test.ts
+7-65
diff --git a/‎packages/combobox/test/combobox.test.ts
+28-18 b/‎packages/combobox/test/combobox.test.ts
+28-18
diff --git a/‎packages/combobox/test/helpers.ts
+5-2 b/‎packages/combobox/test/helpers.ts
+5-2
diff --git a/‎packages/menu/menu-group.md
+2-2 b/‎packages/menu/menu-group.md
+2-2
diff --git a/‎packages/menu/menu-item.md
+28-5 b/‎packages/menu/menu-item.md
+28-5
diff --git a/‎packages/menu/src/Menu.ts
+215-231 b/‎packages/menu/src/Menu.ts
+215-231
diff --git a/‎packages/menu/src/MenuGroup.ts
+14-9 b/‎packages/menu/src/MenuGroup.ts
+14-9
diff --git a/‎packages/menu/src/MenuItem.ts
+153-12 b/‎packages/menu/src/MenuItem.ts
+153-12
diff --git a/‎packages/menu/stories/index.ts
+17-5 b/‎packages/menu/stories/index.ts
+17-5
diff --git a/‎packages/menu/stories/menu.stories.ts
+22-1 b/‎packages/menu/stories/menu.stories.ts
+22-1
diff --git a/‎packages/menu/test/menu-group.test.ts
+89-93 b/‎packages/menu/test/menu-group.test.ts
+89-93
diff --git a/‎packages/menu/test/menu-item.test.ts
+49-2 b/‎packages/menu/test/menu-item.test.ts
+49-2
diff --git a/‎packages/menu/test/menu-selects.test.ts
+43-50 b/‎packages/menu/test/menu-selects.test.ts
+43-50
diff --git a/‎packages/menu/test/menu.test.ts
+125-110 b/‎packages/menu/test/menu.test.ts
+125-110
diff --git a/‎packages/menu/test/submenu.test.ts
+74-34 b/‎packages/menu/test/submenu.test.ts
+74-34
diff --git a/‎packages/overlay/stories/overlay.stories.ts
+1 b/‎packages/overlay/stories/overlay.stories.ts
+1
diff --git a/‎packages/picker/src/InteractionController.ts
+10-1 b/‎packages/picker/src/InteractionController.ts
+10-1
diff --git a/‎packages/picker/src/MobileController.ts
+5-1 b/‎packages/picker/src/MobileController.ts
+5-1
diff --git a/‎packages/picker/src/Picker.ts
+170-84 b/‎packages/picker/src/Picker.ts
+170-84
diff --git a/‎packages/picker/test/index.ts
+297-266 b/‎packages/picker/test/index.ts
+297-266
diff --git a/‎packages/picker/test/picker-reparenting.test.ts
+12-3 b/‎packages/picker/test/picker-reparenting.test.ts
+12-3
diff --git a/‎packages/tabs/test/tabs.test.ts
-42 b/‎packages/tabs/test/tabs.test.ts
-42
diff --git a/‎tools/reactive-controllers/src/FocusGroup.ts
+55-8 b/‎tools/reactive-controllers/src/FocusGroup.ts
+55-8
diff --git a/‎tools/reactive-controllers/src/RovingTabindex.ts
+1-2 b/‎tools/reactive-controllers/src/RovingTabindex.ts
+1-2
diff --git a/‎tools/reactive-controllers/test/roving-tabindex-integration.test.ts
+12-20 b/‎tools/reactive-controllers/test/roving-tabindex-integration.test.ts
+12-20
@@ -0,0 +1,16 @@
+---
+'@spectrum-web-components/reactive-controllers': minor
+'@spectrum-web-components/action-menu': minor
+'@spectrum-web-components/picker': minor
+'@spectrum-web-components/menu': minor
+---
+
+Used WAI ARIA Authoring Practices Guide (APG) to make accessibility improvements for `<sp-action-menu>`, `<sp-menu>`, and `<sp-picker>`, including:
+ - Numpad keys now work with `<sp-picker>` and `<sp-action-menu>`
+ -`<sp-action-menu>`'s `<sp-menu-item>` elements can now be read by a screen reader ([#4556](https://github.com/adobe/spectrum-web-components/issues/4556))
+ - `<sp-menu-item>` href can now be clicked by a screen reader ([#4997](https://github.com/adobe/spectrum-web-components/issues/4997))
+ - Opening a `<sp-action-menu>`, `<sp-menu>`, and `<sp-picker>` with a keyboard now sets focus on an item within the menu. ([#4557](https://github.com/adobe/spectrum-web-components/issues/4557))
+
+ See the following APG examples for more information:
+ - [Navigation Menu Example](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/)
+ - [Editor Menubar Example](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-editor/)
@@ -14,7 +14,7 @@ parameters:
     # 3. Commit this change to the PR branch where the changes exist.
     current_golden_images_hash:
         type: string
-        default: be83a254993526d25ab8f6dd32639eae6db1c7eb
+        default: 34923d02e4b68736f367f04be8d5a4f3843bc091
     wireit_cache_name:
         type: string
         default: wireit
 
@@ -22,7 +22,7 @@ import {
     property,
     query,
 } from '@spectrum-web-components/base/src/decorators.js';
-import type { ActionButton } from '@spectrum-web-components/action-button';
+import { ActionButton } from '@spectrum-web-components/action-button';
 import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
 import { MutationController } from '@lit-labs/observers/mutation-controller.js';
 
@@ -40,6 +40,10 @@ export class ActionGroup extends SizedMixin(SpectrumElement, {
     validSizes: ['xs', 's', 'm', 'l', 'xl'],
     noDefaultSize: true,
 }) {
+    static override shadowRootOptions = {
+        ...SpectrumElement.shadowRootOptions,
+        delegatesFocus: true,
+    };
     public static override get styles(): CSSResultArray {
         return [styles];
     }
@@ -90,6 +94,7 @@ export class ActionGroup extends SizedMixin(SpectrumElement, {
                     : firstEnabledIndex;
             },
             elements: () => this.buttons,
+            hostDelegatesFocus: true,
             isFocusableElement: (el: ActionButton) => !el.disabled,
         }
     );
@@ -245,7 +250,8 @@ export class ActionGroup extends SizedMixin(SpectrumElement, {
                 const selections: ActionButton[] = [];
                 const updates = options.map(async (option) => {
                     await option.updateComplete;
-                    option.setAttribute('role', 'radio');
+                    if (option instanceof ActionButton)
+                        option.setAttribute('role', 'radio');
                     option.setAttribute(
                         'aria-checked',
                         option.selected ? 'true' : 'false'
@@ -273,7 +279,8 @@ export class ActionGroup extends SizedMixin(SpectrumElement, {
                 const selections: ActionButton[] = [];
                 const updates = options.map(async (option) => {
                     await option.updateComplete;
-                    option.setAttribute('role', 'checkbox');
+                    if (option instanceof ActionButton)
+                        option.setAttribute('role', 'checkbox');
                     option.setAttribute(
                         'aria-checked',
                         option.selected ? 'true' : 'false'
@@ -297,7 +304,8 @@ export class ActionGroup extends SizedMixin(SpectrumElement, {
                     const selections: ActionButton[] = [];
                     const updates = options.map(async (option) => {
                         await option.updateComplete;
-                        option.setAttribute('role', 'button');
+                        if (option instanceof ActionButton)
+                            option.setAttribute('role', 'button');
                         if (option.selected) {
                             option.setAttribute('aria-pressed', 'true');
                             selections.push(option);
@@ -315,7 +323,8 @@ export class ActionGroup extends SizedMixin(SpectrumElement, {
                     );
                 } else {
                     this.buttons.forEach((option) => {
-                        option.setAttribute('role', 'button');
+                        if (option instanceof ActionButton)
+                            option.setAttribute('role', 'button');
                     });
                     break;
                 }
 
@@ -22,8 +22,8 @@ import {
 } from '@open-wc/testing';
 
 import { ActionButton } from '@spectrum-web-components/action-button';
-import { MenuItem } from '@spectrum-web-components/menu';
 import { ActionMenu } from '@spectrum-web-components/action-menu';
+import { MenuItem } from '@spectrum-web-components/menu';
 import '@spectrum-web-components/action-button/sp-action-button.js';
 import '@spectrum-web-components/action-menu/sp-action-menu.js';
 import '@spectrum-web-components/menu/sp-menu.js';
@@ -53,7 +53,6 @@ import { spy } from 'sinon';
 import { sendMouse } from '../../../test/plugins/browser.js';
 import { HasActionMenuAsChild } from '../stories/action-group.stories.js';
 import '../stories/action-group.stories.js';
-import { isWebKit } from '@spectrum-web-components/shared';
 import sinon from 'sinon';
 
 class QuietActionGroup extends LitElement {
@@ -190,13 +189,28 @@ describe('ActionGroup', () => {
         await elementUpdated(el);
 
         // expect the first button to be focused
-        expect(document.activeElement?.id).to.equal('first');
+        expect(
+            document.activeElement?.id,
+            'should be focused on the first button'
+        ).to.equal('first');
 
         // expect all the elements of the focus group to have a tabIndex of -1 except the first button because it is focused using Tab
-        expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0);
-        expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1);
-        expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1);
-        expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1);
+        expect(
+            (el.children[0] as ActionButton)?.tabIndex,
+            'should be focused on the first button'
+        ).to.equal(0);
+        expect(
+            (el.children[1] as ActionButton)?.tabIndex,
+            'should not be focused on the second button'
+        ).to.equal(-1);
+        expect(
+            (el.children[2] as ActionButton)?.tabIndex,
+            'should not be focused on the third button'
+        ).to.equal(-1);
+        expect(
+            (el.children[3] as ActionMenu)?.tabIndex,
+            'should not be focused on the fourth button'
+        ).to.equal(-1);
 
         // navigate to the action-menu using the arrow keys
         await sendKeys({ press: 'ArrowRight' });
@@ -206,39 +220,35 @@ describe('ActionGroup', () => {
         await elementUpdated(el);
 
         // expect the action-menu to be focused
-        expect((el.children[3] as ActionMenu)?.focused).to.be.true;
+        expect(el.children[3]).to.equal(document.activeElement);
 
         // press Enter to open the action-menu
         await sendKeys({ press: 'Enter' });
 
-        const opened = oneEvent(el.children[3] as ActionMenu, 'sp-opened');
+        let opened = oneEvent(el.children[3] as ActionMenu, 'sp-opened');
         await elementUpdated(el.children[3]);
         await opened;
 
         // expect the first menu item to be focused
-        const firstMenuItem = el.querySelector('#first-menu-item') as MenuItem;
-        expect(firstMenuItem?.focused).to.be.true;
-
+        const firstMenuItem = el.querySelector('#first-menu-item');
+        const fourthMenuItem = el.querySelector('#fourth-menu-item');
+        expect(firstMenuItem).to.equal(document.activeElement);
         // navigate to the fourth menu item using the arrow keys
         await sendKeys({ press: 'ArrowDown' });
         await sendKeys({ press: 'ArrowDown' });
         await sendKeys({ press: 'ArrowDown' });
 
+        opened = oneEvent(fourthMenuItem as MenuItem, 'sp-opened');
+
         // press Enter to select the fourth menu item
         await sendKeys({ press: 'Enter' });
-
-        await elementUpdated(el.children[3]);
-
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
+        await opened;
 
         // expect the second submenu item to be focused
         const secondSubMenuItem = el.querySelector(
             '#second-sub-menu-item'
         ) as MenuItem;
-        expect(secondSubMenuItem?.focused).to.be.true;
+        expect(secondSubMenuItem).to.equal(document.activeElement);
 
         // press Enter to select the second submenu item
         await sendKeys({ press: 'Enter' });
@@ -249,7 +259,7 @@ describe('ActionGroup', () => {
         await closed;
 
         // expect the action-menu to be focused
-        expect((el.children[3] as ActionMenu)?.focused).to.be.true;
+        expect(el.children[3]).to.equal(document.activeElement);
     });
 
     it('action-group with action-menu manages tabIndex correctly while using mouse', async () => {
@@ -280,10 +290,22 @@ describe('ActionGroup', () => {
         await aTimeout(500);
 
         // expect all the elements of the focus group to have a tabIndex of -1 except the first button because it is focused using mouse
-        expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0);
-        expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1);
-        expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1);
-        expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1);
+        expect(
+            (el.children[0] as ActionButton)?.tabIndex,
+            'mouse1: should be focused on the first button'
+        ).to.equal(0);
+        expect(
+            (el.children[1] as ActionButton)?.tabIndex,
+            'mouse1: should not be focused on the second button'
+        ).to.equal(-1);
+        expect(
+            (el.children[2] as ActionButton)?.tabIndex,
+            'mouse1: should not be focused on the third button'
+        ).to.equal(-1);
+        expect(
+            (el.children[3] as ActionMenu)?.tabIndex,
+            'mouse1: should not be focused on the fourth button'
+        ).to.equal(-1);
 
         // click outside the action-group and it should loose focus and update the tabIndexes
         sendMouse({
@@ -299,10 +321,22 @@ describe('ActionGroup', () => {
         await aTimeout(500);
 
         // expect the first button to have a tabIndex of 0 and everything else to have a tabIndex of -1
-        expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0);
-        expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1);
-        expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1);
-        expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1);
+        expect(
+            (el.children[0] as ActionButton)?.tabIndex,
+            'mouse2: should be focused on the first button'
+        ).to.equal(0);
+        expect(
+            (el.children[1] as ActionButton)?.tabIndex,
+            'mouse2: should not be focused on the second button'
+        ).to.equal(-1);
+        expect(
+            (el.children[2] as ActionButton)?.tabIndex,
+            'mouse2: should not be focused on the third button'
+        ).to.equal(-1);
+        expect(
+            (el.children[3] as ActionMenu)?.tabIndex,
+            'mouse2: should not be focused on the fourth button'
+        ).to.equal(-1);
 
         // get the bounding box of the action-menu
         const actionMenu = el.querySelector('#action-menu') as ActionMenu;
@@ -331,23 +365,23 @@ describe('ActionGroup', () => {
         const closed = oneEvent(el.children[3] as ActionMenu, 'sp-closed');
         await closed;
 
-        if (!isWebKit()) {
-            sendMouse({
-                steps: [
-                    {
-                        position: [0, 0],
-                        type: 'click',
-                    },
-                ],
-            });
-        }
-
         await aTimeout(500);
-
-        expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0);
-        expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1);
-        expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1);
-        expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1);
+        expect(
+            (el.children[0] as ActionButton)?.tabIndex,
+            'final: should NOT be focused on the first button'
+        ).to.equal(-1);
+        expect(
+            (el.children[1] as ActionButton)?.tabIndex,
+            'final: should not be focused on the second button'
+        ).to.equal(-1);
+        expect(
+            (el.children[2] as ActionButton)?.tabIndex,
+            'final: should not be focused on the third button'
+        ).to.equal(-1);
+        expect(
+            (el.children[3] as ActionMenu)?.tabIndex,
+            'final: should be be focused on the fourth button'
+        ).to.equal(0);
     });
 
     testForLitDevWarnings(
 
@@ -135,4 +135,32 @@ export class ActionMenu extends ObserveSlotPresence(
         }
         super.update(changedProperties);
     }
+
+    protected override hasAccessibleLabel(): boolean {
+        return (
+            !!this.label ||
+            !!this.getAttribute('aria-label') ||
+            !!this.getAttribute('aria-labelledby') ||
+            !!this.appliedLabel ||
+            this.hasLabel ||
+            this.labelOnly
+        );
+    }
+
+    protected override warnNoLabel(): void {
+        window.__swc.warn(
+            this,
+            `<${this.localName}> needs one of the following to be accessible:`,
+            'https://opensource.adobe.com/spectrum-web-components/components/action-menu/#accessibility',
+            {
+                type: 'accessibility',
+                issues: [
+                    `an <sp-field-label> element with a \`for\` attribute referencing the \`id\` of the \`<${this.localName}>\`, or`,
+                    'value supplied to the "label" attribute, which will be displayed visually as placeholder text',
+                    'text content supplied in a <span> with slot="label", or, text content supplied in a <span> with slot="label-only"',
+                    'which will also be displayed visually as placeholder text.',
+                ],
+            }
+        );
+    }
 }
@@ -406,6 +406,7 @@ export const groups = ({
     onChange(value: string): void;
 }): TemplateResult => html`
     <sp-action-menu
+        id="groups"
         @change=${({ target: { value } }: Event & { target: ActionMenu }) =>
             onChange(value)}
         open
@@ -540,3 +541,24 @@ export const withScrollEvent = (): TemplateResult => {
 withScrollEvent.parameters = {
     chromatic: { disableSnapshot: true },
 };
+
+export const MenuItemAlerts = (): TemplateResult => html`
+    <sp-action-menu size="m">
+        <span slot="label">More Actions</span>
+        <sp-menu-item @click=${() => alert('Deselect')}>Deselect</sp-menu-item>
+        <sp-menu-item @click=${() => alert('Select inverse')}>
+            Select inverse
+        </sp-menu-item>
+        <sp-menu-item @click=${() => alert('Feather...')}>
+            Feather...
+        </sp-menu-item>
+        <sp-menu-item @click=${() => alert('Select and mask...')}>
+            Select and mask...
+        </sp-menu-item>
+        <sp-menu-divider></sp-menu-divider>
+        <sp-menu-item @click=${() => alert('Save selection')}>
+            Save selection
+        </sp-menu-item>
+        <sp-menu-item disabled>Make work path</sp-menu-item>
+    </sp-action-menu>
+`;
@@ -22,25 +22,29 @@ describe('Slottable Request Directive', () => {
     it('Action Menu requests for options rendering when opening and closing', async function () {
         const el = await fixture<ActionMenu>(directive());
         const initialNodeLength = el.children.length;
-        expect(el.open).to.be.false;
+
+        expect(el.open, 'should be closed initially').to.be.false;
         expect(el.children.length).to.equal(initialNodeLength);
 
         const opened = oneEvent(el, 'sp-opened');
+
         el.click();
         await opened;
 
-        expect(el.open).to.be.true;
+        expect(el.open, 'should be open after clicking').to.be.true;
         expect(el.children.length).to.be.gt(initialNodeLength);
 
         const closed = oneEvent(el, 'sp-closed');
+
         await sendKeys({
             press: 'Escape',
         });
         await closed;
         await nextFrame();
         await nextFrame();
 
-        expect(el.open).to.be.false;
+        expect(el.open, 'should be closed after escape key is pressed').to.be
+            .false;
         expect(el.children.length).to.equal(initialNodeLength);
     });
 });
@@ -24,11 +24,10 @@ describe('Action Menu - Groups', () => {
             groupsWithSelects({ onChange: () => {} })
         );
 
-        const firstGroup = el.querySelector('sp-menu-group') as HTMLElement;
         const firstItem = el.querySelector('sp-menu-item') as MenuItem;
 
         expect(firstItem.focused).to.be.false;
-        expect(document.activeElement === firstGroup).to.be.false;
+        expect(document.activeElement === firstItem).to.be.false;
 
         const opened = oneEvent(el, 'sp-opened');
         el.focus();
@@ -39,7 +38,7 @@ describe('Action Menu - Groups', () => {
 
         expect(firstItem.focused).to.be.true;
         expect(
-            document.activeElement === firstGroup,
+            document.activeElement === firstItem,
             document.activeElement?.localName
         ).to.be.true;
     });
@@ -57,15 +56,15 @@ describe('Action Menu - Groups', () => {
             'sp-menu-item'
         ) as MenuItem;
 
-        expect(firstItem.selected).to.be.false;
+        expect(firstItem.selected, 'before opening: first item selected?').to.be.false;
 
         let opened = oneEvent(el, 'sp-opened');
         el.focus();
         await sendKeys({
             press: 'ArrowDown',
         });
         await opened;
-        expect(el.open).to.be.true;
+        expect(el.open, 'first opened: open?').to.be.true;
 
         await sendKeys({
             press: 'ArrowUp',
@@ -81,8 +80,8 @@ describe('Action Menu - Groups', () => {
         await elementUpdated(el);
         await elementUpdated(firstItem);
 
-        expect(el.open).to.be.false;
-        expect(firstItem.selected).to.be.true;
+        expect(el.open, 'first closed: open?').to.be.false;
+        expect(firstItem.selected, 'after select: first item selected?').to.be.true;
         expect(document.activeElement === el, document.activeElement?.localName)
             .to.be.true;
 
@@ -91,12 +90,7 @@ describe('Action Menu - Groups', () => {
             press: 'ArrowDown',
         });
         await opened;
-        expect(el.open).to.be.true;
-
-        await sendKeys({
-            press: 'ArrowUp',
-        });
-        await elementUpdated(el);
+        expect(el.open, 'reopened: open?').to.be.true;
 
         closed = oneEvent(el, 'sp-closed');
         await sendKeys({
@@ -107,7 +101,7 @@ describe('Action Menu - Groups', () => {
         await elementUpdated(el);
         await elementUpdated(firstItem);
 
-        expect(el.open).to.be.false;
-        expect(firstItem.selected).to.be.false;
+        expect(el.open, 'reclosed: open?').to.be.false;
+        expect(firstItem.selected, 'after deselect: first item selected?').to.be.false;
     });
 });
@@ -17,6 +17,7 @@ import {
     html,
     nextFrame,
     oneEvent,
+    waitUntil
 } from '@open-wc/testing';
 import { testForLitDevWarnings } from '../../../test/testing-helpers';
 
@@ -38,7 +39,11 @@ import type { Tooltip } from '@spectrum-web-components/tooltip';
 import { sendMouse } from '../../../test/plugins/browser.js';
 import type { TestablePicker } from '../../picker/test/index.js';
 import type { Overlay } from '@spectrum-web-components/overlay';
-import { sendKeys, setViewport } from '@web/test-runner-commands';
+import { 
+    a11ySnapshot,
+    findAccessibilityNode,
+    sendKeys, 
+    setViewport } from '@web/test-runner-commands';
 import { TemplateResult } from '@spectrum-web-components/base';
 import { isWebKit } from '@spectrum-web-components/shared';
 import { SAFARI_FOCUS_RING_CLASS } from '@spectrum-web-components/picker/src/InteractionController.js';
@@ -142,6 +147,34 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
 
             await expect(el).to.be.accessible();
         });
+        it('has menuitems in accessibility tree', async() => {
+            const el = await fixture<ActionMenu>(html`
+                <sp-action-menu
+                    label="More Actions">
+                    <sp-menu-item>Deselect</sp-menu-item>
+                    <sp-menu-item disabled>Make Work Path</sp-menu-item>
+                </sp-action-menu>
+            `);
+            const opened = oneEvent(el, 'sp-opened');
+            el.focus();
+            sendKeys({ press: 'Enter' });
+            await opened;
+            await nextFrame();
+
+
+            type NamedNode = { name: string, role: string, disabled: boolean };
+            const snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
+                children: NamedNode[];
+            };
+            const button = findAccessibilityNode<NamedNode>(snapshot, (node) => node.name === 'More Actions');
+            const menu = findAccessibilityNode<NamedNode>(snapshot, (node) => node.role === 'menu');
+            const deselect = findAccessibilityNode<NamedNode>(snapshot, (node) => node.role === 'menuitem' && node.name === 'Deselect');
+            const workPath = findAccessibilityNode<NamedNode>(snapshot, (node) => node.role === 'menuitem' && node.name === 'Make Work Path' && node.disabled);
+            expect(button, 'button').to.not.be.null;
+            expect(menu, 'menu').to.not.be.null;
+            expect(deselect, 'first menuitem').to.not.be.null;
+            expect(workPath, 'second menuitem').to.not.be.null;
+        });
         it('dispatches change events, no [href]', async () => {
             const changeSpy = spy();
 
@@ -404,35 +437,33 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
                 })
             );
 
-            await elementUpdated(el);
+            expect(el.open, 'open?').to.be.false;
 
-            el.focus();
-            await elementUpdated(el);
             let opened = oneEvent(el, 'sp-opened');
-            await sendKeys({ press: 'ArrowRight' });
-            await sendKeys({ press: 'ArrowLeft' });
-            await sendKeys({ press: 'Space' });
+            el.click();
             await opened;
 
+            expect(el.open, 'open?').to.be.true;
+
             const firstRect = (
                 el as unknown as { overlayElement: Overlay }
-            ).overlayElement.dialogEl.getBoundingClientRect();
+            )?.overlayElement?.dialogEl?.getBoundingClientRect();
 
-            let closed = oneEvent(el, 'sp-closed');
-            await sendKeys({ press: 'Space' });
+            const closed = oneEvent(el, 'sp-closed');
+            el.close();
             await closed;
+            expect(el.open, 'open?').to.be.false;
 
             opened = oneEvent(el, 'sp-opened');
-            await sendKeys({ press: 'Space' });
+            el.toggle();
             await opened;
+            expect(el.open, 'open?').to.be.true;
 
             const secondRect = (
                 el as unknown as { overlayElement: Overlay }
-            ).overlayElement.dialogEl.getBoundingClientRect();
+            )?.overlayElement?.dialogEl?.getBoundingClientRect();
 
-            closed = oneEvent(el, 'sp-closed');
-            await sendKeys({ press: 'Space' });
-            await closed;
+            el.close();
 
             expect(firstRect).to.deep.equal(secondRect);
         });
@@ -486,6 +517,44 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
             expect(el.open).to.be.false;
             expect(selected).to.equal(thirdItem.value);
         });
+        it('returns focus on `Escape`', async () => {
+            const el = await actionMenuFixture();
+            const thirdItem = el.querySelector(
+                'sp-menu-item:nth-of-type(3)'
+            ) as MenuItem;
+
+            expect(el.value).to.not.equal(thirdItem.value);
+            const opened = oneEvent(el, 'sp-opened');
+            el.focus();
+            await sendKeys({ press: 'Enter'})
+            await opened;
+
+            await sendKeys({ press: 'Escape'});
+            await waitUntil(
+                () => document.activeElement === el,
+                'focused', { timeout: 300 }
+            );
+            expect(el.open).to.be.false;
+        });
+        it('returns focus on select', async () => {
+            const el = await actionMenuFixture();
+            const thirdItem = el.querySelector(
+                'sp-menu-item:nth-of-type(3)'
+            ) as MenuItem;
+
+            expect(el.value).to.not.equal(thirdItem.value);
+            const opened = oneEvent(el, 'sp-opened');
+            el.focus();
+            await sendKeys({ press: 'Enter'})
+            await opened;
+
+            thirdItem.click();
+            await waitUntil(
+                () => document.activeElement === el,
+                'focused', { timeout: 300 }
+            );
+            expect(el.open).to.be.false;
+        });
         it('has attribute aria-describedby', async () => {
             const name = 'sp-picker';
             const description = 'Rendering a Picker';
@@ -581,94 +650,86 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
                 'initially selected item should maintain selection'
             ).to.be.true;
         });
-        it('allows top-level selection state to change', async () => {
-            let selected = true;
-            const handleChange = (
-                event: Event & { target: ActionMenu }
-            ): void => {
-                if (event.target.value === 'test') {
-                    selected = !selected;
-
-                    event.target.updateComplete.then(() => {
-                        event.target.value = selected ? 'test' : '';
-                    });
-                }
-            };
+        it('does not alter submenu selection when top-level menu items are selected', async () => {
             const root = await fixture<ActionMenu>(html`
-                <sp-action-menu label="More Actions" @change=${handleChange}>
-                    <sp-menu-item>One</sp-menu-item>
-                    <sp-menu-item selected value="test" id="root-selected-item">
-                        Two
-                    </sp-menu-item>
-                    <sp-menu-item id="item-with-submenu">
-                        B should be selected
-                        <sp-menu slot="submenu">
-                            <sp-menu-item>A</sp-menu-item>
-                            <sp-menu-item selected id="sub-selected-item">
-                                B
-                            </sp-menu-item>
-                            <sp-menu-item>C</sp-menu-item>
+                <sp-action-menu id="actionmenu" label="More Actions">
+                    <sp-menu-item id="item-1">One</sp-menu-item>
+                    <sp-menu-item id="item-2">
+                        Two, with B selected
+                        <sp-menu slot="submenu" id="menu-2" selects="single">
+                            <sp-menu-item id="item-2a" selected>A</sp-menu-item>
+                            <sp-menu-item id="item-2b">B</sp-menu-item>
                         </sp-menu>
                     </sp-menu-item>
                 </sp-action-menu>
             `);
 
-            const unselectedItem = root.querySelector(
-                'sp-menu-item'
-            ) as MenuItem;
-            const selectedItem = root.querySelector(
-                '#root-selected-item'
-            ) as MenuItem;
-
-            expect(unselectedItem.textContent).to.include('One');
-            expect(unselectedItem.selected).to.be.false;
-            expect(selectedItem.textContent).to.include('Two');
-            expect(selectedItem.selected).to.be.true;
+            const item1 = root.querySelector('#item-1') as MenuItem;
+            const item2 = root.querySelector('#item-2') as MenuItem;
+            const itemA = root.querySelector('#item-2a') as MenuItem;
+            const itemB = root.querySelector('#item-2b') as MenuItem;
 
             let opened = oneEvent(root, 'sp-opened');
+
+            expect(item1.selected, 'before opening: item1 selected?').to.be
+                .false;
+            expect(item2.selected, 'before opening: item2 selected?').to.be
+                .false;
+            expect(itemA.selected, 'before opening: itemA selected?').to.be
+                .true;
+            expect(item2.selected, 'before opening: itemB selected?').to.be
+                .false;
             root.click();
             await opened;
 
-            // close by clicking selected
-            // (with event listener: should set selected = false)
+            expect(root.open, 'after clicking open: open?').to.be.true;
+
             let closed = oneEvent(root, 'sp-closed');
-            selectedItem.click();
+            item1.click();
             await closed;
 
-            expect(root.open).to.be.false;
+            expect(item1.selected, 'after clicking item1: item1 selected?').to
+                .be.false;
+            expect(itemA.selected, 'after clicking item1: itemA selected?').to
+                .be.true;
+            expect(root.open, 'after clicking item1: open?').to.be.false;
+
             opened = oneEvent(root, 'sp-opened');
             root.click();
             await opened;
 
-            // close by clicking unselected
-            // (no event listener: should remain selected = false)
+            expect(root.open, 'after reopening: open?').to.be.true;
+
             closed = oneEvent(root, 'sp-closed');
-            unselectedItem.click();
+            itemB.click();
+            root.close();
             await closed;
 
+            expect(item1.selected, 'after clicking itemB: item1 selected?').to
+                .be.false;
+            expect(item2.selected, 'after clicking itemB: item2 selected?').to
+                .be.false;
+            expect(itemA.selected, 'after clicking itemB: itemA selected?').to
+                .be.false;
+            expect(itemB.selected, 'after clicking itemB: itemB selected?').to
+                .be.true;
+            expect(root.open, 'after clicking itemB: open?').to.be.false;
+
             opened = oneEvent(root, 'sp-opened');
             root.click();
             await opened;
 
-            expect(unselectedItem.textContent).to.include('One');
-            expect(unselectedItem.selected).to.be.false;
-            expect(selectedItem.textContent).to.include('Two');
-            expect(selectedItem.selected).to.be.false;
+            expect(root.open, 'after reopening: open?').to.be.true;
 
-            // close by clicking selected
-            // (with event listener: should set selected = false)
             closed = oneEvent(root, 'sp-closed');
-            selectedItem.click();
+            itemB.click();
             await closed;
 
-            opened = oneEvent(root, 'sp-opened');
-            root.click();
-            await opened;
-
-            expect(unselectedItem.textContent).to.include('One');
-            expect(unselectedItem.selected).to.be.false;
-            expect(selectedItem.textContent).to.include('Two');
-            expect(selectedItem.selected).to.be.true;
+            expect(item2.selected, 'after clicking item2: item2 selected?').to
+                .be.false;
+            expect(itemB.selected, 'after clicking item2: itemB selected?').to
+                .be.true;
+            expect(root.open, 'after clicking item2: open?').to.be.false;
         });
         it('shows tooltip', async function () {
             const openSpy = spy();
 
@@ -227,6 +227,12 @@ export class Combobox extends Textfield {
         if (!this.availableOptions[nextActiveIndex].disabled) {
             this.activeDescendant = this.availableOptions[nextActiveIndex];
         }
+        this.optionEls.forEach((el) =>
+            el.setAttribute(
+                'aria-selected',
+                el.value === this.activeDescendant?.value ? 'true' : 'false'
+            )
+        );
     }
 
     public activatePreviousDescendant(): void {
@@ -245,6 +251,12 @@ export class Combobox extends Textfield {
         if (!this.availableOptions[previousActiveIndex].disabled) {
             this.activeDescendant = this.availableOptions[previousActiveIndex];
         }
+        this.optionEls.forEach((el) =>
+            el.setAttribute(
+                'aria-selected',
+                el.value === this.activeDescendant?.value ? 'true' : 'false'
+            )
+        );
     }
 
     public selectDescendant(): void {
@@ -283,9 +295,8 @@ export class Combobox extends Textfield {
 
     protected handleMenuChange(event: PointerEvent & { target: Menu }): void {
         const { target } = event;
-        const value = target.selected[0];
         const selected = (this.options || this.optionEls).find(
-            (item) => item.value === value
+            (item) => item.value === target?.value
         );
         this.value = selected?.itemText || '';
         event.preventDefault();
 
@@ -20,7 +20,7 @@ import {
 
 import '@spectrum-web-components/combobox/sp-combobox.js';
 import { Combobox } from '@spectrum-web-components/combobox';
-import { detectOS, fixture } from '../../../test/testing-helpers.js';
+import { fixture } from '../../../test/testing-helpers.js';
 import { findDescribedNode } from '../../../test/testing-helpers-a11y.js';
 import {
     a11ySnapshot,
@@ -29,7 +29,6 @@ import {
 } from '@web/test-runner-commands';
 import type { AccessibleNamedNode } from './helpers.js';
 import { comboboxFixture } from './helpers.js';
-import { isWebKit } from '@spectrum-web-components/shared';
 import {
     withFieldLabel,
     withHelpText,
@@ -72,9 +71,6 @@ describe('Combobox accessibility', () => {
             <div>${withFieldLabel()}</div>
         `);
         const el = test.querySelector('sp-combobox') as unknown as Combobox;
-        const name = 'Pick something';
-        const webkitName = 'Pick something Banana';
-        const isWebKitMacOS = isWebKit() && detectOS() === 'Mac OS';
 
         await elementUpdated(el);
         await nextFrame();
@@ -89,7 +85,7 @@ describe('Combobox accessibility', () => {
         const a11yNode = findAccessibilityNode<AccessibleNamedNode>(
             snapshot,
             (node) =>
-                node.name === name && !node.value && node.role === 'combobox'
+                node.name === 'Pick something' && !node.value && node.role === 'combobox'
         );
         // by default, is there a combobox that has `name` as the label?
         expect(a11yNode, '`name` is the label text').to.not.be.null;
@@ -102,55 +98,26 @@ describe('Combobox accessibility', () => {
         )) as unknown as AccessibleNamedNode & {
             children: AccessibleNamedNode[];
         };
-
-        // WebKit doesn't currently associate the `name` via the accessibility tree.
-        // Instead if lists this data in the description 🤷🏻‍♂️
-        // Give it an escape hatch for now.
         const node = findAccessibilityNode<AccessibleNamedNode>(
             snapshot,
             (node) =>
-                (node.name === name ||
-                    (isWebKitMacOS && node.name === webkitName)) &&
+                node.name === 'Pick something' &&
                 node.value === 'Banana' &&
                 node.role === 'combobox'
         );
 
         expect(
             node,
-            `pre escape hatch node not available: ${JSON.stringify(
+            `node not available: ${JSON.stringify(
                 snapshot,
                 null,
                 '  '
             )}`
         ).to.not.be.null;
-
-        if (isWebKitMacOS) {
-            // Retest WebKit without the escape hatch, expecting it to fail.
-            // This way we get notified when the results are as expected, again.
-            const iOSNode = findAccessibilityNode<AccessibleNamedNode>(
-                snapshot,
-                (node) =>
-                    node.name === name &&
-                    node.value === 'Banana' &&
-                    node.role === 'combobox'
-            );
-            expect(
-                iOSNode,
-                `post escape hatch node available: ${JSON.stringify(
-                    snapshot,
-                    null,
-                    '  '
-                )}`
-            ).to.be.null;
-        }
     });
     it('manages its "name" value in the accessibility tree', async () => {
         const el = await comboboxFixture();
 
-        const name = 'Combobox';
-        const webkitName = 'Combobox Banana';
-        const isWebKitMacOS = isWebKit() && detectOS() === 'Mac OS';
-
         await elementUpdated(el);
         await nextFrame();
         await nextFrame();
@@ -164,7 +131,7 @@ describe('Combobox accessibility', () => {
         const a11yNode = findAccessibilityNode<AccessibleNamedNode>(
             snapshot,
             (node) =>
-                node.name === name && !node.value && node.role === 'combobox'
+                node.name === 'Combobox' && !node.value && node.role === 'combobox'
         );
         // by default, is there a combobox that has `name` as the label?
         expect(a11yNode, '`name` is the label text').to.not.be.null;
@@ -177,47 +144,22 @@ describe('Combobox accessibility', () => {
         )) as unknown as AccessibleNamedNode & {
             children: AccessibleNamedNode[];
         };
-
-        // WebKit doesn't currently associate the `name` via the accessibility tree.
-        // Instead if lists this data in the description 🤷🏻‍♂️
-        // Give it an escape hatch for now.
         const node = findAccessibilityNode<AccessibleNamedNode>(
             snapshot,
             (node) =>
-                (node.name === name ||
-                    (isWebKitMacOS && node.name === webkitName)) &&
+                node.name === 'Combobox' &&
                 node.value === 'Banana' &&
                 node.role === 'combobox'
         );
 
         expect(
             node,
-            `pre escape hatch node not available: ${JSON.stringify(
+            `node not available: ${JSON.stringify(
                 snapshot,
                 null,
                 '  '
             )}`
         ).to.not.be.null;
-
-        if (isWebKitMacOS) {
-            // Retest WebKit without the escape hatch, expecting it to fail.
-            // This way we get notified when the results are as expected, again.
-            const iOSNode = findAccessibilityNode<AccessibleNamedNode>(
-                snapshot,
-                (node) =>
-                    node.name === name &&
-                    node.value === 'Banana' &&
-                    node.role === 'combobox'
-            );
-            expect(
-                iOSNode,
-                `post escape hatch node available: ${JSON.stringify(
-                    snapshot,
-                    null,
-                    '  '
-                )}`
-            ).to.be.null;
-        }
     });
     it('manages its "description" value with slotted <sp-tooltip>', async () => {
         const test = await fixture<HTMLDivElement>(html`
 
@@ -488,27 +488,35 @@ describe('Combobox', () => {
             await elementUpdated(el);
             expect(el.value).to.equal('');
             expect(el.activeDescendant).to.be.undefined;
-            expect(el.open).to.be.false;
+            expect(el.open, 'open?').to.be.false;
 
             el.focusElement.focus();
             const opened = oneEvent(el, 'sp-opened');
             el.focusElement.dispatchEvent(arrowDownEvent());
             await opened;
 
-            expect(el.open).to.be.true;
-
-            await elementUpdated(el);
-            el.focusElement.dispatchEvent(arrowDownEvent());
-
+            expect(el.open, 'open?').to.be.true;
             await elementUpdated(el);
-            testActiveElement(el, 'banana');
+            expect(
+                el.activeDescendant?.value,
+                'activeDscendant after open?'
+            ).to.equal('apple');
             el.focusElement.dispatchEvent(enterEvent());
 
             await elementUpdated(el);
-            expect(el.open).to.be.false;
-            expect(el.activeDescendant).to.be.undefined;
-            expect(el.value).to.equal('Banana');
-            expect(el.focusElement.value).to.equal(el.value);
+            expect(el.open, 'open?').to.be.false;
+            expect(el.activeDescendant, 'activeDescendant after Enter?').to.be
+                .undefined;
+            expect(el.value, 'value after enter').to.equal('Apple');
+            expect(
+                el.shadowRoot.querySelector(
+                    'sp-menu-item[aria-selected="true"]'
+                )?.id,
+                'aria-selected'
+            ).to.equal('apple');
+            expect(el.focusElement.value, 'focusElement after enter').to.equal(
+                el.value
+            );
         });
         it('does not set the value when `enter` is pressed and no active descendent', async () => {
             const el = await comboboxFixture();
@@ -538,9 +546,10 @@ describe('Combobox', () => {
 
             await elementUpdated(el);
 
-            expect(el.value).to.equal('');
-            expect(el.activeDescendant).to.be.undefined;
-            expect(el.open).to.be.false;
+            expect(el.value, 'initial value').to.equal('');
+            expect(el.activeDescendant, 'initial activeDescendant').to.be
+                .undefined;
+            expect(el.open, 'initially open?').to.be.false;
 
             const opened = oneEvent(el, 'sp-opened');
             el.focusElement.click();
@@ -549,7 +558,7 @@ describe('Combobox', () => {
             const item = el.shadowRoot.querySelector('#cherry') as HTMLElement;
             await elementUpdated(item);
 
-            expect(el.open).to.be.true;
+            expect(el.open, 'open after click?').to.be.true;
 
             const itemValue = (item.textContent as string).trim();
             const rect = item.getBoundingClientRect();
@@ -567,9 +576,10 @@ describe('Combobox', () => {
             });
             await elementUpdated(el);
 
-            expect(el.value).to.equal(itemValue);
-            expect(el.open).to.be.false;
-            expect(el.activeDescendant).to.be.undefined;
+            expect(el.value, 'value after item click?').to.equal(itemValue);
+            expect(el.open, 'open after item click?').to.be.false;
+            expect(el.activeDescendant, 'activeDescendant after item click').to
+                .be.undefined;
         });
         it('reflects the selected value in menu on reopening', async () => {
             const el = await comboboxFixture();
 
@@ -87,9 +87,12 @@ export const testActiveElement = (
     el: TestableCombobox,
     testId: string
 ): void => {
-    expect(el.activeDescendant?.value).to.equal(testId);
+    expect(el.activeDescendant?.value, 'active descendant').to.equal(testId);
     const activeElement = el.shadowRoot.querySelector(
         `#${el.activeDescendant.value}`
     ) as HTMLElement;
-    expect(activeElement.getAttribute('aria-selected')).to.equal('true');
+    expect(
+        activeElement.getAttribute('aria-selected'),
+        'aria-selected'
+    ).to.equal('true');
 };
@@ -33,7 +33,7 @@ An `<sp-menu-group>` can be used to organize `<sp-menu-item>`s in an `<sp-memu>`
 <p>
     Your favorite park in New York is: <span id="group-1-value"></span>
     <br><br>
-    Your favorite park in San Fransisco is: <span id="group-2-value"></span>
+    Your favorite park in San Francisco is: <span id="group-2-value"></span>
 </p>
 <sp-popover open style="position: relative">
     <sp-menu
@@ -62,7 +62,7 @@ An `<sp-menu-group>` can be used to organize `<sp-menu-item>`s in an `<sp-memu>`
             id="group-2"
             selects="single"
         >
-            <span slot="header">San Fransisco</span>
+            <span slot="header">San Francisco</span>
             <sp-menu-item>
                 Golden Gate Park
             </sp-menu-item>
 
@@ -95,12 +95,35 @@ Content assigned to the `value` slot will be placed at the end of the `<sp-menu-
 An `<sp-menu-item>` can also accept content addressed to its `submenu` slot. Using the `<sp-menu>` element with this slot name the options will be surfaced in flyout menu that can be activated by hovering over the root menu item with your pointer or focusing the menu item and pressing the appropriate `ArrowRight` or `ArrowLeft` key based on text direction to move into the submenu.
 
 ```html
-<sp-menu style="width: 200px;">
+<p>
+    Your favorite park in New York is:
+    <span id="group-1-value"></span>
+    <br />
+    <br />
+    Your favorite park in San Francisco is:
+    <span id="group-2-value"></span>
+</p>
+<sp-menu
+    style="width: 200px;"
+    onchange="this.parentElement
+        .previousElementSibling
+        .querySelector(`#${arguments[0].target.id}-value`)
+        .textContent = arguments[0].target.value"
+>
+    <sp-menu-item>
+        New York
+        <sp-menu slot="submenu" selects="single">
+            <sp-menu-item>Central Park</sp-menu-item>
+            <sp-menu-item>Flushing Meadows Corona Park</sp-menu-item>
+            <sp-menu-item>Prospect Park</sp-menu-item>
+        </sp-menu>
+    </sp-menu-item>
     <sp-menu-item>
-        Item with submenu
-        <sp-menu slot="submenu">
-            <sp-menu-item>Additional options</sp-menu-item>
-            <sp-menu-item>Available on request</sp-menu-item>
+        San Francisco
+        <sp-menu slot="submenu" selects="single">
+            <sp-menu-item>Golden Gate Park</sp-menu-item>
+            <sp-menu-item>John McLaren Park</sp-menu-item>
+            <sp-menu-item>Lake Merced Park</sp-menu-item>
         </sp-menu>
     </sp-menu-item>
 </sp-menu>
 
@@ -48,15 +48,20 @@ export class MenuGroup extends Menu {
     @state()
     private headerElement?: HTMLElement;
 
+    /**
+     * a menu group must have the role `group`
+     * and should never function as a menu
+     */
     protected override get ownRole(): string {
-        switch (this.selects) {
-            case 'multiple':
-            case 'single':
-            case 'inherit':
-                return 'group';
-            default:
-                return 'menu';
-        }
+        return 'group';
+    }
+
+    /**
+     * only a menu controls roving tabindex;
+     * groups should defer navigation to parent menu
+     */
+    protected override get controlsRovingTabindex(): boolean {
+        return false;
     }
 
     protected updateLabel(): void {
@@ -87,7 +92,7 @@ export class MenuGroup extends Menu {
             <span class="header" ?hidden=${!this.headerElement}>
                 <slot name="header" @slotchange=${this.updateLabel}></slot>
             </span>
-            <sp-menu ignore>${this.renderMenuItemSlot()}</sp-menu>
+            ${this.renderMenuItemSlot()}
         `;
     }
 }
@@ -52,6 +52,9 @@ type MenuCascadeItem = {
     ancestorWithSelects?: HTMLElement;
 };
 
+/**
+ * Fires when a menu item is added or updated so that a parent menu can track it.
+ */
 export class MenuItemAddedOrUpdatedEvent extends Event {
     constructor(item: MenuItem) {
         super('sp-menu-item-added-or-updated', {
@@ -79,6 +82,55 @@ export class MenuItemAddedOrUpdatedEvent extends Event {
     currentAncestorWithSelects?: Menu;
 }
 
+/**
+ * Fires to forward keyboard event information to parent menu.
+ */
+export class MenuItemKeydownEvent extends KeyboardEvent {
+    root?: MenuItem;
+    private _event?: KeyboardEvent;
+    constructor({ root, event }: { root?: MenuItem; event?: KeyboardEvent }) {
+        super('sp-menu-item-keydown', { bubbles: true, composed: true });
+        this.root = root;
+        this._event = event;
+    }
+
+    public override get altKey(): boolean {
+        return this._event?.altKey || false;
+    }
+
+    public override get code(): string {
+        return this._event?.code || '';
+    }
+
+    public override get ctrlKey(): boolean {
+        return this._event?.ctrlKey || false;
+    }
+
+    public override get isComposing(): boolean {
+        return this._event?.isComposing || false;
+    }
+
+    public override get key(): string {
+        return this._event?.key || '';
+    }
+
+    public override get location(): number {
+        return this._event?.location || 0;
+    }
+
+    public override get metaKey(): boolean {
+        return this._event?.metaKey || false;
+    }
+
+    public override get repeat(): boolean {
+        return this._event?.repeat || false;
+    }
+
+    public override get shiftKey(): boolean {
+        return this._event?.shiftKey || false;
+    }
+}
+
 export type MenuItemChildren = { icon: Element[]; content: Node[] };
 
 /**
@@ -100,17 +152,29 @@ export class MenuItem extends LikeAnchor(
 
     abortControllerSubmenu!: AbortController;
 
+    /**
+     * whether the menu item is active or has an active descendant
+     */
     @property({ type: Boolean, reflect: true })
     public active = false;
 
     private dependencyManager = new DependencyManagerController(this);
 
+    /**
+     * whether the menu item has keyboard focus
+     */
     @property({ type: Boolean, reflect: true })
     public focused = false;
 
+    /**
+     * whether the menu item is selected
+     */
     @property({ type: Boolean, reflect: true })
     public selected = false;
 
+    /**
+     * value of the menu item which is used for selection
+     */
     @property({ type: String })
     public get value(): string {
         return this._value || this.itemText;
@@ -132,6 +196,7 @@ export class MenuItem extends LikeAnchor(
 
     /**
      * @private
+     * text content of the menu item minus whitespace
      */
     public get itemText(): string {
         return this.itemChildren.content.reduce(
@@ -140,6 +205,9 @@ export class MenuItem extends LikeAnchor(
         );
     }
 
+    /**
+     * whether the menu item has a submenu
+     */
     @property({ type: Boolean, reflect: true, attribute: 'has-submenu' })
     public hasSubmenu = false;
 
@@ -149,6 +217,9 @@ export class MenuItem extends LikeAnchor(
     @query('slot[name="icon"]')
     iconSlot!: HTMLSlotElement;
 
+    /**
+     * whether menu item text content should not wrap
+     */
     @property({
         type: Boolean,
         reflect: true,
@@ -167,6 +238,9 @@ export class MenuItem extends LikeAnchor(
 
     private submenuElement?: HTMLElement;
 
+    /**
+     * the focusable element of the menu item
+     */
     public override get focusElement(): HTMLElement {
         return this;
     }
@@ -206,6 +280,8 @@ export class MenuItem extends LikeAnchor(
         this.addEventListener('click', this.handleClickCapture, {
             capture: true,
         });
+        this.addEventListener('focus', this.handleFocus);
+        this.addEventListener('blur', this.handleBlur);
 
         new MutationController(this, {
             config: {
@@ -227,28 +303,23 @@ export class MenuItem extends LikeAnchor(
         });
     }
 
+    /**
+     * whether submenu is open
+     */
     @property({ type: Boolean, reflect: true })
     public open = false;
 
-    public override click(): void {
-        if (this.disabled) {
-            return;
-        }
-
-        if (this.shouldProxyClick()) {
-            return;
-        }
-
-        super.click();
-    }
-
     private handleClickCapture(event: Event): void | boolean {
         if (this.disabled) {
             event.preventDefault();
             event.stopImmediatePropagation();
             event.stopPropagation();
             return false;
         }
+
+        if (this.shouldProxyClick()) {
+            return;
+        }
     }
 
     private handleSlottableRequest = (event: SlottableRequestEvent): void => {
@@ -360,6 +431,9 @@ export class MenuItem extends LikeAnchor(
         `;
     }
 
+    /**
+     * determines if item has a submenu and updates the `aria-haspopup` attribute
+     */
     protected manageSubmenu(event: Event & { target: HTMLSlotElement }): void {
         this.submenuElement = event.target.assignedElements({
             flatten: true,
@@ -385,18 +459,52 @@ export class MenuItem extends LikeAnchor(
     protected override firstUpdated(changes: PropertyValues): void {
         super.firstUpdated(changes);
         this.setAttribute('tabindex', '-1');
+        this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('pointerdown', this.handlePointerdown);
         this.addEventListener('pointerenter', this.closeOverlaysForRoot);
         if (!this.hasAttribute('id')) {
             this.id = `sp-menu-item-${randomID()}`;
         }
     }
 
+    /**
+     * forward key info from keydown event to parent menu
+     */
+    handleKeydown = (event: KeyboardEvent): void => {
+        const { target, key } = event;
+        const openSubmenuKey =
+            this.hasSubmenu && !this.open && [' ', 'Enter'].includes(key);
+        if (target === this) {
+            if (
+                ['ArrowLeft', 'ArrowRight', 'Escape'].includes(key) ||
+                openSubmenuKey
+            )
+                event.preventDefault();
+            this.dispatchEvent(
+                new MenuItemKeydownEvent({ root: this, event: event })
+            );
+        }
+    };
+
     protected closeOverlaysForRoot(): void {
         if (this.open) return;
         this.menuData.parentMenu?.closeDescendentOverlays();
     }
 
+    protected handleFocus(event: FocusEvent): void {
+        const { target } = event;
+        if (target === this) {
+            this.focused = true;
+        }
+    }
+
+    protected handleBlur(event: FocusEvent): void {
+        const { target } = event;
+        if (target === this) {
+            this.focused = false;
+        }
+    }
+
     protected handleSubmenuClick(event: Event): void {
         if (event.composedPath().includes(this.overlayElement)) {
             return;
@@ -409,6 +517,7 @@ export class MenuItem extends LikeAnchor(
             // Wait till after `closeDescendentOverlays` has happened in Menu
             // to reopen (keep open) the direct descendent of this Menu Item
             this.overlayElement.open = this.open;
+            this.focused = false;
         });
     }
 
@@ -467,17 +576,21 @@ export class MenuItem extends LikeAnchor(
     }
 
     protected handleSubmenuOpen(event: Event): void {
+        const shouldFocus = this.matches(':focus, :focus-within') || this.focused;
         this.focused = false;
         const parentOverlay = event.composedPath().find((el) => {
             return (
                 el !== this.overlayElement &&
                 (el as HTMLElement).localName === 'sp-overlay'
             );
         }) as Overlay;
+        if (shouldFocus)
+            this.submenuElement?.focus();
         this.overlayElement.parentOverlayToForceClose = parentOverlay;
     }
 
     protected cleanup(): void {
+        this.setAttribute('aria-expanded', 'false');
         this.open = false;
         this.active = false;
     }
@@ -511,6 +624,20 @@ export class MenuItem extends LikeAnchor(
         this.updateAriaSelected();
     }
 
+    protected override willUpdate(changes: PropertyValues<this>): void {
+        super.updated(changes);
+
+        // make sure focus returns to the anchor element when submenu is closed
+        if (
+            changes.has('open') &&
+            !this.open &&
+            this.hasSubmenu &&
+            this.hasVisibleFocusInTree()
+        ) {
+            this.focus();
+        }
+    }
+
     protected override updated(changes: PropertyValues<this>): void {
         super.updated(changes);
         if (
@@ -597,6 +724,18 @@ export class MenuItem extends LikeAnchor(
         this.dispatchUpdate();
     }
 
+    public override focus(): void {
+        super.focus();
+        // ensure focus event fires in Chromium for tests
+        this.dispatchEvent(new FocusEvent('focus'));
+    }
+
+    public override blur(): void {
+        // ensure focus event fires in Chromium for tests
+        this.dispatchEvent(new FocusEvent('blur'));
+        super.blur();
+    }
+
     public dispatchUpdate(): void {
         if (!this.isConnected) {
             return;
@@ -611,8 +750,10 @@ export class MenuItem extends LikeAnchor(
         selectionRoot?: Menu;
         cleanupSteps: ((item: MenuItem) => void)[];
     } = {
+        // menu that controls ArrowUp/ArrowDown navigation
         focusRoot: undefined,
         parentMenu: undefined,
+        // menu or menu group that controls selection
         selectionRoot: undefined,
         cleanupSteps: [],
     };
 
@@ -53,19 +53,25 @@ export class ComplexSlottedGroup extends LitElement {
     get menu(): Menu {
         return this.renderRoot.querySelector('sp-menu') as Menu;
     }
+
+    static override shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    };
+
     protected override render(): TemplateResult {
         return html`
-            <sp-menu>
-                <sp-menu-group>
+            <sp-menu id="sp-menu">
+                <sp-menu-group id="sp-menu-group-1">
                     <sp-menu-item id="i-1">Before First</sp-menu-item>
                     <slot name="before"></slot>
                 </sp-menu-group>
-                <sp-menu-group>
+                <sp-menu-group id="sp-menu-group-2">
                     <sp-menu-item id="i-4">Sibling 1</sp-menu-item>
                     <slot></slot>
                     <sp-menu-item id="i-10">Sibling 2</sp-menu-item>
                 </sp-menu-group>
-                <sp-menu-group>
+                <sp-menu-group id="sp-menu-group-3">
                     <sp-menu-item id="i-11">After 1</sp-menu-item>
                     <sp-menu-item id="i-12">After 2</sp-menu-item>
                 </sp-menu-group>
@@ -84,9 +90,15 @@ export class ComplexSlottedMenu extends LitElement {
             ) as ComplexSlottedGroup
         ).menu;
     }
+
+    static override shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    };
+
     protected override render(): TemplateResult {
         return html`
-            <complex-slotted-group id="group">
+            <complex-slotted-group id="complex-slotted-group">
                 <sp-menu-item id="i-5">Middle 1</sp-menu-item>
                 <sp-menu-item id="i-6">Middle 2</sp-menu-item>
                 <sp-menu-item id="i-7">Middle 3</sp-menu-item>
 
@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
 */
 import { html, TemplateResult } from '@spectrum-web-components/base';
 
-import type { Menu } from '@spectrum-web-components/menu';
+import type { Menu, MenuItem } from '@spectrum-web-components/menu';
 import '@spectrum-web-components/menu/sp-menu.js';
 import '@spectrum-web-components/popover/sp-popover.js';
 import '@spectrum-web-components/action-menu/sp-action-menu.js';
@@ -431,3 +431,24 @@ export const menuWithValueSlots = (): TemplateResult => {
         </sp-popover>
     `;
 };
+
+headersAndIcons.storyName = 'Dynamic MenuItems';
+
+export const dynamicRemoval = (): TemplateResult => {
+    const removeItem = async function (event: FocusEvent) {
+        await (event.target as MenuItem)?.updateComplete;
+        (event.target as MenuItem)?.remove();
+    };
+    return html`
+        <sp-menu id="casey" selects="single">
+            <sp-menu-item>Deselect</sp-menu-item>
+            <sp-menu-item>Select Inverse</sp-menu-item>
+            <sp-menu-item id="nikkimk" @focus=${removeItem}>
+                Feather...
+            </sp-menu-item>
+            <sp-menu-item selected>Select and Mask...</sp-menu-item>
+            <sp-menu-item>Save Selection</sp-menu-item>
+            <sp-menu-item disabled>Make Work Path</sp-menu-item>
+        </sp-menu>
+    `;
+};
@@ -43,28 +43,7 @@ const focusableItems = (menu: Menu | MenuGroup): MenuItem[] => {
 describe('Menu group', () => {
     testForLitDevWarnings(
         async () =>
-            await fixture<Menu>(
-                html`
-                    <sp-menu selects="single">
-                        <sp-menu-group selects="inherit">
-                            <span slot="header">Section Heading</span>
-                            <sp-menu-item>Action 1</sp-menu-item>
-                            <sp-menu-item>Action 2</sp-menu-item>
-                            <sp-menu-item>Action 3</sp-menu-item>
-                        </sp-menu-group>
-                        <sp-menu-divider></sp-menu-divider>
-                        <sp-menu-group selects="inherit">
-                            <span slot="header">Section Heading</span>
-                            <sp-menu-item>Save</sp-menu-item>
-                            <sp-menu-item disabled>Download</sp-menu-item>
-                        </sp-menu-group>
-                    </sp-menu>
-                `
-            )
-    );
-    it('renders', async () => {
-        const el = await fixture<Menu>(
-            html`
+            await fixture<Menu>(html`
                 <sp-menu selects="single">
                     <sp-menu-group selects="inherit">
                         <span slot="header">Section Heading</span>
@@ -79,22 +58,40 @@ describe('Menu group', () => {
                         <sp-menu-item disabled>Download</sp-menu-item>
                     </sp-menu-group>
                 </sp-menu>
-            `
-        );
+            `)
+    );
+    it('renders', async () => {
+        const el = await fixture<Menu>(html`
+            <sp-menu selects="single">
+                <sp-menu-group selects="inherit">
+                    <span slot="header">Section Heading</span>
+                    <sp-menu-item>Action 1</sp-menu-item>
+                    <sp-menu-item>Action 2</sp-menu-item>
+                    <sp-menu-item>Action 3</sp-menu-item>
+                </sp-menu-group>
+                <sp-menu-divider></sp-menu-divider>
+                <sp-menu-group selects="inherit">
+                    <span slot="header">Section Heading</span>
+                    <sp-menu-item>Save</sp-menu-item>
+                    <sp-menu-item disabled>Download</sp-menu-item>
+                </sp-menu-group>
+            </sp-menu>
+        `);
 
-        await waitUntil(() => {
-            return managedItems(el).length === 5;
-        }, `expected menu group to manage 5 children, received ${managedItems(el).length} of ${el.childItems.length}`);
+        await waitUntil(
+            () => {
+                return managedItems(el).length === 5;
+            },
+            `expected menu group to manage 5 children, received ${managedItems(el).length} of ${el.childItems.length}`
+        );
         await elementUpdated(el);
 
         await expect(el).to.be.accessible();
     });
     it('manages [slot="header"] content', async () => {
-        const el = await fixture<MenuGroup>(
-            html`
-                <sp-menu-group></sp-menu-group>
-            `
-        );
+        const el = await fixture<MenuGroup>(html`
+            <sp-menu-group></sp-menu-group>
+        `);
         await elementUpdated(el);
         const slot = el.shadowRoot.querySelector(
             '[name="header"'
@@ -116,46 +113,44 @@ describe('Menu group', () => {
         expect(header.id).to.equal('');
     });
     it('handles selects for nested menu groups', async () => {
-        const el = await fixture<Menu>(
-            html`
-                <sp-menu selects="single">
-                    <sp-menu-item selected>First</sp-menu-item>
-                    <!-- 1 -->
-                    <sp-menu-item>Second</sp-menu-item>
-                    <!-- 1 -->
-                    <sp-menu-group id="mg-multi" selects="multiple">
-                        <sp-menu-item selected>Multi1</sp-menu-item>
+        const el = await fixture<Menu>(html`
+            <sp-menu selects="single">
+                <sp-menu-item selected>First</sp-menu-item>
+                <!-- 1 -->
+                <sp-menu-item>Second</sp-menu-item>
+                <!-- 1 -->
+                <sp-menu-group id="mg-multi" selects="multiple">
+                    <sp-menu-item selected>Multi1</sp-menu-item>
+                    <!-- 2 -->
+                    <sp-menu-item>Multi2</sp-menu-item>
+                    <!-- 2 -->
+                    <sp-menu-group id="mg-sub-inherit" selects="inherit">
+                        <sp-menu-item>SubInherit1</sp-menu-item>
                         <!-- 2 -->
-                        <sp-menu-item>Multi2</sp-menu-item>
+                        <sp-menu-item>SubInherit2</sp-menu-item>
                         <!-- 2 -->
-                        <sp-menu-group id="mg-sub-inherit" selects="inherit">
-                            <sp-menu-item>SubInherit1</sp-menu-item>
-                            <!-- 2 -->
-                            <sp-menu-item>SubInherit2</sp-menu-item>
-                            <!-- 2 -->
-                        </sp-menu-group>
                     </sp-menu-group>
-                    <sp-menu-group id="mg-single" selects="single">
-                        <sp-menu-item selected>Single1</sp-menu-item>
-                        <!-- 3 -->
-                        <sp-menu-item>Single2</sp-menu-item>
-                        <!-- 3 -->
-                    </sp-menu-group>
-                    <sp-menu-group id="mg-none">
-                        <sp-menu-item>Inherit1</sp-menu-item>
-                        <!-- - -->
-                        <sp-menu-item>Inherit2</sp-menu-item>
-                        <!-- - -->
-                    </sp-menu-group>
-                    <sp-menu-group id="mg-inherit" selects="inherit">
-                        <sp-menu-item>Inherit1</sp-menu-item>
-                        <!-- 1 -->
-                        <sp-menu-item>Inherit2</sp-menu-item>
-                        <!-- 1 -->
-                    </sp-menu-group>
-                </sp-menu>
-            `
-        );
+                </sp-menu-group>
+                <sp-menu-group id="mg-single" selects="single">
+                    <sp-menu-item selected>Single1</sp-menu-item>
+                    <!-- 3 -->
+                    <sp-menu-item>Single2</sp-menu-item>
+                    <!-- 3 -->
+                </sp-menu-group>
+                <sp-menu-group id="mg-none">
+                    <sp-menu-item>Inherit1</sp-menu-item>
+                    <!-- - -->
+                    <sp-menu-item>Inherit2</sp-menu-item>
+                    <!-- - -->
+                </sp-menu-group>
+                <sp-menu-group id="mg-inherit" selects="inherit">
+                    <sp-menu-item>Inherit1</sp-menu-item>
+                    <!-- 1 -->
+                    <sp-menu-item>Inherit2</sp-menu-item>
+                    <!-- 1 -->
+                </sp-menu-group>
+            </sp-menu>
+        `);
 
         // 1 & 3 should be menuitemradio
         // 2 shouwl menuitemcheckbox
@@ -317,22 +312,20 @@ describe('Menu group', () => {
     });
 
     it('handles changing managed items for selects changes', async () => {
-        const el = await fixture<Menu>(
-            html`
-                <sp-menu selects="multiple" value-separator="--">
-                    <sp-menu-item selected>First</sp-menu-item>
-                    <sp-menu-item>Second</sp-menu-item>
-                    <sp-menu-group id="mg-inherit" selects="inherit">
-                        <sp-menu-item>Inherit1</sp-menu-item>
-                        <sp-menu-item>Inherit2</sp-menu-item>
-                        <sp-menu-group id="mg-sub-inherit" selects="inherit">
-                            <sp-menu-item>SubInherit1</sp-menu-item>
-                            <sp-menu-item selected>SubInherit2</sp-menu-item>
-                        </sp-menu-group>
+        const el = await fixture<Menu>(html`
+            <sp-menu selects="multiple" value-separator="--">
+                <sp-menu-item selected>First</sp-menu-item>
+                <sp-menu-item>Second</sp-menu-item>
+                <sp-menu-group id="mg-inherit" selects="inherit">
+                    <sp-menu-item>Inherit1</sp-menu-item>
+                    <sp-menu-item>Inherit2</sp-menu-item>
+                    <sp-menu-group id="mg-sub-inherit" selects="inherit">
+                        <sp-menu-item>SubInherit1</sp-menu-item>
+                        <sp-menu-item selected>SubInherit2</sp-menu-item>
                     </sp-menu-group>
-                </sp-menu>
-            `
-        );
+                </sp-menu-group>
+            </sp-menu>
+        `);
 
         await waitUntil(
             () => managedItems(el).length == 6,
@@ -381,9 +374,12 @@ describe('Menu group', () => {
         await elementUpdated(inheritGroup);
         await elementUpdated(el);
 
-        await waitUntil(() => {
-            return managedItems(inheritGroup).length === 4;
-        }, `expected new single sub-group to manage 4 items, received ${managedItems(inheritGroup).length} because "selects === ${inheritGroup.selects}`);
+        await waitUntil(
+            () => {
+                return managedItems(inheritGroup).length === 4;
+            },
+            `expected new single sub-group to manage 4 items, received ${managedItems(inheritGroup).length} because "selects === ${inheritGroup.selects}`
+        );
 
         await waitUntil(
             () => managedItems(el).length === 2,
@@ -419,13 +415,13 @@ describe('Menu group', () => {
         items.i6 = el.renderRoot.querySelector('#i-6') as MenuItem;
         items.i7 = el.renderRoot.querySelector('#i-7') as MenuItem;
         const group = el.renderRoot.querySelector(
-            '#group'
+            '#complex-slotted-group'
         ) as ComplexSlottedGroup;
-        items.i1 = group.renderRoot.querySelector('#i-1') as MenuItem;
-        items.i4 = group.renderRoot.querySelector('#i-4') as MenuItem;
-        items.i10 = group.renderRoot.querySelector('#i-10') as MenuItem;
-        items.i11 = group.renderRoot.querySelector('#i-11') as MenuItem;
-        items.i12 = group.renderRoot.querySelector('#i-12') as MenuItem;
+        items.i1 = group?.renderRoot.querySelector('#i-1') as MenuItem;
+        items.i4 = group?.renderRoot.querySelector('#i-4') as MenuItem;
+        items.i10 = group?.renderRoot.querySelector('#i-10') as MenuItem;
+        items.i11 = group?.renderRoot.querySelector('#i-11') as MenuItem;
+        items.i12 = group?.renderRoot.querySelector('#i-12') as MenuItem;
 
         const rect = items.i9.getBoundingClientRect();
         await sendMouse({
 
@@ -117,11 +117,59 @@ describe('Menu item', () => {
         ).anchorElement.dispatchEvent(new FocusEvent('focus'));
 
         await elementUpdated(item);
-        expect(el === document.activeElement).to.be.true;
+
+        expect(item === document.activeElement).to.be.true;
         item.click();
 
         expect(clickTargetSpy.calledWith(anchorElement)).to.be.true;
     });
+    it('allows link click', async () => {
+        const clickTargetSpy = spy();
+        const el = await fixture<Menu>(html`
+            <sp-menu
+                @click=${(event: Event) => {
+                    clickTargetSpy(
+                        event.composedPath()[0] as HTMLAnchorElement
+                    );
+                    event.stopPropagation();
+                    event.preventDefault();
+                }}
+            >
+                <sp-menu-item
+                    href="https://opensource.adobe.com/spectrum-web-components"
+                >
+                    Selected Text
+                </sp-menu-item>
+            </sp-menu>
+        `);
+
+        const item = el.querySelector('sp-menu-item') as MenuItem;
+        const { anchorElement } = item as unknown as {
+            anchorElement: HTMLAnchorElement;
+        };
+        (
+            item as unknown as { anchorElement: HTMLAnchorElement }
+        ).anchorElement.dispatchEvent(new FocusEvent('focus'));
+
+        await elementUpdated(item);
+        expect(item === document.activeElement).to.be.true;
+
+        // tests mouse click events, and by extension VoiceOver CRTL+Option+Space click
+        const rect = el.getBoundingClientRect();
+        await sendMouse({
+            steps: [
+                {
+                    position: [
+                        rect.left + rect.width / 2,
+                        rect.top + rect.height / 2,
+                    ],
+                    type: 'click',
+                },
+            ],
+        });
+
+        expect(clickTargetSpy.calledWith(anchorElement)).to.be.true;
+    });
     it('value attribute', async () => {
         const el = await fixture<MenuItem>(html`
             <sp-menu-item value="selected" selected>Selected Text</sp-menu-item>
@@ -193,7 +241,6 @@ describe('Menu item', () => {
 
         expect(el.hasSubmenu).to.be.false;
     });
-
     it('should not allow text-align to cascade when used inside an overlay', async () => {
         const element = await fixture<HTMLDivElement>(html`
             <div style="text-align: center">
 
@@ -29,15 +29,13 @@ describe('Menu [selects]', () => {
     let el!: Menu;
     let options!: MenuItem[];
     beforeEach(async () => {
-        el = await fixture<Menu>(
-            html`
-                <sp-menu selects="single">
-                    <sp-menu-item value="1">Option 1</sp-menu-item>
-                    <sp-menu-item value="2">Option 2</sp-menu-item>
-                    <sp-menu-item value="3">Option 3</sp-menu-item>
-                </sp-menu>
-            `
-        );
+        el = await fixture<Menu>(html`
+            <sp-menu selects="single">
+                <sp-menu-item value="1">Option 1</sp-menu-item>
+                <sp-menu-item value="2">Option 2</sp-menu-item>
+                <sp-menu-item value="3">Option 3</sp-menu-item>
+            </sp-menu>
+        `);
         options = [...el.querySelectorAll('sp-menu-item')] as MenuItem[];
         await Promise.all(options.map((option) => option.updateComplete));
         await nextFrame();
@@ -151,17 +149,15 @@ describe('Menu [selects] w/ group', () => {
     let el!: Menu;
     let options!: MenuItem[];
     beforeEach(async () => {
-        el = await fixture<Menu>(
-            html`
-                <sp-menu selects="single">
-                    <sp-menu-group selects="inherit">
-                        <sp-menu-item value="1">Option 1</sp-menu-item>
-                        <sp-menu-item value="2">Option 2</sp-menu-item>
-                        <sp-menu-item value="3">Option 3</sp-menu-item>
-                    </sp-menu-group>
-                </sp-menu>
-            `
-        );
+        el = await fixture<Menu>(html`
+            <sp-menu selects="single">
+                <sp-menu-group selects="inherit">
+                    <sp-menu-item value="1">Option 1</sp-menu-item>
+                    <sp-menu-item value="2">Option 2</sp-menu-item>
+                    <sp-menu-item value="3">Option 3</sp-menu-item>
+                </sp-menu-group>
+            </sp-menu>
+        `);
         options = [...el.querySelectorAll('sp-menu-item')] as MenuItem[];
         await Promise.all(options.map((option) => option.updateComplete));
         await nextFrame();
@@ -275,17 +271,15 @@ describe('Menu w/ group [selects]', () => {
     let group!: MenuGroup;
     let options!: MenuItem[];
     beforeEach(async () => {
-        el = await fixture<Menu>(
-            html`
-                <sp-menu>
-                    <sp-menu-group selects="single">
-                        <sp-menu-item value="1">Option 1</sp-menu-item>
-                        <sp-menu-item value="2">Option 2</sp-menu-item>
-                        <sp-menu-item value="3">Option 3</sp-menu-item>
-                    </sp-menu-group>
-                </sp-menu>
-            `
-        );
+        el = await fixture<Menu>(html`
+            <sp-menu>
+                <sp-menu-group selects="single">
+                    <sp-menu-item value="1">Option 1</sp-menu-item>
+                    <sp-menu-item value="2">Option 2</sp-menu-item>
+                    <sp-menu-item value="3">Option 3</sp-menu-item>
+                </sp-menu-group>
+            </sp-menu>
+        `);
         group = el.querySelector('sp-menu-group') as MenuGroup;
         options = [...el.querySelectorAll('sp-menu-item')] as MenuItem[];
         await Promise.all(options.map((option) => option.updateComplete));
@@ -403,22 +397,20 @@ describe('Menu w/ groups [selects]', () => {
     let groupB!: MenuGroup;
     let options!: MenuItem[];
     beforeEach(async () => {
-        el = await fixture<Menu>(
-            html`
-                <sp-menu>
-                    <sp-menu-group selects="single" id="group-1">
-                        <sp-menu-item value="1a">Option 1a</sp-menu-item>
-                        <sp-menu-item value="2a">Option 2a</sp-menu-item>
-                        <sp-menu-item value="3a">Option 3a</sp-menu-item>
-                    </sp-menu-group>
-                    <sp-menu-group selects="single" id="group-2">
-                        <sp-menu-item value="1b">Option 1b</sp-menu-item>
-                        <sp-menu-item value="2b">Option 2b</sp-menu-item>
-                        <sp-menu-item value="3b">Option 3b</sp-menu-item>
-                    </sp-menu-group>
-                </sp-menu>
-            `
-        );
+        el = await fixture<Menu>(html`
+            <sp-menu>
+                <sp-menu-group selects="single" id="group-1">
+                    <sp-menu-item value="1a">Option 1a</sp-menu-item>
+                    <sp-menu-item value="2a">Option 2a</sp-menu-item>
+                    <sp-menu-item value="3a">Option 3a</sp-menu-item>
+                </sp-menu-group>
+                <sp-menu-group selects="single" id="group-2">
+                    <sp-menu-item value="1b">Option 1b</sp-menu-item>
+                    <sp-menu-item value="2b">Option 2b</sp-menu-item>
+                    <sp-menu-item value="3b">Option 3b</sp-menu-item>
+                </sp-menu-group>
+            </sp-menu>
+        `);
         groupA = el.querySelector('sp-menu-group:first-child') as MenuGroup;
         groupB = el.querySelector('sp-menu-group:last-child') as MenuGroup;
         options = [...el.querySelectorAll('sp-menu-item')] as MenuItem[];
@@ -638,16 +630,17 @@ describe('Menu w/ groups [selects]', () => {
         input.focus();
         expect(document.activeElement === input).to.be.true;
         await sendKeys({ press: 'Shift+Tab' });
-        expect(document.activeElement === groupA).to.be.true;
+        expect(document.activeElement === options[0]).to.be.true;
         await sendKeys({ press: 'ArrowDown' });
+        expect(document.activeElement === options[1]).to.be.true;
         await sendKeys({ press: 'ArrowUp' });
 
         await elementUpdated(el);
         let optionCount = 0;
         for (const option of options) {
             const parentElement = option.parentElement as Menu;
-            expect(document.activeElement === parentElement, 'parent focused')
-                .to.be.true;
+            expect(document.activeElement === option, 'option focused').to.be
+                .true;
             expect(option.focused, `option ${optionCount} visually focused`).to
                 .be.true;
             await sendKeys({ press: 'Space' });
 
@@ -32,6 +32,7 @@ import '@spectrum-web-components/overlay/sp-overlay.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';
 import { TemplateResult } from 'lit-html';
 import { slottableRequest } from '@spectrum-web-components/overlay/src/slottable-request-directive.js';
+import { isWebKit } from '@spectrum-web-components/shared';
 
 type SelectsWithKeyboardTest = {
     dir: 'ltr' | 'rtl' | 'auto';
@@ -110,48 +111,70 @@ describe('Submenu', () => {
             this.el.parentElement.dir = testData.dir;
 
             await elementUpdated(this.el);
-            expect(this.rootItem.open).to.be.false;
+            expect(
+                this.rootItem.open,
+                `rootItem open before ${testData.openKey}`
+            ).to.be.false;
             const input = document.createElement('input');
             this.el.insertAdjacentElement('beforebegin', input);
-            input.focus();
-            await sendKeys({
-                press: 'Tab',
-            });
+            this.el.focus();
+
+            // by default, Safari doesn't tab to some elements
+            if (!isWebKit) {
+                await sendKeys({
+                    press: 'Shift+Tab',
+                });
+
+                expect(document.activeElement).to.equal(input);
+                await sendKeys({
+                    press: 'Tab',
+                });
+
+                expect(document.activeElement).to.equal(this.el);
+            }
             await sendKeys({
                 press: 'ArrowDown',
             });
             await elementUpdated(this.rootItem);
 
-            expect(this.rootItem.focused).to.be.true;
+            expect(
+                this.rootItem.focused,
+                `rootItem focused before ${testData.openKey}`
+            ).to.be.true;
 
             let opened = oneEvent(this.rootItem, 'sp-opened');
             await sendKeys({
                 press: testData.openKey,
             });
             await opened;
 
+            const rootItem = this.el.querySelector('.root') as MenuItem;
             let submenu = this.el.querySelector('[slot="submenu"]') as Menu;
             let submenuItem = this.el.querySelector(
-                '.submenu-item-2'
+                '.submenu-item-1'
             ) as MenuItem;
 
-            expect(this.rootItem.open).to.be.true;
             expect(
-                submenu === document.activeElement,
-                `${document.activeElement?.id}`
+                this.rootItem.open,
+                `rootItem open after ${testData.openKey}`
             ).to.be.true;
 
+            //opening a menu via keyboard should set focus on first item
+            expect(document.activeElement).to.equal(submenuItem);
+
             let closed = oneEvent(this.rootItem, 'sp-closed');
             await sendKeys({
                 press: testData.closeKey,
             });
             await closed;
 
-            expect(this.rootItem.open).to.be.false;
             expect(
-                this.el === document.activeElement,
-                `${document.activeElement?.id}`
-            ).to.be.true;
+                this.rootItem.open,
+                `rootItem open after ${testData.closeKey}`
+            ).to.be.false;
+
+            //closing a submenu via keyboard should set focus on its parent menuitem
+            expect(document.activeElement).to.equal(rootItem);
 
             opened = oneEvent(this.rootItem, 'sp-opened');
             await sendKeys({
@@ -160,19 +183,21 @@ describe('Submenu', () => {
             await opened;
 
             submenu = this.el.querySelector('[slot="submenu"]') as Menu;
-            submenuItem = this.el.querySelector('.submenu-item-2') as MenuItem;
 
             expect(this.rootItem.open).to.be.true;
+            expect(submenuItem.focused).to.be.true;
+            expect(document.activeElement).to.equal(submenuItem);
 
             await sendKeys({
                 press: 'ArrowDown',
             });
             await elementUpdated(submenu);
             await elementUpdated(submenuItem);
 
-            expect(submenu.getAttribute('aria-activedescendant')).to.equal(
-                submenuItem.id
-            );
+            submenuItem = this.el.querySelector('.submenu-item-2') as MenuItem;
+            expect(submenuItem.focused, `submenu focused`).to.be.true;
+            expect(document.activeElement === submenuItem, `submenu active`).to
+                .be.true;
 
             closed = oneEvent(this.rootItem, 'sp-closed');
             await sendKeys({
@@ -193,13 +218,20 @@ describe('Submenu', () => {
         it('returns visible focus when submenu closed', async function () {
             const input = document.createElement('input');
             this.el.insertAdjacentElement('beforebegin', input);
-            input.focus();
-            await sendKeys({
-                press: 'Tab',
-            });
-            await elementUpdated(this.el);
-            await nextFrame();
-            await nextFrame();
+            // by default, Safari doesn't tab to some elements
+            if (!isWebKit) {
+                await sendKeys({
+                    press: 'Shift+Tab',
+                });
+
+                expect(document.activeElement).to.equal(input);
+                await sendKeys({
+                    press: 'Tab',
+                });
+
+                expect(document.activeElement).to.equal(this.el);
+            }
+            this.el.focus();
             await sendKeys({
                 press: 'ArrowDown',
             });
@@ -212,6 +244,7 @@ describe('Submenu', () => {
                 `focused: ${document.activeElement?.localName}`
             ).to.be.true;
             expect(this.rootItem.open, 'not open').to.be.false;
+            expect(document.activeElement).to.equal(this.rootItem);
 
             const opened = oneEvent(this.rootItem, 'sp-opened');
             await sendKeys({
@@ -330,7 +363,6 @@ describe('Submenu', () => {
                 ],
             });
             await opened;
-
             expect(this.rootItem.open).to.be.true;
 
             const closed = oneEvent(this.rootItem, 'sp-closed');
@@ -552,7 +584,7 @@ describe('Submenu', () => {
             this.rootItem = this.el.querySelector('.root') as MenuItem;
             await elementUpdated(this.rootItem);
         });
-        describe.skip('selects', () => {
+        describe('selects', () => {
             selectWithPointer();
             selectsWithKeyboardData.map((testData) => {
                 selectsWithKeyboard(testData);
@@ -716,7 +748,7 @@ describe('Submenu', () => {
         expect(subSubmenuChanged.calledWith('C'), 'sub submenu changed').to.be
             .true;
     });
-    it('closes all decendent submenus when closing a ancestor menu', async () => {
+    it('closes all descendant submenus when closing a ancestor menu', async () => {
         const el = await fixture<ActionMenu>(html`
             <sp-action-menu label="Closing ancestors will close submenus">
                 <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
@@ -879,7 +911,7 @@ describe('Submenu', () => {
             });
             await closed;
         });
-        it('closes decendent menus when Menu Item in ancestor without a submenu is pointerentered', async function () {
+        it('closes descendant menus when Menu Item in ancestor without a submenu is pointerentered', async function () {
             const rootMenu = this.el.querySelector(
                 '#submenu-item-1'
             ) as MenuItem;
@@ -903,7 +935,7 @@ describe('Submenu', () => {
             );
             await closed;
         });
-        it('closes decendent menus when Menu Item in ancestor is clicked', async function () {
+        it('closes descendant menus when Menu Item in ancestor is clicked', async function () {
             const rootMenu1 = this.el.querySelector(
                 '#submenu-item-1'
             ) as MenuItem;
@@ -1135,9 +1167,15 @@ describe('Submenu', () => {
                 <sp-menu-item>
                     Parent Item
                     <div role="menu" slot="submenu">
-                        ${Array(20).fill(0).map((_, i) => html`
-                            <sp-menu-item>Submenu Item ${i + 1}</sp-menu-item>
-                        `)}
+                        ${Array(20)
+                            .fill(0)
+                            .map(
+                                (_, i) => html`
+                                    <sp-menu-item>
+                                        Submenu Item ${i + 1}
+                                    </sp-menu-item>
+                                `
+                            )}
                     </div>
                 </sp-menu-item>
             </sp-menu>
@@ -1146,7 +1184,9 @@ describe('Submenu', () => {
         await elementUpdated(el);
 
         const menuItem = el.querySelector('sp-menu-item') as MenuItem;
-        const submenu = menuItem.querySelector('[slot="submenu"]') as HTMLElement;
+        const submenu = menuItem.querySelector(
+            '[slot="submenu"]'
+        ) as HTMLElement;
 
         // Open the submenu
         const opened = oneEvent(menuItem, 'sp-opened');
 
@@ -473,6 +473,7 @@ class ComplexModalReady extends HTMLElement {
     handlePickerOpen = async (): Promise<void> => {
         const picker = document.querySelector('#test-picker') as Picker;
         const actions = [nextFrame, picker.updateComplete];
+        picker.focus();
 
         await Promise.all(actions);
 
 
@@ -137,7 +137,10 @@ export class InteractionController implements ReactiveController {
                 this.host.isMobile.matches && !this.host.forcePopover
                     ? undefined
                     : this.host.placement;
-            this.overlay.receivesFocus = 'true';
+            // We should not be applying open is set programmatically via the picker's open.property.
+            // Focus should only be applied if a user action causes the menu to open. Otherwise,
+            // we could be pulling focus from a user when an picker with an open menu loads.
+            this.overlay.receivesFocus = 'false';
             this.overlay.willPreventClose =
                 this.preventNextToggle !== 'no' && this.open;
             this.overlay.addEventListener(
@@ -158,6 +161,7 @@ export class InteractionController implements ReactiveController {
         ) {
             this.preventNextToggle = 'yes';
         }
+        if (this.preventNextToggle === 'no') this.host.close();
     }
 
     public handleActivate(_event: Event): void {}
@@ -172,6 +176,11 @@ export class InteractionController implements ReactiveController {
 
     hostConnected(): void {
         this.init();
+        this.host.addEventListener('sp-closed', ()=> {
+            if(!this.open && this.host.optionsMenu.matches(':focus-within') && !this.host.button.matches(':focus')) {
+                this.host.button.focus();
+            }
+        });
     }
 
     hostDisconnected(): void {
 
@@ -20,8 +20,12 @@ export class MobileController extends InteractionController {
     override type = InteractionTypes.mobile;
 
     handleClick(): void {
+        if (this.host.disabled) {
+            return;
+        }
         if (this.preventNextToggle == 'no') {
-            this.open = !this.open;
+
+            this.host.toggle();
         }
         this.preventNextToggle = 'no';
     }
 
@@ -15,7 +15,14 @@ import '@spectrum-web-components/menu/sp-menu-item.js';
 import '@spectrum-web-components/menu/sp-menu-divider.js';
 import { Picker } from '@spectrum-web-components/picker';
 import { MenuItem } from '@spectrum-web-components/menu';
-import { expect, fixture, html, nextFrame, oneEvent } from '@open-wc/testing';
+import {
+    elementUpdated,
+    expect,
+    fixture,
+    html,
+    nextFrame,
+    oneEvent,
+} from '@open-wc/testing';
 
 import '@spectrum-web-components/theme/sp-theme.js';
 import '@spectrum-web-components/theme/src/themes.js';
@@ -79,6 +86,7 @@ describe('Reparented Picker', () => {
         const { picker, before, after } = await fixtureElements();
 
         expect(picker.value).to.equal('');
+        picker.id = 'nikki';
 
         const item2 = picker.querySelector('[value="2"]') as MenuItem;
         const item3 = picker.querySelector('[value="3"]') as MenuItem;
@@ -110,11 +118,12 @@ describe('Reparented Picker', () => {
         opened = oneEvent(picker, 'sp-opened');
         picker.click();
         await opened;
+        await nextFrame();
         expect(picker.open).to.be.true;
         expect(picker.value).to.equal('3');
-        closed = oneEvent(picker, 'sp-closed');
+        opened = oneEvent(picker, 'sp-opened');
         before.append(picker);
-        await closed;
+        await elementUpdated(picker);
 
         expect(
             (picker as unknown as TestablePicker).optionsMenu.value
 
@@ -353,48 +353,6 @@ describe('Tabs', () => {
         await elementUpdated(el);
         expect(el.selected).to.be.equal('first');
     });
-    it('prevents [tabindex=0] while `focusin`', async () => {
-        const el = await fixture<Tabs>(html`
-            <sp-tabs>
-                <sp-tab label="Tab 1" value="first" selected>
-                    <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
-                </sp-tab>
-                <sp-tab label="Tab 2" value="second">
-                    <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
-                </sp-tab>
-            </sp-tabs>
-        `);
-
-        const selected = el.querySelector('[value="first"]') as Tab;
-        const toBeSelected = el.querySelector('[value="second"]') as Tab;
-
-        await elementUpdated(el);
-        await waitUntil(() => el.selected === 'first', 'wait for selection');
-
-        expect(el.selected).to.equal('first');
-        expect(selected.tabIndex).to.equal(0);
-
-        toBeSelected.dispatchEvent(new Event('focusin', { bubbles: true }));
-
-        await elementUpdated(el);
-
-        expect(el.selected).to.equal('first');
-        expect(selected.tabIndex).to.equal(-1);
-
-        toBeSelected.dispatchEvent(new Event('focusout', { bubbles: true }));
-
-        await elementUpdated(el);
-
-        expect(el.selected).to.equal('first');
-        expect(selected.tabIndex).to.equal(0);
-
-        toBeSelected.click();
-
-        await elementUpdated(el);
-
-        expect(el.selected).to.equal('second');
-        expect(toBeSelected.tabIndex).to.equal(0);
-    });
     it('accepts keyboard based selection', async () => {
         const el = await fixture<Tabs>(html`
             <sp-tabs selected="Unknown">
 
@@ -13,6 +13,7 @@ import type { ReactiveController, ReactiveElement } from 'lit';
 
 type DirectionTypes = 'horizontal' | 'vertical' | 'both' | 'grid';
 export type FocusGroupConfig<T> = {
+    hostDelegatesFocus?: boolean;
     focusInIndex?: (_elements: T[]) => number;
     direction?: DirectionTypes | (() => DirectionTypes);
     elementEnterAction?: (el: T) => void;
@@ -63,6 +64,8 @@ export class FocusGroupController<T extends HTMLElement>
 
     public directionLength = 5;
 
+    public hostDelegatesFocus = false;
+
     elementEnterAction = (_el: T): void => {
         return;
     };
@@ -120,6 +123,7 @@ export class FocusGroupController<T extends HTMLElement>
     constructor(
         host: ReactiveElement,
         {
+            hostDelegatesFocus,
             direction,
             elementEnterAction,
             elements,
@@ -131,6 +135,7 @@ export class FocusGroupController<T extends HTMLElement>
         this.mutationObserver = new MutationObserver(() => {
             this.handleItemMutation();
         });
+        this.hostDelegatesFocus = hostDelegatesFocus || false;
         this.host = host;
         this.host.addController(this);
         this._elements = elements;
@@ -180,18 +185,60 @@ export class FocusGroupController<T extends HTMLElement>
         this.manage();
     }
 
-    focus(options?: FocusOptions): void {
+    /**
+     * resets the focusedItem to initial item
+     */
+    reset(): void {
         const elements = this.elements;
         if (!elements.length) return;
+        this.setCurrentIndexCircularly(this.focusInIndex - this.currentIndex);
         let focusElement = elements[this.currentIndex];
+        if (this.currentIndex < 0) {
+            return;
+        }
         if (!focusElement || !this.isFocusableElement(focusElement)) {
             this.setCurrentIndexCircularly(1);
             focusElement = elements[this.currentIndex];
         }
         if (focusElement && this.isFocusableElement(focusElement)) {
             elements[this.prevIndex]?.setAttribute('tabindex', '-1');
+            focusElement.setAttribute('tabindex', '0');
+        }
+    }
+
+    focusOnItem(item?: T, options?: FocusOptions): void {
+        if (
+            item &&
+            this.isFocusableElement(item) &&
+            this.elements.indexOf(item)
+        ) {
+            const diff = this.elements.indexOf(item) - this.currentIndex;
+            this.setCurrentIndexCircularly(diff);
+            this.elements[this.prevIndex]?.setAttribute('tabindex', '-1');
+        }
+        this.focus(options);
+    }
+
+    focus(options?: FocusOptions): void {
+        const elements = this.elements;
+        if (!elements.length) return;
+        let focusElement = elements[this.currentIndex];
+        if (!focusElement || !this.isFocusableElement(focusElement)) {
+            this.setCurrentIndexCircularly(1);
+            focusElement = elements[this.currentIndex];
+        }
+        if (focusElement && this.isFocusableElement(focusElement)) {
+            if (
+                !this.hostDelegatesFocus ||
+                elements[this.prevIndex] !== focusElement
+            ) {
+                elements[this.prevIndex]?.setAttribute('tabindex', '-1');
+            }
             focusElement.tabIndex = 0;
             focusElement.focus(options);
+            if (this.hostDelegatesFocus && !this.focused) {
+                this.hostContainsFocus();
+            }
         }
     }
 
@@ -298,28 +345,28 @@ export class FocusGroupController<T extends HTMLElement>
         }
     };
 
-    acceptsEventCode(code: string): boolean {
-        if (code === 'End' || code === 'Home') {
+    acceptsEventKey(key: string): boolean {
+        if (key === 'End' || key === 'Home') {
             return true;
         }
         switch (this.direction) {
             case 'horizontal':
-                return code === 'ArrowLeft' || code === 'ArrowRight';
+                return key === 'ArrowLeft' || key === 'ArrowRight';
             case 'vertical':
-                return code === 'ArrowUp' || code === 'ArrowDown';
+                return key === 'ArrowUp' || key === 'ArrowDown';
             case 'both':
             case 'grid':
-                return code.startsWith('Arrow');
+                return key.startsWith('Arrow');
         }
     }
 
     handleKeydown = (event: KeyboardEvent): void => {
-        if (!this.acceptsEventCode(event.code) || event.defaultPrevented) {
+        if (!this.acceptsEventKey(event.key) || event.defaultPrevented) {
             return;
         }
         let diff = 0;
         this.prevIndex = this.currentIndex;
-        switch (event.code) {
+        switch (event.key) {
             case 'ArrowRight':
                 diff += 1;
                 break;
 
@@ -45,7 +45,7 @@ export class RovingTabindexController<
     }
 
     manageTabindexes(): void {
-        if (this.focused) {
+        if (this.focused && !this.hostDelegatesFocus) {
             this.updateTabindexes(() => ({ tabIndex: -1 }));
         } else {
             this.updateTabindexes((el: HTMLElement): UpdateTabIndexes => {
@@ -72,7 +72,6 @@ export class RovingTabindexController<
                 }
                 return;
             }
-            el.removeAttribute('tabindex');
             const updatable = el as unknown as {
                 requestUpdate?: () => void;
             };
 
@@ -272,35 +272,27 @@ describe('tabIndex is cached properly', () => {
             </sp-action-menu>
         `);
 
-        expect(menuEl.tabIndex).to.equal(0);
-        expect(menuEl.focusElement?.tabIndex).to.equal(0);
-
-        menuEl.tabIndex = 1;
-
-        await elementUpdated(menuEl);
-
-        expect(menuEl.tabIndex).to.equal(1);
-        expect(menuEl.focusElement?.tabIndex).to.equal(1);
+        expect(
+            menuEl.focusElement?.tabIndex,
+            'button tabindex before disabling'
+        ).to.equal(0);
 
         menuEl.disabled = true;
 
         await elementUpdated(menuEl);
 
-        expect(menuEl.tabIndex).to.equal(-1);
-        expect(menuEl.focusElement?.tabIndex).to.equal(-1);
-
-        menuEl.tabIndex = 2;
-
-        await elementUpdated(menuEl);
-
-        expect(menuEl.tabIndex).to.equal(-1);
-        expect(menuEl.focusElement?.tabIndex).to.equal(-1);
+        expect(
+            menuEl.focusElement?.tabIndex,
+            'button tabindex after disabling'
+        ).to.equal(-1);
 
         menuEl.disabled = false;
 
         await elementUpdated(menuEl);
 
-        expect(menuEl.tabIndex).to.equal(2);
-        expect(menuEl.focusElement?.tabIndex).to.equal(2);
+        expect(
+            menuEl.focusElement?.tabIndex,
+            'button tabindex after setting to 0'
+        ).to.equal(0);
     });
 });
Original file line number	Diff line number	Diff line change
`@@ -20,8 +20,12 @@ export class MobileController extends InteractionController {`
`20`	`20`	`override type = InteractionTypes.mobile;`
`21`	`21`
`22`	`22`	`handleClick(): void {`
	`23`	`+ if (this.host.disabled) {`
	`24`	`+ return;`
	`25`	`+ }`
`23`	`26`	`if (this.preventNextToggle == 'no') {`
`24`		`- this.open = !this.open;`
	`27`	`+`
	`28`	`+ this.host.toggle();`
`25`	`29`	`}`
`26`	`30`	`this.preventNextToggle = 'no';`
`27`	`31`	`}`
Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ export class RovingTabindexController<`
`45`	`45`	`}`
`46`	`46`
`47`	`47`	`manageTabindexes(): void {`
`48`		`- if (this.focused) {`
	`48`	`+ if (this.focused && !this.hostDelegatesFocus) {`
`49`	`49`	`this.updateTabindexes(() => ({ tabIndex: -1 }));`
`50`	`50`	`} else {`
`51`	`51`	`this.updateTabindexes((el: HTMLElement): UpdateTabIndexes => {`
`@@ -72,7 +72,6 @@ export class RovingTabindexController<`
`72`	`72`	`}`
`73`	`73`	`return;`
`74`	`74`	`}`
`75`		`- el.removeAttribute('tabindex');`
`76`	`75`	`const updatable = el as unknown as {`
`77`	`76`	`requestUpdate?: () => void;`
`78`	`77`	`};`