Navigation: Scrolled hamburger menu links now navigate correctly in Safari (#66261)

overlayProps/dialogProps need to go inside FocusScope
This commit is contained in:
Ashley Harrison 2023-04-11 13:05:08 +01:00 committed by GitHub
parent 3e4eb9c93e
commit 0aa301e251
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -61,8 +61,8 @@ export function NavBarMenu({ activeItem, navItems, searchBarHidden, onClose }: P
timeout={{ enter: animationSpeed, exit: 0 }} timeout={{ enter: animationSpeed, exit: 0 }}
onExited={onClose} onExited={onClose}
> >
<div data-testid="navbarmenu" ref={ref} {...overlayProps} {...dialogProps} className={styles.container}> <FocusScope contain autoFocus>
<FocusScope contain autoFocus> <div data-testid="navbarmenu" ref={ref} {...overlayProps} {...dialogProps} className={styles.container}>
<div className={styles.mobileHeader}> <div className={styles.mobileHeader}>
<Icon name="bars" size="xl" /> <Icon name="bars" size="xl" />
<IconButton <IconButton
@ -82,8 +82,8 @@ export function NavBarMenu({ activeItem, navItems, searchBarHidden, onClose }: P
</ul> </ul>
</CustomScrollbar> </CustomScrollbar>
</nav> </nav>
</FocusScope> </div>
</div> </FocusScope>
</CSSTransition> </CSSTransition>
<CSSTransition <CSSTransition
nodeRef={backdropRef} nodeRef={backdropRef}