How can we properly communicate to the user the reason why certain menu or selectbox elements are inactive?

[smashercosmo]

Our application contains many menu components and select boxes in which some items are inactive for various reasons. In a single menu or select box, there may be multiple disabled items, each with its own specific reason. What is the best way to communicate this information to users? I know that in the case of disabled buttons, the React Spectrum team recommends using ContextualHelp, but that pattern doesn’t seem applicable in this context. For now, we’ve implemented tooltips on disabled items using some hacks, but it doesn’t feel very accessibility-friendly. Thx in advance for the help.

Screen.Recording.2025-06-25.at.1.03.50.mov

[devongovett]

We implemented a pattern similar to submenus for this in React Spectrum: https://react-spectrum.adobe.com/react-spectrum/Menu.html#unavailable-items

With React Aria Components, this is possible using a SubmenuTrigger containing a Popover: https://react-spectrum.adobe.com/react-aria/Menu.html#submenus. This is not required to contain a Menu - the Popover can contain arbitrary content.

[smashercosmo]

@devongovett thx for the answer. It solves the problem for Menu component, but what should we do in case of Select component, as it doesn't have submenus?

[snowystinger]

We'd recommend that users explain that in something like a contextual help outside the select, disabled options in a select are not focusable, so a keyboard/assistive technology user wouldn't be able to get to them.
https://react-spectrum.adobe.com/react-spectrum/Picker.html#contextual-help
https://react-spectrum.adobe.com/react-aria/Select.html#disabled-options

Or just don't include the disabled items.

I wouldn't use a Menu for it since they don't mean the same thing to users. One is a form element and the other is not for instance.

[smashercosmo]

The problem is that in our case different select items could have different reasons to be disabled, so contextual help won't help

[smashercosmo]

@devongovett I guess we can use Menu as Select considering that Menu supports selection, but is it the best way?