fix(google-maps,gravatar): a11y misc fixes (#802)

Author: harlan-zw

docs/content/docs/1.guides/2.first-party.md

@@ -5,7 +5,7 @@ description: Route third-party script traffic through a reverse proxy on your do
 
 ## The Problem
 
-Every third-party script your site loads connects your users directly to external servers. Each request shares the user's IP address, and many scripts go further: the X Pixel accesses 9 browser fingerprinting APIs (including `navigator.getBattery()`{lang="ts"}), sets 5 tracking cookies (`muc_ads`, `guest_id_marketing`, `guest_id_ads`, `personalization_id`, `guest_id`), and phones home to 3 separate domains. Microsoft Clarity reads 10 fingerprinting APIs across 3 domains. Even Google Analytics at 154 KB sends data that can be correlated across sites.
+Every third-party script your site loads connects your users directly to external servers. Each request shares the user's IP address, and many scripts go further: the X Pixel accesses 4 browser fingerprinting APIs (including `navigator.getBattery()`{lang="ts"}), sets 5 tracking cookies (`muc_ads`, `guest_id_marketing`, `guest_id_ads`, `personalization_id`, `guest_id`), and phones home to 3 separate domains. Microsoft Clarity reads 5 fingerprinting APIs across 3 domains. Even Google Analytics at 154 KB sends data that can be correlated across sites.
 
 Ad blockers rightfully block these requests, which breaks analytics for sites that depend on them.
 

docs/content/docs/5.releases/1.v1.md

@@ -11,7 +11,7 @@ Nuxt Scripts v1 is the first stable release, pushing the ecosystem forward for b
 
 Every third-party script request exposes your users data to [fingerprinting](https://firstpartysimulator.net/learn).
 
-Different providers are more intrusive, for example, the X Pixel accesses 9 browser fingerprinting APIs (including `navigator.getBattery()`{lang="ts"}), sets 5 tracking cookies, and makes requests to 3 separate domains. Microsoft Clarity reads 10 fingerprinting APIs across 3 domains.
+Different providers are more intrusive, for example, the X Pixel accesses 4 browser fingerprinting APIs (including `navigator.getBattery()`{lang="ts"}), sets 5 tracking cookies, and makes requests to 3 separate domains. Microsoft Clarity reads 5 fingerprinting APIs across 3 domains.
 
 First-party mode acts as a **reverse proxy**: Nuxt bundles scripts at build time and serves them from your domain, while runtime requests are securely forwarded through your server. Data sent to third-party servers gets anonymised: IPs (`180.233.124.74` -> `180.233.124.0`), browser versions (`Mozilla/5.0 (compatible; Chrome/120.0)`{lang="ts"}) and more. This is **auto-enabled** for all scripts that support it.
 

packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsStaticMap.vue

@@ -99,13 +99,18 @@ const props = withDefaults(defineProps<{
    * Additional attributes for the `<img>` element.
    */
   imgAttrs?: ImgHTMLAttributes & ReservedProps & Record<string, unknown>
+  /**
+   * Alt text for the map image. Override to provide a more descriptive label for screen readers.
+   */
+  alt?: string
 }>(), {
   zoom: 15,
   scale: 2,
   loading: 'lazy',
   objectFit: 'cover',
   width: 640,
   height: 400,
+  alt: 'Google Maps',
 })
 
 defineSlots<{
@@ -232,7 +237,7 @@ const src = computed(() => {
 const imgAttributes = computed(() => {
   return defu(props.imgAttrs, {
     src: src.value,
-    alt: 'Google Maps',
+    alt: props.alt,
     loading: props.loading,
     style: {
       width: '100%',

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

@@ -58,6 +58,8 @@ onMounted(() => {
   >
   <span
     v-else
+    role="status"
+    aria-label="Loading avatar"
     :style="{ display: 'inline-block', width: `${size}px`, height: `${size}px`, borderRadius: '50%', background: '#e0e0e0' }"
   />
 </template>

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

@@ -16,7 +16,7 @@ const styles = computed(() => ({
 </script>
 
 <template>
-  <div class="loader" :styles="styles" aria-label="Loading..." role="status" />
+  <div class="loader" :style="styles" aria-label="Loading..." role="status" />
 </template>
 
 <style scoped>