🎨 Palette: Enhanced Shortcut Discoverability and Logic#1139
Conversation
This change improves the accessibility and utility of global keyboard shortcuts by: - Implementing the 'M' key shortcut to open the navigation menu. - Enhancing shortcut discoverability for screen reader users by appending '(M)', '(Esc)', and '(Shift+T)' hints to `aria-label` attributes. - Ensuring these labels update dynamically as the component state changes (e.g., from 'Open' to 'Close'). - Maintaining parity between visual `<kbd>` tooltips and accessible names. - Implementing proper cleanup for keyboard listeners to support Astro View Transitions. Verified via Playwright scripts and local validation suite.
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
github-actions
bot
deleted the
palette-shortcut-logic-discoverability-955725863981912216
branch
1 participant
💡 What: Enhanced keyboard shortcuts for the theme switcher and mobile menu. Added a functional 'M' key shortcut to open the menu and updated
aria-labelattributes to include shortcut hints.🎯 Why: Shortcuts improve efficiency for power users and keyboard navigators, but they must be discoverable. Including them in the
aria-labelensures screen reader users are aware of them, while the visual<kbd>tags help sighted users.📸 Before/After: Visual tooltips now correctly show '(M)' when the menu is closed and '(Esc)' when open.
aria-labelattributes now read "Ouvrir le menu (M)" or "Soleil (Activer le mode clair) (Shift+T)".♿ Accessibility: Improved WCAG compliance by ensuring the accessible name of interactive elements includes their keyboard shortcuts. Added proper focus and haptic feedback when shortcuts are triggered.
PR created automatically by Jules for task 955725863981912216 started by @kuasar-mknd