fix(vimeo): a11y keyboard and video placeholder alt text#803
Conversation
Applies the same keyboard-accessibility pattern from #798 to ScriptVimeoPlayer so users navigating with a keyboard can activate the placeholder via Enter or Space. Also sets the placeholder image alt to "Play video" on both the Vimeo and YouTube components so screen readers describe the action rather than treating the thumbnail as decorative.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThis PR enhances accessibility for video player placeholders across two components. The Vimeo player gains keyboard support by computing when keyboard activation is available, handling Enter and Space keys to dispatch configured trigger events, and updating ARIA semantics to expose the interactive state. Both the Vimeo and YouTube player placeholders now use descriptive "Play video" alt text instead of empty strings, improving screen reader clarity. Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/script/src/runtime/components/ScriptVimeoPlayer.vue`:
- Around line 265-277: The onPlaceholderKeydown handler currently casts
props.trigger to string[] and may attempt to dispatch non-string triggers;
update onPlaceholderKeydown to validate each trigger is a string before
dispatching by replacing the unchecked loop over triggers with a guard (e.g.,
check typeof t === 'string') and only dispatch Event(t, { bubbles: false }) when
that check passes; refer to function onPlaceholderKeydown, the triggers variable
derived from props.trigger, and rootEl.value for locating the change.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 95fd7f21-5d44-4b45-9cd3-dbb421d2ea45
📒 Files selected for processing (2)
packages/script/src/runtime/components/ScriptVimeoPlayer.vuepackages/script/src/runtime/components/ScriptYouTubePlayer.vue
|
Addressed in 07bfd18: added |
|
Tip For best results, initiate chat on the files or code changes.
If you found this review helpful, would you consider giving us a shout-out on X? Thank you for using CodeRabbit! |
harlan-zw
changed the title
1 participant
🔗 Linked issue
Related to a11y audit follow-up from #798
❓ Type of change
📚 Description
ScriptVimeoPlayerhad the same keyboard-accessibility gap that #798 fixed for YouTube: placeholder responded to mouse triggers but not Enter/Space. Applies the same pattern: root gainstabindex="0",role="button",aria-label="Play video"while placeholder is showing and the trigger is event-based; Enter/Space dispatches the configured trigger event. Non-event triggers (immediate,onNuxtReady,visibility,visible) are unchanged. Additionally, both YouTube and Vimeo placeholder<img>alt=""->alt="Play video"so screen readers describe the action.