feat: S2 unavailable menu item by LFDanLu · Pull Request #9657 · adobe/react-spectrum

LFDanLu · 2026-02-13T21:03:28Z

Closes

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Test both the S2 and RAC implementations in both storybook and docs.

🧢 Your Project:

RSP

rspbot · 2026-02-13T21:16:20Z

Build successful! 🎉

rspbot · 2026-02-17T23:23:48Z

Build successful! 🎉

LFDanLu · 2026-02-17T23:30:32Z

packages/dev/s2-docs/pages/react-aria/Menu.mdx


+### Unavailable menu items
+
+Wrap a `<MenuItem>` and a `<Popover>` with a `<UnavailableMenuItemTrigger>` and apply `isUnavailable` to disable the item's default action and show an informational popover instead.


I opted to have put the Popover directly into the example rather than create a UnavailableMenuItemTrigger wrapper in the starters since I felt it might be confusing to have Popover mentioned here but not show up in the example. Open to opinions though, not too bothered if we wanna go the same route as SubmenuTrigger and wrap the Popover in the starters

packages/@react-spectrum/s2/src/Menu.tsx

LFDanLu · 2026-02-17T23:33:11Z

packages/@react-spectrum/s2/src/Menu.tsx

+// TODO: consider if we should instead pull the RAC defined trigger here into S2. Feels useful for RAC users though, but
+// maybe shouldn't be specific to unavailable. It is very similar to SubmenuTrigger but it renders a dialog type behavior (see useSubmenuTrigger)
+// and has the concept of isUnavailable which will make the item render normally when false
+function UnavailableMenuItemTrigger(props: UnavailableMenuItemTriggerProps): JSX.Element {


UnavailableMenuItemTrigger seems a bit specific in RAC honestly, open to opinions if there should be a more generic naming/component

rspbot · 2026-02-17T23:43:38Z

Build successful! 🎉

… item description

LFDanLu · 2026-02-19T20:02:45Z

packages/@react-aria/menu/src/useMenuItem.ts

+  // TODO: this is quite specific, but description and keyboardShortcut above are also very specific
+  /** Props for the descriptive element in the end slot inside the menu item (e.g. info icon, chevron). */
+  endSlotProps: DOMAttributes,
+


I'm quite iffy about this, as stated above it is very specific. I think ideally we'd give the user a way to make arbitrary child elements in a MenuItem part of that MenuItem's aria-describedby. I could've opted to just allow the user to provide a generic aria-describedBy to the menu item and then apply ids to various other elements but we already have description and keyboard shortcut handled so figured we may be able to make end slot a thing too

Also note that due to how collection items work in RAC (aka UnavailableMenuItemTrigger in RAC is a collection branch that only renders the popover child as is), I believe that RAC level change is unavoidable since there isn't a good way to generate a id at the S2 UnavailableMenuItemTrigger level and propagate it down via context

What about allowing 'aria-describedby' as a prop and merging that with the ones we generate? Then this could be generated by S2 MenuItem and passed in. The only question would be in what order do we do the merge?

I can go this route instead, just felt potentially confusing to the end user that they'd be expected to pass aria-describedby for some things but that we'd handle doing this for such specific things like keyboard shortcut icon and description.

I think we'd should merge the user's provided value first. Is the concern here the announcement order or more so what would happen if the user provided their own ids to the keyboard icon/description and then used those in their aria-described?

rspbot · 2026-02-19T20:07:16Z

Build successful! 🎉

rspbot · 2026-02-20T01:00:41Z

Build successful! 🎉

reidbarber

LGTM

packages/react-aria-components/src/Menu.tsx

…lable_menu_item

rspbot · 2026-02-20T18:13:45Z

Build successful! 🎉

rspbot · 2026-02-23T22:41:56Z

Build successful! 🎉

rspbot · 2026-02-23T22:41:58Z

## API Changes

react-aria-components

/react-aria-components:MenuItemRenderProps

 MenuItemRenderProps {
   allowsDragging?: boolean
   hasSubmenu: boolean
   isDisabled: boolean
   isDragging?: boolean
   isDropTarget?: boolean
   isFocusVisible: boolean
   isFocused: boolean
   isHovered: boolean
   isOpen: boolean
   isPressed: boolean
   isSelected: boolean
+  isUnavailable?: boolean
   selectionBehavior: SelectionBehavior
   selectionMode: SelectionMode
 }

/react-aria-components:UnavailableMenuItemTrigger

+UnavailableMenuItemTrigger {
+  children: Array<ReactElement>
+  isUnavailable?: boolean = false
+}

/react-aria-components:EndSlotContext

+EndSlotContext {
+  UNTYPED
+}

/react-aria-components:UnavailableMenuItemTriggerProps

+UnavailableMenuItemTriggerProps {
+  children: Array<ReactElement>
+  isUnavailable?: boolean = false
+}

@react-aria/menu

/@react-aria/menu:MenuItemAria

 MenuItemAria {
   descriptionProps: DOMAttributes
+  endSlotProps: DOMAttributes
   isDisabled: boolean
   isFocusVisible: boolean
   isFocused: boolean
   isPressed: boolean
   keyboardShortcutProps: DOMAttributes
   labelProps: DOMAttributes
   menuItemProps: DOMAttributes
 }

@react-spectrum/s2

/@react-spectrum/s2:UnavailableMenuItemTrigger

+UnavailableMenuItemTrigger {
+  children: Array<ReactElement>
+  isUnavailable?: boolean = false
+}

/@react-spectrum/s2:UnavailableMenuItemTriggerProps

+UnavailableMenuItemTriggerProps {
+  children: Array<ReactElement>
+  isUnavailable?: boolean = false
+}

devongovett · 2026-02-24T19:31:29Z

packages/react-aria-components/src/Menu.tsx

+ *
+ * @version alpha
+ */
+export const UnavailableMenuItemTrigger = /*#__PURE__*/ createBranchComponent(UnavailableMenuItemTriggerNode, (props: UnavailableMenuItemTriggerProps, ref: ForwardedRef<HTMLDivElement>, item) => {


What are the differences between this and SubmenuTrigger? All of our popovers are dialogs now (even submenus) so it seems like we could use SubmenuTrigger for this already? Unavailable seems like a very spectrum concept to me.

The differentiating factor is the behavior differences that come into play when providing type: 'dialog' to the useSubmenuTrigger hook:

react-spectrum/packages/@react-aria/menu/src/useSubmenuTrigger.ts

Lines 145 to 149 in 50e009e

...(type === 'menu' && {

onClose: state.closeAll,

autoFocus: state.focusStrategy ?? undefined,

onKeyDown: submenuKeyDown

})

With submenus, hitting escape will close ALL levels of the menu tree, ArrowLeft will close the submenu, and we may autofocus the first item in the submenu.

I definitely agree with Unavailable being a spectrum concept though, as mentioned here https://github.com/adobe/react-spectrum/pull/9657/changes#r2849513111, happy to make this SubDialogTrigger instead perhaps

devongovett · 2026-02-24T19:34:28Z

packages/react-aria-components/src/Menu.tsx

+const MenuItemContext = createContext<ContextValue<MenuItemContextProps, HTMLDivElement>>(null);
+
+/** Context for the descriptive element in the end slot of the menu item (e.g. info icon). Propagates the appropriate labelling props to associate the element with the parent menu item. */
+export const EndSlotContext = createContext<ContextValue<{id?: string}, HTMLElement>>(null);


I don't see where this is consumed?

consumed by S2 MenuItem:

react-spectrum/packages/@react-spectrum/s2/src/Menu.tsx

Lines 490 to 495 in b58662f

let endSlotProps = useSlottedContext(EndSlotContext);

let {direction, size} = props;

let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');

return (

<div slot="descriptor" className={mergeStyles(descriptor, style({marginBottom: fontRelative(-1)}))} id={endSlotProps?.id}>

devongovett · 2026-02-24T19:38:31Z

packages/dev/codemods/src/s1-to-s2/src/codemods/components/ContextualHelpTrigger/transform.ts

+
+/**
+ * Transforms ContextualHelpTrigger:
+ * - Rename ContextualHelpTrigger to UnavailableMenuItemTrigger.


I assume you discussed renaming this somewhere? Is it not specific to ContextualHelp anymore? I think the original idea was that it was also not specific to unavailable and people might use it to provide other kinds of help info but not sure we ever supported that?

Nope, didn't really discuss this anywhere, but a personal feeling that ContextualHelp (arbitrarily attached to any element) and ContextualHelpTrigger (menu) were too similarly named thus was confusing.

As for making it not specific to unavailable, I wasn't aware that was the direction we wanted to go as a team, but I had the same thought here. Happy to change this to be SubDialogTrigger or something along those line if so

some additional thoughts: if it wasn't specific to unavailable (and were more just informational), would that imply that the wrapped menu item should still be actionable? If so, I guess we'll need to add another prop so the user can decide whether or not the menu level onAction makes it to the item at the RAC level. At the S2 level, it would also need to differentiate between the isUnavailable=true case, the isUnavailable=false case, and the "is rendering a informational subdialog case"

devongovett · 2026-02-24T19:44:26Z

packages/@react-aria/menu/src/useMenuItem.ts

+  // TODO: this is quite specific, but description and keyboardShortcut above are also very specific
+  /** Props for the descriptive element in the end slot inside the menu item (e.g. info icon, chevron). */
+  endSlotProps: DOMAttributes,
+


What about allowing 'aria-describedby' as a prop and merging that with the ones we generate? Then this could be generated by S2 MenuItem and passed in. The only question would be in what order do we do the merge?

LFDanLu added 4 commits February 12, 2026 16:56

add unavailable menu item to RAC and S2

7d8cb6f

add translations

60eacd3

add tests and stories

4f1062b

dont propagate submenutrigger props if non unavailable

6f63c72

github-actions bot added needs translations RAC S2 labels Feb 13, 2026

fix test

8d51d50

add docs for unavailable menu item

ba3bbbb

LFDanLu commented Feb 17, 2026

View reviewed changes

packages/@react-spectrum/s2/src/Menu.tsx Outdated Show resolved Hide resolved

LFDanLu commented Feb 17, 2026

View reviewed changes

LFDanLu changed the title ~~feat: (WIP) S2 unavailable menu item~~ feat: S2 unavailable menu item Feb 17, 2026

fix docs lint

84f4ac7

LFDanLu marked this pull request as ready for review February 18, 2026 18:49

LFDanLu added ready for review and removed needs translations labels Feb 19, 2026

LFDanLu added 2 commits February 19, 2026 10:40

fix styling and copy

83b14b3

add endSlotProps so we can associate arbitrary elements with the menu…

a205895

… item description

github-actions bot added the needs translations label Feb 19, 2026

LFDanLu commented Feb 19, 2026

View reviewed changes

shift icon down 1px

92f67d9

reidbarber previously approved these changes Feb 20, 2026

View reviewed changes

packages/react-aria-components/src/Menu.tsx Outdated Show resolved Hide resolved

LFDanLu added 2 commits February 20, 2026 09:56

Merge branch 'main' of github.com:adobe/react-spectrum into s2_unavai…

b9cfd3e

…lable_menu_item

adding alpha badge to RAC unavailable menu

bf8d6f6

LFDanLu dismissed reidbarber’s stale review via bf8d6f6 February 20, 2026 18:05

LFDanLu added 4 commits February 23, 2026 14:15

adding code mod

633665a

fix lint and update todo copy

d22fa34

Merge branch 'main' into s2_unavailable_menu_item

eadeca5

period

b58662f

reidbarber previously approved these changes Feb 23, 2026

View reviewed changes

LFDanLu added release and removed needs translations labels Feb 24, 2026

devongovett reviewed Feb 24, 2026

View reviewed changes

LFDanLu added 3 commits February 24, 2026 14:36

change to use aria-describedby via props

1e7e087

pull out ContextualHelpPopover and reuse submenuTrigger

37445bf

update S2 menu tests, code mod, docs

777f1a6

LFDanLu dismissed reidbarber’s stale review via 777f1a6 February 25, 2026 20:35

github-actions bot added the needs translations label Feb 25, 2026

LFDanLu added 2 commits February 26, 2026 10:17

fix styling and slot of contextual help

5b1cc3a

update examples, not sure why docs wont run

8a1fa18


		### Unavailable menu items

		Wrap a `<MenuItem>` and a `<Popover>` with a `<UnavailableMenuItemTrigger>` and apply `isUnavailable` to disable the item's default action and show an informational popover instead.

	...(type === 'menu' && {
	onClose: state.closeAll,
	autoFocus: state.focusStrategy ?? undefined,
	onKeyDown: submenuKeyDown
	})

	let endSlotProps = useSlottedContext(EndSlotContext);
	let {direction, size} = props;
	let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');

	return (
	<div slot="descriptor" className={mergeStyles(descriptor, style({marginBottom: fontRelative(-1)}))} id={endSlotProps?.id}>

Conversation

LFDanLu commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Feb 13, 2026

Uh oh!

rspbot commented Feb 17, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Feb 17, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LFDanLu Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Feb 19, 2026

Uh oh!

rspbot commented Feb 20, 2026

Uh oh!

reidbarber left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rspbot commented Feb 20, 2026

Uh oh!

rspbot commented Feb 23, 2026

Uh oh!

rspbot commented Feb 23, 2026

react-aria-components

/react-aria-components:MenuItemRenderProps

/react-aria-components:UnavailableMenuItemTrigger

/react-aria-components:EndSlotContext

/react-aria-components:UnavailableMenuItemTriggerProps

@react-aria/menu

/@react-aria/menu:MenuItemAria

@react-spectrum/s2

/@react-spectrum/s2:UnavailableMenuItemTrigger

/@react-spectrum/s2:UnavailableMenuItemTriggerProps

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LFDanLu Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

LFDanLu commented Feb 13, 2026 •

edited

Loading

LFDanLu Feb 24, 2026 •

edited

Loading

LFDanLu Feb 24, 2026 •

edited

Loading