feat: Add pagination feature for large boards (#1786)

[GOLLASAISREE]

Summary

Hey team! 👋 I've been working on implementing the pagination feature for large boards to address issue cboard-org#1786. This is my solution for helping users with motor difficulties (like those with Cerebral Palsy) navigate large vocabulary boards without having to scroll.

What I Changed

I created a new component and made updates to support pagination:

1. BoardPagination Component - A new React component that handles page navigation with:

   • "Previous" and "Next" buttons
   • Current page indicator
   • Smart button disabling (Previous button disabled on first page, Next button disabled on last page)
   • Full keyboard accessibility support
   • ARIA labels for screen readers

2. Board Component Integration - Updated to:

   • Track the current page state
   • Filter tiles to display only those on the current page
   • Apply CSS class to disable scrolling on large boards
   • Pass navigation callbacks to the pagination component

3. CSS Styling - Added:

   • .board-paginated class with overflow: hidden to disable scrolling
   • Accessible button styles that work with keyboard navigation
   • Proper focus indicators for accessibility

Why This Helps

Users with motor difficulties can now:

• ✨ Navigate without scrolling (major accessibility win!)
• ⌨️ Use keyboard to switch pages (Tab and Enter keys)
• 🎤 Use voice commands to click "Next" and "Previous" buttons
• 📱 Get a cleaner interface on all screen sizes
• 👁️ Rely on screen readers for the page indicator

Testing I Did

I tested with:

• Large vocabulary boards (50+ tiles)
• Keyboard navigation (Tab, Enter, Shift+Tab)
• Screen reader compatibility
• Touch/tap navigation
• Different board sizes

Configuration Options

Users can control this feature through settings:

• Enable/Disable pagination mode
• Customize tiles per page (default: 12-16)

Questions & Feedback Needed

I'd really appreciate your thoughts on:

1. Is the pagination component structure good? Should I refactor it?
2. Are the default number of tiles per page (12-16) appropriate?
3. Do the button styles feel accessible and clear?
4. Should there be any animations when switching pages?
5. Any edge cases I should test more thoroughly?

Links

• Fixes Disable scroll for large boards  cboard-org/cboard#1786 - Disable scroll for large boards
• Related to Fix: Disable horizontal scroll in large boards (Fixes #1786) cboard-org/cboard#1971 - Fix horizontal scroll in large boards

Thanks for reviewing! Let me know if you'd like me to make any changes! 😊