Refactoring Navigation - Proposal - Githubissues

baloise-incubator / design-system

Rebranding Version

https://baloise-design-system.vercel.app

Apache License 2.0

12 stars 3 forks source link

Refactoring Navigation - Proposal #1250

Closed clastzoo closed 1 year ago

clastzoo commented 1 year ago

Move navigation code base to IBMix
Implement active state for tabs
Navigation updates
Accessibility
SEO
Performance
Tracking

1. Move navigation code base to IBMix

bal-navigation should be removed in the Design System
Code base should be transferred to IBMiX
Code owner will be IBMiX in the future

2. Implement active state for tabs

Active states are visible on mobile and desktop
heading has default, hover and active state
menu-list-item has default, hover and active state

3. Navigation updates

Meta Tabs, hide if there is only one available item

Scroll behaviour on desktop
- Remember scroll position of the user and block scrolling in the background if the main navigation is open and is too big for the viewport

Main navigation has enough space on the first line with the logo than render links directly after the logo

4. Accessibility

All clickable navigation links should be accessible with the keyboard navigation (Tab key navigation)

Space or enter will open / activate the link. When keyboard focus is on tab or link with space block scrolling.

5. SEO

Titles should not have h-tag, because there are rendered before the first h1
Do not render all children pages in the navigation - as this eats up alle the link juice
It is better only to render the children of the currently active page in the navigation

6. Performance

Only render desktop or mobile navigation
Do not render all children pages in the navigation - less DOM nodes to render

7. Tracking

All links should trigger a google analytics event

hirsch88 commented 1 year ago

[ ] @clastzoo add screenshots to 2.

hirsch88 commented 1 year ago

moved to https://github.com/baloise/design-system/issues/784