fix(youtube-player): a11y keyboard-accessible (#798)

Author: harlan-zw

packages/script/src/runtime/components/ScriptYouTubePlayer.vue

@@ -197,16 +197,41 @@ defineExpose({
 player,
 })
 
+// Keyboard accessibility: dispatch the configured trigger event on Enter/Space
+// so users navigating via keyboard can activate the placeholder (fixes #797).
+const keyboardTriggerable =computed(() => {
+if (isTriggered.value)
+returnfalse
+const triggers =Array.isArray(props.trigger) ?props.trigger: [props.trigger]
+returntriggers.some(t=>typeoft==='string'&&!['immediate', 'onNuxtReady', 'visibility', 'visible'].includes(t))
+})
+
+function onPlaceholderKeydown(e:KeyboardEvent) {
+if (e.key!=='Enter'&&e.key!=='')
+return
+e.preventDefault()
+if (!rootEl.value)
+return
+const triggers = (Array.isArray(props.trigger) ?props.trigger: [props.trigger]).filter(Boolean) asstring[]
+for (const t oftriggers) {
+if (['immediate', 'onNuxtReady', 'visibility', 'visible'].includes(t))
+continue
+rootEl.value.dispatchEvent(newEvent(t, { bubbles: false }))
+ }
+}
+
 const rootAttrs =computed(() => {
+const interactive =keyboardTriggerable.value
 returndefu(props.rootAttrs, {
 'aria-busy': status.value==='loading',
 'aria-label': status.value==='awaitingLoad'
-?'YouTube Player - Placeholder'
+?(interactive?'Play video':'YouTube Player - Placeholder')
 :status.value==='loading'
 ?'YouTube Player - Loading'
 :'YouTube Player - Loaded',
 'aria-live': 'polite',
-'role': 'application',
+'role': interactive?'button':'application',
+'tabindex': interactive?0:undefined,
 'style': {
  cursor: 'pointer',
  position: 'relative',
@@ -265,7 +290,7 @@ const placeholderAttrs = computed(() => {
 </script>
 
 <template>
- <divref="rootEl"v-bind="rootAttrs">
+ <divref="rootEl"v-bind="rootAttrs"@keydown="keyboardTriggerable ? onPlaceholderKeydown($event) : undefined">
  <divref="youtubeEl"style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;" />
  <slotv-if="!ready":placeholder="placeholder"name="placeholder">
  <imgv-bind="placeholderAttrs">