## Problem The current profile activity calendar is implemented using a legacy D3.js/SVG-based architecture that presents several challenges: - The calendar is not fully accessible and cannot be effectively navigated using assistive technologies. - Keyboard navigation is limited or unavailable. - The implementation relies on aging technology that is difficult to maintain and evolve. - The current architecture makes it challenging to introduce new functionality and improve the user experience over time. - Performance and maintainability could be improved through a simpler rendering model. ## Goal Modernize the profile activity calendar by replacing the legacy implementation with a Vue-based component built on semantic HTML and CSS Grid. This work aims to establish a more accessible, maintainable, and extensible foundation while preserving the familiar contribution calendar experience. ## Expected Outcomes ### Accessibility - Provide a fully accessible activity calendar experience. - Support semantic HTML and appropriate ARIA labeling. - Enable complete keyboard navigation across all calendar cells. - Improve compatibility with screen readers and other assistive technologies. ### User Experience - Allow users to browse contribution history across multiple years. - Improve loading states through progressive rendering and skeleton loaders. - Provide a more resilient experience when activity data is loading or unavailable. - Ensure the calendar respects user preferences such as the configured first day of the week. ### Maintainability - Remove the dependency on the legacy D3.js/SVG implementation. - Consolidate rendering into a modern Vue component architecture. - Reduce complexity by leveraging CSS Grid instead of custom SVG layouts. - Create a foundation that is easier to iterate on and extend with future enhancements. ### Performance - Simplify rendering and layout calculations. - Reduce DOM complexity compared to the existing implementation. - Improve responsiveness across different viewport sizes. ## Future Opportunities By establishing a modern foundation, the activity calendar becomes significantly easier to evolve. Potential future enhancements include: - Additional contribution insights and visualizations. - Improved filtering and navigation capabilities. - Enhanced responsiveness and mobile experiences. - Further accessibility improvements based on user feedback. ## Success Criteria - Activity calendar is fully keyboard accessible. - Screen readers can successfully navigate and understand contribution data. - Users can browse historical contribution years. - Existing contribution data and visual representation remain intact. - Legacy D3.js implementation can be removed. - The new implementation becomes the default experience behind a feature flag rollout strategy. ## Draft - https://gitlab.com/gitlab-org/gitlab/-/merge_requests/236549+ ## Next steps Split up work into smaller, manageable sequential MRs