feat(nuxt): set route announcer (#835)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit


- **New Features**
- Improved layout structure for enhanced accessibility and visual
organization in the application.
- **Bug Fixes**
- Enhanced robustness of toast notification visibility checks in
testing, reducing false negatives.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/app.vue

@@ -1,13 +1,17 @@
 <template>
-  <NuxtLayout>
-    <NuxtPage
-      class="h-full md:p-2 p-4"
-    />
+  <div class="h-full">
+    <NuxtRouteAnnouncer/>
+
+    <NuxtLayout>
+      <NuxtPage
+        class="h-full md:p-2 p-4"
+      />
+    </NuxtLayout>
 
     <PrimeVueToast position="bottom-right"/>
 
     <NuxtPwaManifest/>
-  </NuxtLayout>
+  </div>
 </template>
 
 <script lang="ts" setup>

tests/acceptance/features/playwright/step-definitions/toasts/playwright-toasts.then-steps.ts

@@ -4,5 +4,7 @@ import { expect } from "@playwright/test";
 import type { CustomWorld } from "@tests/acceptance/shared/types/word.types";
 
 Then(/^the toast with text "(?<text>.+)" should be visible$/u, async function(this: CustomWorld, text: string): Promise<void> {
-  await expect(this.page.getByRole("alert").getByText(text)).toBeVisible();
+  const toastsContainer = this.page.locator(".p-toast").first();
+
+  await expect(toastsContainer.getByRole("alert").getByText(text)).toBeVisible();
 });