fix: SPA page loading and accessibility

[narduin]

• Add skip links component
• Add live region component
• Add title to routes
• Add vueuse package
• Set focus to skip link on nav
• Set page title to live region on nav

Fix ecolabdata/ecospheres#334
Fix ecolabdata/ecospheres#340

[netlify]

✅ Deploy Preview for ecospheres ready!

Name	Link
🔨 Latest commit	1d2e4df
🔍 Latest deploy log	https://app.netlify.com/sites/ecospheres/deploys/66ec72458dbb430008fb11a1
😎 Deploy Preview	https://deploy-preview-522--ecospheres.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for meteo-france ready!

Name	Link
🔨 Latest commit	1d2e4df
🔍 Latest deploy log	https://app.netlify.com/sites/meteo-france/deploys/66ec7245bb64bd0008f85e8d
😎 Deploy Preview	https://deploy-preview-522--meteo-france.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[narduin]

Après tests lecteurs d'écran: ça fonctionne bien 😊

Les liens d'évitements ne seront visibles qu'à la navigation clavier mais tout le temps focus au chagement de page par défaut. Ça évite de les afficher en permanence pour les utilisateurs non concernés.

Je me demande s'il ne faudrait pas sortir le fil d'Ariane du main car c'est le premier élément du focus après utilisation du skip link vers le contenu…

La structure mise en place se base sur les recherches utilisateurs effectuées par Marcy Sutton.

The advice now looks like this:

• Provide a skip link that takes focus on a route change within the site, with a label that indicates what the link will do when activated: e.g. "skip to main navigation".
• Include an ARIA Live Region on page load. On a route change, append text to it indicating the current page, e.g. "Portfolio page".

Seul truc un peu bizarre: NVDA sur firefox annonce deux fois le nom de la page. C'est à priori un bug connu du logiciel.

J'ai rencontré un petit casse-tête avec la page de détails des bouquets qui utilise useHead et qui remplace le title. J'ai mis en place un provide/inject plutôt qu'un store ça me semblait moins lourd.

J'ai laissé la zone d'annonce des titres visible pour que vous puissiez tester sans lecteur d'écran 😅
Sur les pages détails orga et détails données, le titre est annoncé deux fois. Une fois avant le changement du title puis une fois après. Ça n'arrive pas sur le détails bouquet.