Improve Accessibility and Keyboard Navigation for Interactive Wall Calendar

[akkki007]

Issue Description

Summary

The current wall calendar experience is visually polished and highly interactive, but accessibility and keyboard usability can be improved to make the application more inclusive and easier to navigate without a mouse.

Problem

Several interactive areas (month navigation, notes interaction, animated transitions, and theme-aware UI elements) rely heavily on pointer interactions and visual feedback. This may create usability issues for:

• Keyboard-only users
• Screen reader users
• Users sensitive to motion animations
• Users requiring higher contrast focus states

Additionally, the full-page flip animation and custom spiral/calendar structure may not expose enough semantic information to assistive technologies.

Proposed Improvements

Keyboard Navigation

• Add full keyboard support for:

  • Previous/next month navigation
  • Opening/editing notes
  • Theme switching (if applicable)

• Ensure proper tab order throughout the calendar UI

• Add visible focus indicators using Tailwind focus utilities

Accessibility Semantics

• Add appropriate ARIA labels and roles:

  • role="grid" for the date grid
  • aria-label for navigation buttons
  • Screen-reader labels for dates and note indicators

• Ensure decorative SVG spiral bindings are hidden from assistive tech using aria-hidden="true"

Reduced Motion Support

• Respect prefers-reduced-motion
• Provide a simplified transition fallback that disables or reduces the 3D page-flip animation for motion-sensitive users

Color Contrast & Theme Validation

• Validate contrast ratios in both light and dark themes
• Improve focus ring visibility against hero images and shadows

Expected Outcome

The calendar should remain visually immersive while becoming:

• Fully keyboard accessible
• More screen-reader friendly
• Comfortable for motion-sensitive users
• More compliant with modern accessibility standards (WCAG)

Possible Implementation Areas

• Framer Motion conditional animations
• Tailwind focus-visible utilities
• Semantic calendar grid structure
• ARIA enhancements
• Reduced motion hooks/utilities

Additional Context

Because the project already emphasizes production-quality UX (skeuomorphic visuals, hydration-safe hooks, local image optimization, etc.), accessibility improvements would align well with the existing design philosophy and improve overall usability without changing the visual identity.

[akkki007]

/bounty $200

[akkki007]

/bounty $200

[openbounty-dev-app]

✅ Bounty drafted at $200. Fund it →

Until funded, only you can see it. Funding makes it live on the public feed.

[grantf04]

/attempt #3

I can take a focused accessibility pass: keyboard month navigation, semantic date grid roles/labels, visible focus states, reduced-motion handling for the page flip, and screen-reader-safe decorative elements. I will keep the visual design intact and include verification notes in the PR.

[SlaVKsVolks]

Hi - I can take a focused accessibility pass on this today: keyboard month navigation, semantic calendar grid roles/labels, visible focus states, reduced-motion handling, and screen-reader-safe decorative elements. I will keep the current visual design intact and include verification notes in the PR.

Before I start, can you confirm the $200 bounty/payment is funded or otherwise available for a PR that delivers those items? I see the bot note says the bounty is drafted until funded, so I want to avoid doing speculative unpaid work or creating a duplicate attempt.