fix: prefer invisible screen reader loading indicator

Author: harlan-zw

src/runtime/components/ScriptAriaLoadingIndicator.vue

@@ -0,0 +1,16 @@
+<template>
+<div class="sr-only" aria-label="Loading..." role="status" />
+</template>
+
+<style scoped>
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+</style>

src/runtime/components/ScriptGoogleMaps.vue

@@ -11,6 +11,7 @@ import type { ElementScriptTrigger } from '../types'
 import { scriptRuntimeConfig } from '../utils'
 import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
 import { useScriptGoogleMaps } from '../registry/google-maps'
+import ScriptAriaLoadingIndicator from './ScriptAriaLoadingIndicator.vue'
 
 interface PlaceholderOptions {
   width?: string | number
@@ -458,7 +459,7 @@ onBeforeUnmount(async () => {
       <img v-bind="placeholderAttrs">
     </slot>
     <slot v-if="status !== 'awaitingLoad' && !ready" name="loading">
-      <ScriptLoadingIndicator color="black" />
+      <ScriptAriaLoadingIndicator />
     </slot>
     <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
     <slot v-else-if="status === 'error'" name="error" />

src/runtime/components/ScriptVimeoPlayer.vue

@@ -8,6 +8,7 @@ import { useHead } from '@unhead/vue'
 import type { ElementScriptTrigger } from '../types'
 import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
 import { useScriptVimeoPlayer } from '../registry/vimeo-player'
+import ScriptAriaLoadingIndicator from './ScriptAriaLoadingIndicator.vue'
 
 interface VimeoOptions {
   // copied from @types/vimeo__player
@@ -274,7 +275,7 @@ onBeforeUnmount(() => player?.unload())
       <img v-if="placeholder" v-bind="placeholderAttrs">
     </slot>
     <slot v-if="status === 'loading'" name="loading">
-      <ScriptLoadingIndicator color="white" />
+      <ScriptAriaLoadingIndicator color="white" />
     </slot>
     <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
     <slot v-else-if="status === 'error'" name="error" />

src/runtime/components/ScriptYouTubePlayer.vue

@@ -7,6 +7,7 @@ import { useHead } from '@unhead/vue'
 import type { ElementScriptTrigger } from '../types'
 import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
 import { useScriptYouTubePlayer } from '../registry/youtube-player'
+import ScriptAriaLoadingIndicator from './ScriptAriaLoadingIndicator.vue'
 
 const props = withDefaults(defineProps<{
   placeholderAttrs?: ImgHTMLAttributes
@@ -178,7 +179,7 @@ const placeholderAttrs = computed(() => {
       <img v-bind="placeholderAttrs">
     </slot>
     <slot v-if="status === 'loading'" name="loading">
-      <ScriptLoadingIndicator />
+      <ScriptAriaLoadingIndicator />
     </slot>
     <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
     <slot v-else-if="status === 'error'" name="error" />