SPIKE: Ws 2118 investigate sticky navugation on scroll up#13760
SPIKE: Ws 2118 investigate sticky navugation on scroll up#13760
Conversation
LilyL0u
changed the title
|
|
||
| // Sticky nav is rendered if it is not the lite site and if keyboard navigation has not been indicated with te tab key | ||
| const stickyNav = | ||
| !isLite && !isKeyboardNav ? ( |
There was a problem hiding this comment.
Worth considering for this spike but I think the sticky nav is still mounted even when hidden, so keyboard users may still tab into off-screen links and we also end up duplicating the navigation markup
There was a problem hiding this comment.
Doesn't seem possible to tab into off-screen links when I test it. aria-hidden="true" makes it not focusable. If duplication of markup is a problem, a different option can be looked into.
| const { isLite } = use(RequestContext); | ||
| const { enabled: topBarOJsEnabled } = useToggle('topBarOJs'); | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| const [showSticky, setShowSticky] = useState(false); |
There was a problem hiding this comment.
More for L39 but using one shared open/closed state for both navs might mean opening the sticky menu also opens the hidden original menu, which could lead to odd layout shifts or unexpected behaviour
There was a problem hiding this comment.
Good point, this was actually causing a bug with the dropdown. I have added const [openDropdown, setOpenDropdown] = useState<null | 'main' | 'sticky'>( null, ); which should make it so only one dropdown menu can be open at a time.
| return ( | ||
| <Navigation dir={dir} isOpen={isOpen}> | ||
| // Sticky nav scroll logic | ||
| useEffect(() => { |
There was a problem hiding this comment.
Possible performance risk here in that we update the state on scroll, so the nav could keep re-rendering while the user scrolls, which may be expensive w/ regards to mobile data considerations
2 participants
Resolves JIRA: https://bbc.atlassian.net/browse/WS-2118
This pull request introduces a sticky navigation bar for the canonical navigation component, enhancing the user experience by making navigation more accessible when scrolling. It also adds keyboard navigation detection to hide the sticky nav to avoid accessibility problems, hides the sticky nav in lite mode, and updates related tests.
Need to decide what to do with event tracking/analytics in relation to the sticky nav.
Sticky Navigation Implementation and Accessibility Improvements:
CanonicalNavigationContainerthat appears when the user scrolls up, disappears when scrolls down. It only shows when the main navigation is out of view. When the user scrolla back to near the top, the sticky nav will slide out of view to avoid overlaying them both. The threshold for where this happens can be changed. It is hidden when keyboard navigation (e.g., Tab key) is detected. This includes scroll direction detection, keyboard/pointer event handlers, and animation for smooth transitions. (src/app/components/Navigation/index.canonical.tsx[1] [2]src/app/components/Navigation/index.canonical.tsx[1] [2]Component and Test Enhancements:
ScrollableNavigationandCanonicalDropdowncomponents to support a newisStickyprop and set appropriatedata-e2eattributes for sticky and non-sticky instances, aiding testability. (src/app/legacy/psammead/psammead-navigation/src/ScrollableNavigation/index.jsx[1]src/app/legacy/psammead/psammead-navigation/src/DropdownNavigation/index.jsx[2]src/app/components/Navigation/index.canonical.test.tsxsrc/app/components/Navigation/index.canonical.test.tsxR1-R93)Test Selector Robustness:
button:visibleselectors, ensuring tests interact with the correct navigation button when multiple buttons may be present. (ws-nextjs-app/cypress/e2e/specialFeatures/atiAnalytics/assertions/navigation.ts[1] [2]Summary
A very high-level summary of easily-reproducible changes that can be understood by non-devs, and why these changes where made.
Code changes
Testing
Useful Links