react-modal v4

[diasbruno]

First, thanks for all the support through the years...reporting and answering issues, or submitting PRs. You guys are great.

I try my best to find time to help improve this package, but I can't do it alone...

I have a dream to finally release version 4 for react-modal, but I didn't have a good goal to invest time to push it forward.

The goals for v4:

1. Remove from the API everything that can disable accessibility

It would be better to have a more stable releases without breaking accessibility.

2. Fix the bogus default behavior related to hide the application.

The default is to apply the aria-hidden attribute to the document.body. But this hides everything

This will require the user to explicitly define the element(s), using its id or class or element, using Modal.setAppElement().

To normalize the API, Modal.setAppElement() and appElement={} must use arrays to keep the API simple.

3. Deprecate ariaHideApp

This is an unnecessary flag, this behavior can be archived by passing [] to Modal.setAppElement() and appElement={}. But it shouldn't be recommended.

4. Deprecate shouldFocusAfterRender={boolean}

The modal must always gain focus and trap (correctly).

5. Replace shouldReturnFocusAfterClose={boolean} with returnFocusTo={Element}

This can be an element that will gain focus after the modal is closed.

The default behavior is to return the focus to the element on document.activeElement before open the modal, but...in some browsers, this behavior is broken so we can't always trust it. So, the user can pass to this attribute an element that must receive the focus later.

6. Review all additional systems that react-modal uses (see helpers folder)

This package manages a lot of state (like open instances, styles classes added to external elements, focus system...)

---

With this goals in mind, the API will be less flexible to disable the features related to accessibility, which should not be a problem, but maybe some users will not see this a gain...So, I decided to start a discussion before moving forward with this...

I'll let this open until the end of Jun, and if the feedback is positive, I'll set up the project so everybody can participate!

Thanks,
Dias

[herrherrmann]

Remove from the API everything that can disable accessibility

While I generally agree with this, it’d definitely be useful to know if any users ran into any edge cases here. If removing this helps accessibility but totally breaks someone’s app (without any way to fix it with react-modal v4), that’d be a shame!

[diasbruno]

In this case, we are assuming v4 will be a massive breaking change.
So, in order to upgrade, users will need to follow the new API.
But we will see about that. If we have to look back and give some control
to the user, at least will do some kind of "redo".

[magbicaleman]

Remove from the API everything that can disable accessibility

Will this mean more control over accessibility configurations? For example if I'm already using module focus-trap-react, disabling focus-trap on react-modal would beneficial, since there is more control as to how focus trap functions.

[diasbruno]

People want this feature out of the box...I'd rather let the developer choose,
but I can see how annoying this is (do this everytime).

For now, we can work with our current implementation and try to patch it,
before deciding what to do.