primitives icon indicating copy to clipboard operation
primitives copied to clipboard

[Select] Make the `hideOthers` feature optional (ie. add non-modal mode)

Open frykten opened this issue 2 years ago • 9 comments

Feature request

Overview

We started using Radix recently and we found something that is quite an issue on our side: when opening a simple Select or Menu "content", the page scrollbar disappears and there is a small lag.

Both stem from the same line of code (a feature):

    React.useEffect(() => {
      if (content) return hideOthers(content);
    }, [content]);

That "hideOthers" method/feature, though it has good intentions, breaks the UX for our mouse users as it hides the page scrollbar, and creates a lag in certain pages as it adds to all nodes the aria-hidden property (and we do not have a small website, but a rather big application with some heavy pages/documents and modifying the whole dom is just... not really something we want to do).

We understand that the intention was good and to trap the focus inside the element/popover and only that element/popover. Still, while we see the use for modals/dialogs, for Menus and Selects, we do not see the real plus-value---especially since it hinders our users' experience (page scroll difference, plus performance), and we would like to request a parameter to make that behavior optional via a param.

Personally, I'm inclined to make a PR, if you wish.

Examples in other libraries

It is mostly that other libraries do not use such behavior for elements like Menus/Selects. Just look at GitHub, the Google suite, Spotify, or any tool/app/website you use every day; this is way too brutal for such components that are used in forms, in navigation, and which do not break the flow (contrary to a modal, where it is advised in every specs/docs/tutorial to add such a behavior). In aria-hidden's documentation, they advise/enforce the use of the addon for modals/dialogs, not for smaller block items.

Whom does this impact? Who is this for?

This impacts Users---at least, ours. Making the property optional, with true as default, would not break the implementation of all those who use those components and are happy about it, but it would permit those who are not to fix it.

Additional context

Additionally, now, the repo aria-hidden has a "suppressOthers" method that turns everything into the new and better inert. Maybe you should turn to this method for the Modal/Dialog components?

Another thing/question: while implementing the component, we had to suppress an axe rule "Ensures aria-hidden elements are not focusable nor contain focusable elements"; when axe runs while the popover is opened (whether it is the selection list or the menu dropdown), the component's trigger is aria-hidden as well, even though it is tabbable/interactive and axe doesn't like that very much. Maybe it isn't supposed to be an issue, since the focus is trapped inside the popover, but it felt weird to our Product/QA teams and during User tests.

frykten avatar Feb 03 '23 14:02 frykten