fix(Menu): show checkboxes for selected items with ContextualHelpTrigger isUnavailable={false} (#8921)

* fix selection state in Menu items with ContextualHelpTrigger and isUnavailable={false}

* cleanup test

Author: reidbarber

packages/@react-spectrum/menu/src/MenuItem.tsx

@@ -64,7 +64,11 @@ export function MenuItem<T>(props: MenuItemProps<T>): JSX.Element {
   }
 
   let isDisabled = state.disabledKeys.has(key);
-  let isSelectable = !isSubmenuTrigger && state.selectionManager.selectionMode !== 'none';
+  let isContextualHelpTrigger = isSubmenuTrigger && isUnavailable !== undefined;
+  let isSelectable = (
+    (isContextualHelpTrigger ? !isUnavailable : !isSubmenuTrigger) &&
+    state.selectionManager.selectionMode !== 'none'
+  );
   let isSelected = isSelectable && state.selectionManager.isSelected(key);
   let itemref = useRef<any>(null);
   let ref = useObjectRef(useMemo(() => mergeRefs(itemref, triggerRef), [itemref, triggerRef]));

packages/@react-spectrum/menu/stories/MenuTrigger.stories.tsx

@@ -786,6 +786,41 @@ export let MenuItemUnavailable: StoryObj<typeof Menu> = {
   )
 };
 
+export let MenuItemUnavailableWithSelection: StoryObj<typeof Menu> = {
+  render: () => render(
+    <Menu selectionMode="multiple">
+      <Item key="1">One</Item>
+      <ContextualHelpTrigger isUnavailable>
+        <Item key="foo">Two</Item>
+        <Dialog>
+          <Heading>hello</Heading>
+          <Content>Is it me you're looking for?</Content>
+        </Dialog>
+      </ContextualHelpTrigger>
+      <ContextualHelpTrigger isUnavailable={false}>
+        <Item key="baz">Two point five</Item>
+        <Dialog>
+          <Heading>hello</Heading>
+          <Content>Is it me you're looking for?</Content>
+        </Dialog>
+      </ContextualHelpTrigger>
+      <Item key="3">Three</Item>
+      <ContextualHelpTrigger isUnavailable={false}>
+        <Item key="bar" textValue="Four">
+          <Text>Four</Text>
+          <Text slot={'description'}>Shut the door</Text>
+        </Item>
+        <Dialog>
+          <Heading>hello</Heading>
+          <Content>Is it me you're looking for?</Content>
+          <Footer><Link>Learn more</Link></Footer>
+        </Dialog>
+      </ContextualHelpTrigger>
+      <Item key="5">Five</Item>
+    </Menu>
+  )
+};
+
 export let MenuItemUnavailableDynamic: StoryObj<typeof Menu> = {
   render: () => render(
     <Menu items={flatMenu} onAction={action('onAction')}>

packages/@react-spectrum/menu/test/MenuTrigger.test.js

@@ -617,6 +617,42 @@ describe('MenuTrigger', function () {
         expect(tree.queryByRole('dialog')).toBeNull();
       });
 
+      it('shows selection state for available ContextualHelpTrigger items', async function () {
+        render(
+          <Provider theme={theme}>
+            <MenuTrigger defaultOpen>
+              <ActionButton>Menu</ActionButton>
+              <Menu selectionMode="single">
+                <Item key="1">One</Item>
+                <ContextualHelpTrigger>
+                  <Item key="foo" textValue="Hello">
+                    <Text>Hello</Text>
+                    <Text slot="description">Is it me you're looking for?</Text>
+                  </Item>
+                  <Dialog>
+                    <Heading>Lionel Richie says:</Heading>
+                    <Content>I can see it in your eyes</Content>
+                  </Dialog>
+                </ContextualHelpTrigger>
+              </Menu>
+            </MenuTrigger>
+          </Provider>
+        );
+
+        act(() => {jest.runAllTimers();});
+
+        let menu = screen.getByRole('menu');
+        let availableItem = within(menu).getByRole('menuitemradio', {name: 'Hello'});
+
+        expect(availableItem).toBeVisible();
+        expect(availableItem).toHaveAttribute('aria-checked', 'false');
+        fireEvent.click(availableItem);
+        act(() => {jest.runAllTimers();});
+
+        expect(availableItem).toHaveAttribute('aria-checked', 'true');
+        expect(availableItem).not.toHaveAttribute('aria-haspopup', 'dialog');
+      });
+
       it('can open a sub dialog with keyboard', async function () {
         renderTree();
         let menu = await openMenu();