[ModalUnstyled] Apply aria-hidden to the correct Elements in the tree when disablePortal or container props are used - #34165
Conversation
Netlify deploy previewhttps://deploy-preview-34165--material-ui.netlify.app/ @material-ui/core: parsed: +0.08% , gzip: +0.13% Bundle size report |
|
This clearly needs some new test cases, for example:
I ended up fixing the existing tests because they were wrong. |
df92c4a to
fbd4868
Compare
ZeeshanTamboli
left a comment
There was a problem hiding this comment.
@Greg-NetDuma Can you merge with the latest master branch and fix the tests?
00d48d6 to
ff9bef2
Compare
|
Since there is no activity, I am closing this PR. |
Before if someone used
disablePortalorcontainerand opened a modal the whole page became inaccessible to Screen Readers. This PR aims to fix that.Changes:
disablePortalis used.aria-hiddenwe added gets cleaned up properly on unmount.PS.: Existing tests were wrong, fixed them.
Problems I've discovered while fixing this:
disableEnforceFocusis not respected by ModalManager, it should not applyaria-hiddento other elements then (in my opinion)TrapFocussentinel elements should always bearia-hiddenTrapFocussentinel elements should havetabIndex={-1}whendisableEnforceFocusis set to prevent people tabbing to them.Known Problems:
disablePortal,containeror using the default portal inbody. Every other case will still break. I've not found a corner case like that yet.aria-hiddenstates were changed outside of Modal while the Modal was up the change is not tracked (same as before this PR)