DEV Community

Discussion on: Create React Modal with 22 lines of code

Collapse
 
anpos231 profile image
anpos231 • Edited

Hmm, No focus management, no aria and the content outside the modal will be read by screen readers.

I prefer to have 2 nodes as a child of <body> tag.

  • #app - is the main container for your app, it will have aria-hidden="true" attribute set, if #modal contains any modals.
  • #modals - is a container for modals. The last node has the focus trap.

So how do you inject your components into #modals node?
You use react portals!

Collapse
 
elaziziyoussouf profile image
Elazizi Youssouf

yes @anpos231 , I am planning to implement this approach on the reactjs-popup next release

Collapse
 
anpos231 profile image
anpos231

Maybe don't use 'reactjs-popup'. It's not screen reader friendly and suffers from all the issues that I already mentioned above.

I'd suggest Reakit instead.
It supports full customisation and the entire framework is focused on accessibility.