diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_anchor-menu.scss b/packages/unity-bootstrap-theme/src/scss/extends/_anchor-menu.scss index 138af3579e..7d328e7328 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_anchor-menu.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_anchor-menu.scss @@ -158,6 +158,17 @@ display: flex; justify-content: space-between; } + + // WCAG 1.4.10 Reflow: cap the sticky menu to the viewport and allow + // internal scrolling so every link stays reachable in mobile landscape. + // -attached is the class the JS actually applies when scrolling makes the + // navbar stick; -sticky is kept for external consumers that may apply it. + .uds-anchor-menu.uds-anchor-menu-attached, + .uds-anchor-menu.uds-anchor-menu-sticky { + max-height: 100vh; + max-height: 100dvh; + overflow-y: auto; + } } @include media-breakpoint-up(xl) { diff --git a/packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.styles.js b/packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.styles.js index 64cd9a6e98..2bf6fa8d4a 100644 --- a/packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.styles.js +++ b/packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.styles.js @@ -6,6 +6,12 @@ const AnchorMenuWrapper = styled.div` top: var(--uds-anchor-menu-top, 0px); left: 0; width: 100%; + + @media (max-width: 991.98px) { + max-height: 100vh; + max-height: calc(100dvh - var(--uds-anchor-menu-top, 0px)); + overflow-y: auto; + } } .mobile-menu-toggler { background-color: transparent;