feature: Added accessible, responsive, page-based game dropdown menu

[jschhie]

Problem

• The Game Zone page previously offered only static filter buttons for each game type, with no dropdown menu for linked games.
• This limited discoverability and accessibility for keyboard and screen reader users.
• On smaller viewports, game card titles overlapped with the mobile navbar.

Approach

• Added toggleable dropdown menus for linked Language and Math games, based on the current page.
• Implemented hover and toggle logic to show/hide dropdowns.
• Tracked reactive flags (isLangMenuOpen and isMathMenuOpen) to control visibility and dynamically update aria-expanded for screen readers.
• Each dropdown menu is:
  • Keyboard accessible (Tab and Enter supported)
  • Dynamically styled based on toggle state and currentPage
  • Fully responsive across screen sizes
• Fixed mobile overlap issue by setting z-index: 0 in GameZoneCard.vue.
• Added extra UX improvements:
  • Handled @blur / @focusout events to automatically close open dropdowns and reset menu button styling.
  • Re-clicking a selected menu button now toggles its dropdown closed.

Responsive Dropdown Menu Demos

Demos below show the accessible dropdown menus styled and functional across screen sizes.
Blue ring = currently focused option (via click, Tab, or Enter).

Viewport	Demo Image
Mobile (xs, sm)
Tablet (md)
Desktop (lg)

Additional Notes

• My initial implementation is available in the feature/accessible-game-dropdown-menus branch.
• It included two dropdowns on the same page, but lacked blur handling and did not retain the original game page buttons.
• The original PR #130 for this implementation has been closed.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
audemywebsite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 24, 2025 2:09am

[Crustaly]

looks great!