fix(youtube-player): a11y keyboard-accessible

[harlan-zw]

🔗 Linked issue

Resolves #797

❓ Type of change

• 📖 Documentation
• 🐞 Bug fix
• 👌 Enhancement
• ✨ New feature
• 🧹 Chore
• ⚠️ Breaking change

📚 Description

ScriptYouTubePlayer's placeholder responds to mouse triggers but was not reachable by keyboard, so AT users could not load the video. While the placeholder is showing and the configured trigger is event-based (e.g. mousedown), the root element now gets tabindex="0", role="button" and aria-label="Play video". An onPlaceholderKeydown handler dispatches the configured trigger event on the root for Enter/Space so the load path matches a click. Non-event triggers (immediate, onNuxtReady, visibility, visible) keep previous behaviour.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
scripts-playground	Ready	Preview, Comment	May 27, 2026 6:44am

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@nuxt/scripts@798

commit: d752b44

[coderabbitai]

📝 Walkthrough

Walkthrough

ScriptYouTubePlayer.vue adds keyboard accessibility to the player placeholder. A new computed keyboardTriggerable flag identifies when the player has not yet been triggered via certain trigger types (immediate, onNuxtReady, visibility, visible). A new onPlaceholderKeydown handler dispatches configured trigger events when the placeholder receives Enter or Space key presses. The root element's ARIA attributes now dynamically switch from non-interactive application role to button role with tabindex: 0 when keyboard activation is enabled. The template root element conditionally attaches the keydown listener only when keyboard triggering is applicable.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The pull request successfully addresses issue #797 by implementing keyboard navigation (Tab focus and Enter/Space activation) for the ScriptYouTubePlayer placeholder through ARIA attributes and keydown event handling.
Out of Scope Changes check	✅ Passed	All changes are directly related to adding keyboard accessibility to the YouTube player placeholder as specified in issue #797; no out-of-scope modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The pull request description clearly explains the changes: adding keyboard accessibility to ScriptYouTubePlayer's placeholder with tabindex, role, and aria-label attributes, plus a keydown handler for Enter/Space keys that dispatches the configured trigger event, while preserving behavior for non-event triggers.
Title check	✅ Passed	The title 'fix(youtube-player): a11y keyboard-accessible' directly addresses the main change: adding keyboard accessibility to the YouTube player placeholder, which is the core objective and the primary modification in the changeset.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch worktree-agent-a27f76b2357a5c059

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}