[Fix] Allow focus on items wrapped in disabled tooltips (#7604)

Author: mm-wang

packages/core/src/components/menu/menuItem.tsx

@@ -248,15 +248,17 @@ export const MenuItem: React.FC<MenuItemProps> = forwardRef<HTMLLIElement, MenuI
             </span>
         );
 
+    const htmlPropsOnly = removeNonHTMLProps(htmlProps);
+
     const target = createElement(
         tagName,
         {
             // for menuitems, onClick when enter key pressed doesn't take effect like it does for a button-- fix this
             onKeyDown: clickElementOnKeyPress(["Enter", " "]),
+            ...htmlPropsOnly,
             // if hasSubmenu, must apply correct role and tabIndex to the outer popover target <span> instead of this target element
             role: hasSubmenu ? "none" : targetRole,
-            tabIndex: hasSubmenu ? -1 : 0,
-            ...removeNonHTMLProps(htmlProps),
+            tabIndex: hasSubmenu ? -1 : htmlPropsOnly.tabIndex != null ? htmlPropsOnly.tabIndex : 0,
             ...(disabled ? DISABLED_PROPS : {}),
             className: anchorClasses,
         },

packages/core/test/menu/menuItemTests.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { render } from "@testing-library/react";
 import { assert } from "chai";
 import { mount, type ReactWrapper, shallow, type ShallowWrapper } from "enzyme";
 import { spy } from "sinon";
@@ -197,6 +198,65 @@ describe("MenuItem", () => {
         assert.match(label.text(), /^label text/);
         assert.strictEqual(label.find("article").text(), "label element");
     });
+
+    describe("tabIndex behavior", () => {
+        it("MenuItem without submenu has tabIndex={0} when enabled", () => {
+            const { container } = render(<MenuItem text="Item" />);
+            const anchor = container.querySelector("a");
+            assert.strictEqual(anchor?.getAttribute("tabindex"), "0");
+        });
+
+        it("MenuItem without submenu has tabIndex={-1} when disabled", () => {
+            const { container } = render(<MenuItem text="Item" disabled={true} />);
+            const anchor = container.querySelector("a");
+            assert.strictEqual(anchor?.getAttribute("tabindex"), "-1");
+        });
+
+        it("MenuItem with submenu has focusable Popover target when enabled", () => {
+            const { container } = render(
+                <MenuItem text="Parent">
+                    <MenuItem text="Child" />
+                </MenuItem>,
+            );
+            // The Popover target wrapper should be focusable
+            const popoverTarget = container.querySelector(`.${Classes.POPOVER_TARGET}`);
+            assert.strictEqual(popoverTarget?.getAttribute("tabindex"), "0");
+        });
+
+        it("MenuItem with submenu has tabIndex={-1} on inner anchor element", () => {
+            const { getByText } = render(
+                <MenuItem text="Parent">
+                    <MenuItem text="Child" />
+                </MenuItem>,
+            );
+            // The inner anchor should NOT be focusable when there's a submenu
+            const textElement = getByText("Parent");
+            const anchor = textElement.closest("a");
+            assert.strictEqual(anchor?.getAttribute("tabindex"), "-1");
+        });
+
+        it("MenuItem with disabled submenu is not focusable", () => {
+            const { container, getByText } = render(
+                <MenuItem text="Parent" disabled={true}>
+                    <MenuItem text="Child" />
+                </MenuItem>,
+            );
+            const parentElement = getByText("Parent");
+            const parentAnchor = parentElement.closest("a");
+            assert.strictEqual(parentAnchor?.getAttribute("tabindex"), "-1");
+
+            // When disabled, the Popover target should not be in the tab order
+            const popoverTarget = container.querySelector(`.${Classes.POPOVER_TARGET}`);
+            // The target exists but disabled state is handled by the Popover component
+            assert.isNotNull(popoverTarget);
+        });
+
+        it("MenuItem without submenu preserves custom tabIndex", () => {
+            const { container } = render(<MenuItem text="Item" tabIndex={3} />);
+            const anchor = container.querySelector("a");
+            assert.strictEqual(anchor?.getAttribute("tabindex"), "3");
+        });
+    });
 });
 
 function findSubmenu(wrapper: ShallowWrapper<any, any>) {