Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dialog, Portal container: pointer-events:none will still add to <body> even I set a container to the dialog portal #1135

Closed
Hazel0913 opened this issue Feb 3, 2022 · 2 comments
Closed

Dialog, Portal container: pointer-events:none will still add to <body> even I set a container to the dialog portal #1135

Hazel0913 opened this issue Feb 3, 2022 · 2 comments

Comments

@Hazel0913
Copy link

Bug report

Current Behavior

Currently, when I set a container to the dialog portal component, the pointer-events:none will still be added to body. But not to the container that I set?

In my case, the modal dialog should avoid the pointer events only for the container I set. For the others, such as footer, which is outside the specific container, shouldn't be avoid.

  const container = document.getElementById('app');
<Dialog.Root>
    <Dialog.Trigger />
    <Dialog.Portal container={container}>
      <Dialog.Overlay />
      <Dialog.Content>
        <Dialog.Title />
        <Dialog.Description />
        <Dialog.Close />
      </Dialog.Content>
    </Dialog.Portal>
  </Dialog.Root>

Screen Shot 2022-02-04 at 4 04 25 AM

Expected behavior

Add pointer-events:none to the container of the portal.

Reproducible example

https://codesandbox.io/s/new-cherry-2w6dw?file=/src/App.tsx

Suggested solution

If modal is specific to a container, can we also specific the pointer events to the container too?

Additional context

Your environment

Software Name(s) Version
Radix Package(s)
React n/a
Browser
Assistive tech
Node n/a
npm/yarn
Operating System
@Hazel0913 Hazel0913 changed the title Dialog, Portal container. pointer-events:none will still add to body event I set a container to the dialog portal Dialog, Portal container. pointer-events:none will still add to <body> even I set a container to the dialog portal Feb 3, 2022
@Hazel0913 Hazel0913 changed the title Dialog, Portal container. pointer-events:none will still add to <body> even I set a container to the dialog portal Dialog, Portal container: pointer-events:none will still add to <body> even I set a container to the dialog portal Feb 3, 2022
@jjenzz
Copy link
Contributor

jjenzz commented Feb 4, 2022 •
edited
Loading

The container prop is purely for more control over positioning/styling.

Unfortunately, your suggestion would be incorrect in terms of accessibility as far as I can tell:

A dialog is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window.
https://www.w3.org/TR/wai-aria-practices/#dialog_modal

Note the mention of "primary window" here and how all windows underneath should be inert when modal. The primary window is the body element:

A dialog is a descendant window of the primary window of a web application. For HTML pages, the primary application window is the entire web document, i.e., the body element.
https://www.w3.org/TR/wai-aria-1.2/#dialog

If you wish to interact with elements outside of your dialog you can set modal={false} on the Dialog.Root.

@Hazel0913
Copy link
Author

Got it. Thanks for the reply

@nimeshvaghasiya nimeshvaghasiya mentioned this issue Mar 22, 2023
Open
@JulianKominovic JulianKominovic mentioned this issue May 2, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jjenzz @Hazel0913