fix(vimeo): a11y keyboard and video placeholder alt text (#803)

Author: harlan-zw

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

@@ -253,16 +253,43 @@ watch(status, (status) => {
  }
 })
 
+// Keyboard accessibility: dispatch the configured trigger event on Enter/Space
+// so users navigating via keyboard can activate the placeholder.
+const keyboardTriggerable =computed(() => {
+if (ready.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 (typeoft!=='string')
+continue
+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'
-?'Vimeo Player - Placeholder'
+?(interactive?'Play video':'Vimeo Player - Placeholder')
 :status.value==='loading'
 ?'Vimeo Player - Loading'
 :'Vimeo Player - Loaded',
 'aria-live': 'polite',
-'role': 'application',
+'role': interactive?'button':'application',
+'tabindex': interactive?0:undefined,
 'style': {
 '--vimeo-ratio': props.ratio,
 'maxWidth': '100%',
@@ -279,7 +306,7 @@ const rootAttrs = computed(() => {
 const placeholderAttrs =computed(() => {
 returndefu(props.placeholderAttrs, {
  src: placeholder.value,
- alt: '',
+ alt: 'Play video',
  loading: props.aboveTheFold?'eager':'lazy',
 // @ts-expect-error untyped
  fetchpriority: props.aboveTheFold?'high':undefined,
@@ -296,7 +323,7 @@ onBeforeUnmount(() => player?.unload())
 </script>
 
 <template>
- <divref="rootEl"v-bind="rootAttrs">
+ <divref="rootEl"v-bind="rootAttrs"@keydown="keyboardTriggerable ? onPlaceholderKeydown($event) : undefined">
  <divv-show="ready"ref="elVimeo"class="vimeo-player" />
  <slotv-if="!ready"v-bind="payload":placeholder="placeholder"name="placeholder">
  <imgv-if="placeholder"v-bind="placeholderAttrs">

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

@@ -245,7 +245,7 @@ if (import.meta.server) {
 const placeholderAttrs =computed(() => {
 returndefu(props.placeholderAttrs, {
  src: isFallbackPlaceHolder.value?fallbackPlaceHolder.value:placeholder.value,
- alt: '',
+ alt: 'Play video',
  loading: props.aboveTheFold?'eager':'lazy',
 // @ts-expect-error untyped
  fetchpriority: props.aboveTheFold?'high':undefined,