search

KittyGiraudel / react-a11y-dialog

An accessible React component for a11y-dialog
https://a11y-dialog.netlify.app
MIT License
173 stars 16 forks source link

Shadow DOM support (dialogRoot prop type) #385

Closed mikkelblanne closed 3 months ago

mikkelblanne commented 5 months ago

I started looking at the a11y-dialog lib, thought it looked nice and simple, and noticed that it "Plays nicely with Shadow DOM". That's however not the case for this react wrapper. The first thing I noticed was how the dialogRoot prop is used:

  const root = dialogRoot
    ? document.querySelector(dialogRoot)
    : document.body

If dialogRoot was just a node (as the prop description actually suggests), I think that would open up the possible uses. Limiting the prop to a string meant for document.querySelector means that it's impossible to render inside a shadow DOM.

KittyGiraudel commented 5 months ago

Hello Mikkel.

You’re right, react-a11y-dialog could be doing more to play better with Shadow DOM — I’m sorry you’re experiencing problems with it. Truth be told, it sees significantly less usage than a11y-dialog itself and I no longer use it either (although I intend to keep maintaining it). If you would like to issue a pull-request to improve support, I’ll gladly review, merge and publish it.

mikkelblanne commented 5 months ago

Thanks for the quick response. I'm not yet sure which direction we'll go, and we might need to create our own React wrapper for other reasons, but if we end up only needing this, I'll try to create a PR.

KittyGiraudel commented 3 months ago

@mikkelblanne Hey Mikkel! What do you think of this #406?

mikkelblanne commented 3 months ago

@KittyGiraudel That looks just like what I would've done :)

KittyGiraudel commented 3 months ago

Fixed in 7.4.0. :)