Storefront UI's accessible defaults vs custom Nuxt templates: where should WCAG conformance live in a Vue Storefront build?

Confirmed facts

Storefront UI v2 supplies accessible, unstyled component primitives (keyboard navigation, ARIA attributes) but does not provide workflow‑level accessibility such as live announcements for async cart/checkout updates or automatic focus management after route changes. The core composables (useCart, useCheckout, useUser) expose reactive state without emitting DOM events or ARIA updates.

Likely explanation

Because the library’s responsibility stops at the component level, any dynamic state that must be conveyed to assistive technology must be added in the UI/theme layer. A shared integration‑layer composable can supply the mechanism (watcher → aria‑live update or focus reset), while the theme/layout decides the exact target (e.g., which heading receives focus or where the live region is placed).

Answer to the specific questions

1. Does adopting Storefront UI meaningfully reduce workflow‑level WCAG gaps? Adopting Storefront UI v2 removes most component‑level barriers, but workflow‑level gaps (async announcements, focus after navigation) remain and must be handled in the UI/theme layer.
2. Is there a documented pattern for aria‑live announcements of async cart/checkout updates? Yes – create a small composable (e.g., useAccessibleAnnouncer) that watches the cart or checkout state and updates a single role="status" aria‑live element. Import this composable in Nuxt pages or layouts where the state changes.
3. Who should own focus management on route changes? Place the focus‑reset mechanism (a composable that runs on Vue Router's afterEach hook) in the integration layer for consistency. The theme/layout supplies the selector or ref for the element that should receive focus (main heading, skip link, etc.), keeping responsibility split between integration (how) and UI (where).

Recommended steps for this case

1. Verify the exact minor/patch version of Storefront UI v2 (or @alokai/ui) installed – newer patches may have added built‑in announcements or focus utilities that could shift the recommendation.
2. Add a single aria‑live container to your base layout (e.g., <div aria-live="polite" class="sr-only"></div>).
3. Implement useAccessibleAnnouncer:

import { ref } from 'vue'
export function useAccessibleAnnouncer() {
  const live = ref(null)
  function setLiveElement(el) { live.value = el }
  function announce(message) {
    if (live.value) live.value.textContent = message
  }
  return { setLiveElement, announce }
}

4. In the cart/checkout composable, watch the relevant state and call announce (e.g., "Item added to cart").
5. Create a focus‑reset composable:

import { useRoute } from 'vue-router'
import { ref } from 'vue'
export function useFocusReset(targetSelector) {
  const route = useRoute()
  function reset() {
    const el = document.querySelector(targetSelector)
    if (el && !el.isSameNode(document.activeElement)) el.focus()
  }
  // run after each navigation
  route.afterEach(() => { reset() })
}

6. In your theme/layout, call useFocusReset('h1, .skip-link') (or whichever element is appropriate for that page).
7. Test with keyboard-only navigation and a screen reader (NVDA/JAWS/VoiceOver) to confirm announcements and focus land as expected.

Missing diagnostic detail that could change the recommendation: Please confirm the exact minor/patch version of Storefront UI v2 (or @alokai/ui) you are using, as newer patches may have introduced built‑in announcements or focus‑management utilities.