Support landmark navigation and toasts across iframes#3892
Conversation
|
|
||
| let ref = useRef(null); | ||
| let {landmarkProps} = useLandmark({ | ||
| role: 'main', |
There was a problem hiding this comment.
The story we load in already has a main, I think there can only be one main per application. Right now Option+CMD+F6 for go to main is a little strange because it'll move through 3 different elements.
It's not pressing, just if we want to make the example more like how we'd expect people to implement it. Not that we can really do anything about enforcing it with iframes. Same thing with id's inside the iframe.
Maybe nothing to do for code, just need to make sure we state these things in the documentation.
|
Retested toasts in Android Talkback and Windows FF NVDA. Confirmed that Talkback properly announces the Toasts as they appear but Windows FF NVDA still has intermittent behavior where it will suddenly stop announcing the Toasts. Doesn't seem like the ariaHideOutside is blocking it there. Still reviewing the code changes |
|
I can look into the NVDA thing separately. |
LFDanLu
left a comment
LFDanLu
left a comment
There was a problem hiding this comment.
LGTM for the most part, verified that aria-hide outside, landmarks, and toast seems to be working as expected. Just one thing I noticed with the iframe story, but that is story implementation specific and be looked at later with the shell work
Co-authored-by: Reid Barber <reid@reidbarber.com>
Co-authored-by: Daniel Lu <dl1644@gmail.com>
devongovett
dismissed stale reviews from reidbarber, LFDanLu, and snowystinger
via
6ce0e63
…iframe # Conflicts: # packages/@react-aria/overlays/src/ariaHideOutside.ts # packages/@react-spectrum/toast/stories/Toast.stories.tsx
4 participants
Depends on #3868
This adds the necessary APIs to implement landmark navigation across iframe boundaries. In addition, this enables toasts to pop out of iframes and for the user to navigate between the toasts and iframe content.
It works by adding a custom DOM event named
react-aria-landmark-navigation, which can be canceled by callingpreventDefaultto override the default behavior. This event is triggered during landmark navigation when we reach the end of the landmark sequence in either direction. By default, we wrap around to the first/last landmark again, but ifpreventDefaultis called on this event we do not. This enables the iframe page to fire a message out of the iframe, where the F6 key is re-dispatched so that the landmark navigation on the outer page is applied. The iframe itself is made a landmark as well, and an additionalfocusoption is supported so that when landmark navigation reaches the iframe itself, focus can be redirected back inside. This makes it behave as is there were a single landmark navigation sequence across the whole page.This PR also fixes a couple bugs:
aria-hiddentrees were not skipped.ariaHideOutsideis active, it could hidedata-react-aria-top-layerelements (toasts). Now we apply the tree walker to added elements to ensure this is not the case.