Baseline widget: loading UX, accessibility, and performance improvements

[marcoscaceres]

Ref: w3c/vibration#63

During discussion about adding Baseline support to the Vibration spec, @reillyeon requested that the widget:

1. Bake the latest status at build time (already works)
2. Show a gentle loading animation while fetching live data
3. Announce updates to screen readers
4. Provide a "current browser support" link in saved/published documents

After expert review (accessibility, design, and performance), the implementation plan includes:

Non-blocking pipeline (performance)

The module currently blocks the entire ReSpec pipeline while awaiting the network fetch (200-800ms). The fix makes the badge rendering non-blocking: insert placeholder DOM synchronously, return from run(), and let the promise resolve independently. Export correctness is preserved via beforesave awaiting the pending promise.

Loading animation

• 300ms delay before animation starts (avoids flash on typical fast loads)
• Subtle opacity pulse (0.35-0.6 range) with 2s duration
• Progressive enhancement: only animates with prefers-reduced-motion: no-preference
• will-change: opacity for compositor promotion
• min-height reservation to prevent CLS

Accessibility (aria-live)

• Dedicated visually-hidden live region with concise summary string (reliable across VoiceOver, NVDA, JAWS)
• aria-busy="true" on the <dd> during load, removed when data arrives
• aria-atomic="true" ensures full status reads as one coherent unit
• Static <dt> label ("Browser support:"), dynamic content in <dd>
• Network failure path: removes aria-busy, announces "unavailable"

Saved document label

• "More info" link changes to "Current browser support" in saved/exported documents
• Noun phrase consistent with spec header style ("Latest published version:", etc.)
• aria-label contains visible text per WCAG 2.5.3

Preconnect for browser logos

Add <link rel="preconnect"> for the W3C logo domain to parallelize TLS setup with the API fetch.