search

theKashey / react-focus-on

🎯 Solution for WAI ARIA compatible modal dialogs or full-screen tasks, you were looking for
MIT License
333 stars 14 forks source link

as={Component} not exposed from react-focus-lock #42

Closed AaronPowell96 closed 3 years ago

AaronPowell96 commented 4 years ago

I am trying to use react-focus-on with the as= prop to render my own nav without it being nested inside a div. As seen here: image however, it doesnt seem to be exposed from react-focus-lock.

EDIT: Have done a little digging and it seems internally the as is being used as RemoveScroll, and RemoveScroll is using a div, maybe we could pass through the as prop to removeScroll and that renders the component if provided?

Ive tried to use and implement forwardProps and that removed the div but then the lock didnt work.

theKashey commented 4 years ago

That's theoretically possible, but is it actually needed? Could you please explain your use case? For example, why Focus Lock you not be outside nav (as per screenshot), or inside nav - why it should be nav?

And not working forwardProps is definitely an issue.

AaronPowell96 commented 4 years ago

Hey, sorry for the late reply, the reason was for semantics, I didn't think a nav should be inside a div. With a screenreader it never picked up the navigation when it was inside a div, but when you have the header with a nav it did.

theKashey commented 4 years ago

I didn't think a nav should be inside a div

But could https://caninclude.glitch.me/can/include/?child=nav&parent=div

Anyway, I've got you

AaronPowell96 commented 4 years ago

Thank you, will be interested to see the solution as I did spend a few hours looking around haha

theKashey commented 3 years ago

Shipped as a part of v3.5.0