Améliore la structure des titres et corrige les annonces vocales d'en…

…registrement (#933) * fix headings structure on audit page * update heading structure on audit page * update generation page title * vocally announce when network requests work again * fix tabs semantics and clean some headings * add hidden heading on audit page with current page name * fix headings structure in report * update changelog --------- Co-authored-by: Quentin Bellanger <hello@quentin-bellanger>
DISIC · Feb 6, 2025 · 27649bb · 27649bb
1 parent 7bad699
commit 27649bb
Show file tree

Hide file tree

Showing 16 changed files with 75 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 Tous les changements notables de Ara sont documentés ici avec leur date, leur catégorie (nouvelle fonctionnalité, correction de bug ou autre changement) et leur pull request (PR) associée.
 
+## 06/02/2025
+
+### Corrections 🐛
+
+- Corrige la hiérarchie des titres et les annonces d’enregistrement pour les technologies d’assistance ([#933](https://github.com/DISIC/Ara/pull/933))
+
 ## 05/02/2025
 
 ### Autres changements ⚙️

diff --git a/confiture-web-app/src/components/SummaryCard.vue b/confiture-web-app/src/components/SummaryCard.vue
@@ -44,15 +44,15 @@ const uniqueId = useUniqueId();
     </div>
 
     <section v-if="showDetails" class="fr-accordion card-accordion">
-      <h3 class="fr-accordion__title">
+      <div class="fr-accordion__title">
         <button
           class="fr-accordion__btn"
           aria-expanded="false"
           :aria-controls="`accordion-${uniqueId}`"
         >
           <slot name="accordion-title"></slot>
         </button>
-      </h3>
+      </div>
       <div :id="`accordion-${uniqueId}`" class="fr-collapse">
         <slot name="accordion-content" />
       </div>

diff --git a/confiture-web-app/src/components/audit/AraTabs.vue b/confiture-web-app/src/components/audit/AraTabs.vue
@@ -67,7 +67,7 @@ watch(currentTab, (currentTab) => {
 <template>
   <div class="tabs-wrapper" :style="{ '--tabs-top-offset': stickyTop }">
     <ul role="tablist" class="tabs">
-      <li v-for="(tab, i) in tabs" :key="i">
+      <li v-for="(tab, i) in tabs" :key="i" role="presentation">
         <button
           :id="tabId(i)"
           ref="tabControlRefs"

diff --git a/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue b/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue
@@ -137,6 +137,7 @@ function handleUploadExample(file: File) {
     })
     .catch(async (error) => {
       errorMessage.value = await handleFileUploadError(error);
+      store.lastRequestFailed = true;
     })
     .finally(() => {
       criteriumNotCompliantAccordion.value?.onFileRequestFinished();
@@ -167,6 +168,7 @@ function handleDeleteExample() {
     })
     .catch(async (error) => {
       errorMessage.value = await handleFileDeleteError(error);
+      auditStore.lastRequestFailed = true;
     })
     .finally(() => {
       criteriumNotCompliantAccordion.value?.onFileRequestFinished();
@@ -176,6 +178,7 @@ function handleDeleteExample() {
 
 function handleUpdateResultError(err: any) {
   console.log(err);
+  auditStore.lastRequestFailed = true;
   notify(
     "error",
     "Une erreur est survenue",
@@ -253,15 +256,15 @@ const showTransverseStatus = computed(() => {
 
 <template>
   <li class="fr-p-2w criterium-container">
-    <div class="fr-mb-2w criterium-main-section">
+    <h4 class="fr-mb-2w fr-text--md criterium-main-section">
       <span class="fr-text--bold criterium-number">
-        {{ topicNumber }}.{{ criterium.number }}
+        {{ topicNumber }}.{{ criterium.number }}&nbsp;
       </span>
-      <div
+      <span
         class="fr-text--bold criterium-title"
         v-html="marked.parseInline(criterium.title)"
       />
-    </div>
+    </h4>
 
     <!-- STATUS -->
     <div

diff --git a/confiture-web-app/src/components/audit/AuditGenerationHeader.vue b/confiture-web-app/src/components/audit/AuditGenerationHeader.vue
@@ -127,7 +127,7 @@ function confirmDelete() {
       notify(
         "error",
         "Une erreur est survenue",
-        "Un problème empêche la sauvegarde de vos données. Contactez-nous à l'adresse [email protected] si le problème persiste."
+        "Un problème empêche la suppression de votre audit. Contactez-nous à l'adresse [email protected] si le problème persiste."
       );
       captureWithPayloads(error);
     })
@@ -159,6 +159,7 @@ const updateAuditNotes = async (notes: string) => {
       "Une erreur est survenue",
       "Un problème empêche la sauvegarde de vos données. Contactez-nous à l'adresse [email protected] si le problème persiste."
     );
+    auditStore.lastRequestFailed = true;
   } finally {
     isNotesLoading.value = false;
   }
@@ -223,7 +224,13 @@ onMounted(() => {
     </button>
   </div>
 
-  <h1>{{ auditName }}</h1>
+  <h1>
+    {{ auditName }}
+    <span class="fr-sr-only">
+      Ara enregistre automatiquement vos saisies. Vous serez alerté en cas de
+      problème lié à l’enregistrement
+    </span>
+  </h1>
 
   <div ref="stickyIndicator" class="sticky-indicator fr-grid-row fr-mb-3w">
     <div

diff --git a/confiture-web-app/src/components/audit/AuditGenerationPageCriteria.vue b/confiture-web-app/src/components/audit/AuditGenerationPageCriteria.vue
@@ -63,10 +63,10 @@ const showTransverseAlert = ref(
 
 <template>
   <!-- TODO: handle empty state -->
+  <h2 class="fr-sr-only">{{ page.name }}</h2>
+
   <div v-if="showTransverseAlert" class="fr-alert fr-alert--info fr-mb-4w">
-    <h3 class="fr-alert__title">
-      Nouveauté : gestion des éléments transverses
-    </h3>
+    <p class="fr-alert__title">Nouveauté : gestion des éléments transverses</p>
     <p>
       L'interrupteur "Sur toutes les pages" est remplacé par l'onglet "Éléments
       transverses", qui vous permet d’évaluer les éléments communs à toutes les

diff --git a/confiture-web-app/src/components/audit/NotesModal.vue b/confiture-web-app/src/components/audit/NotesModal.vue
@@ -51,6 +51,7 @@ function handleUploadFile(file: File) {
     })
     .catch(async (error) => {
       errorMessage.value = await handleFileUploadError(error);
+      auditStore.lastRequestFailed = true;
     })
     .finally(() => {
       fileUpload.value?.onFileRequestFinished();
@@ -65,6 +66,7 @@ function handleDeleteFile(file: AuditFile) {
     })
     .catch(async (error) => {
       errorMessage.value = await handleFileDeleteError(error);
+      auditStore.lastRequestFailed = true;
     })
     .finally(() => {
       fileUpload.value?.onFileRequestFinished();

diff --git a/confiture-web-app/src/components/audit/SaveIndicator.vue b/confiture-web-app/src/components/audit/SaveIndicator.vue
@@ -104,9 +104,26 @@ setInterval(() => {
     return;
   }
 
-  var seconds = Math.round((Date.now() - timestamp) / 1000);
+  const seconds = Math.round((Date.now() - timestamp) / 1000);
   relativeLastSaveDate.value = formatInterval(seconds);
 }, 1000);
+
+// Vocally announce when requests are working again after a failure
+const saveText = ref("");
+
+watch(
+  () => store.value.lastRequestFailed,
+  () => {
+    if (store.value.lastRequestFailed) {
+      saveText.value = "Information : vos saisies sont à nouveau enregistrées.";
+
+      setTimeout(() => {
+        saveText.value = "";
+        store.value.lastRequestFailed = false;
+      }, 5000);
+    }
+  }
+);
 </script>
 
 <template>
@@ -117,8 +134,6 @@ setInterval(() => {
       icon-left
       :button-props="{
         class: `fr-btn--tertiary-no-outline ${dropdownIcon}`,
-        'aria-live': !systemStore.isOnline ? 'assertive' : 'polite',
-        role: 'alert',
         style: !systemStore.isOnline
           ? 'color: var(--text-default-error);'
           : undefined
@@ -132,6 +147,10 @@ setInterval(() => {
         Dernier enregistrement {{ relativeLastSaveDate }}
       </p>
     </Dropdown>
+
+    <p class="fr-sr-only" aria-live="polite" role="alert">
+      {{ saveText }}
+    </p>
   </div>
 </template>
 

diff --git a/confiture-web-app/src/components/layout/SiteFooter.vue b/confiture-web-app/src/components/layout/SiteFooter.vue
@@ -35,7 +35,7 @@ const bottomLinks = [
       <div class="fr-container">
         <div class="fr-grid-row fr-grid-row--start fr-grid-row--gutters">
           <div class="fr-col-12 fr-col-sm-3 fr-col-md-2">
-            <h3 class="fr-footer__top-cat">Nouveautés</h3>
+            <p class="fr-footer__top-cat">Nouveautés</p>
             <ul class="fr-footer__top-list">
               <li>
                 <RouterLink

diff --git a/confiture-web-app/src/components/report/ReportErrorCriterium.vue b/confiture-web-app/src/components/report/ReportErrorCriterium.vue
@@ -28,10 +28,10 @@ function getCriteriumTitle(topicNumber: number, criteriumNumber: number) {
 
 <template>
   <div>
-    <p class="fr-text--lg fr-text--bold criterium-title fr-mb-3v">
+    <h4 class="fr-text--lg fr-text--bold criterium-title fr-mb-3v">
       {{ error.topic }}.{{ error.criterium }}&nbsp;
       <span v-html="getCriteriumTitle(error.topic, error.criterium)" />
-    </p>
+    </h4>
 
     <ul class="fr-badges-group fr-mb-2w">
       <li>

diff --git a/confiture-web-app/src/components/report/ReportErrors.vue b/confiture-web-app/src/components/report/ReportErrors.vue
@@ -207,10 +207,11 @@ function resetFilters() {
     </template>
 
     <template v-if="transverseErrors.topics.length" #transverse-data>
+      <h2 class="fr-sr-only">Détails des non-conformités</h2>
       <section class="fr-mb-8w">
-        <h2 id="errors_elements-transverses" class="fr-h3 fr-mb-2w page-title">
+        <h3 id="errors_elements-transverses" class="fr-h3 fr-mb-2w page-title">
           Éléments transverses
-        </h2>
+        </h3>
 
         <div v-for="(topic, i) in transverseErrors.topics" :key="topic.topic">
           <template v-for="(error, j) in topic.errors" :key="j">
@@ -233,9 +234,9 @@ function resetFilters() {
         :key="page.id"
         :class="{ 'fr-mb-8w': i !== pagesErrors.length - 1 }"
       >
-        <h2 :id="`errors_${page.id}`" class="fr-h3 fr-mb-2w page-title">
+        <h3 :id="`errors_${page.id}`" class="fr-h3 fr-mb-2w page-title">
           {{ page.name }}
-        </h2>
+        </h3>
         <a
           :href="page.url"
           class="fr-link fr-mb-4w page-url"

diff --git a/confiture-web-app/src/components/report/ReportImprovementCriterium.vue b/confiture-web-app/src/components/report/ReportImprovementCriterium.vue
@@ -30,10 +30,10 @@ function getCriteriumTitle(topicNumber: number, criteriumNumber: number) {
 
 <template>
   <div>
-    <p class="fr-text--lg fr-text--bold criterium-title fr-mb-3v">
+    <h4 class="fr-text--lg fr-text--bold criterium-title fr-mb-3v">
       {{ topic }}.{{ criterium }}&nbsp;
       <span v-html="getCriteriumTitle(topic, criterium)" />
-    </p>
+    </h4>
 
     <p
       class="fr-badge fr-badge--sm fr-badge--no-icon fr-mb-3v"

diff --git a/confiture-web-app/src/components/report/ReportImprovements.vue b/confiture-web-app/src/components/report/ReportImprovements.vue
@@ -40,13 +40,14 @@ const improvementsCount = computed(() => {
     :transverse-data="transverseImprovements"
   >
     <template #transverse-data>
+      <h2 class="fr-sr-only">Points d’amélioration</h2>
       <section v-if="transverseImprovements.topics.length > 0" class="fr-mb-8w">
-        <h2
+        <h3
           id="improvements_elements-transverses"
           class="fr-h3 fr-mb-2w page-title"
         >
           Éléments transverses
-        </h2>
+        </h3>
 
         <div
           v-for="(topic, i) in transverseImprovements.topics"
@@ -78,9 +79,9 @@ const improvementsCount = computed(() => {
         :key="page.id"
         :class="{ 'fr-mb-8w': i !== pagesImprovements.length - 1 }"
       >
-        <h2 :id="`improvements_${page.id}`" class="fr-h3 fr-mb-2w page-title">
+        <h3 :id="`improvements_${page.id}`" class="fr-h3 fr-mb-2w page-title">
           {{ page.name }}
-        </h2>
+        </h3>
         <a
           :href="page.url"
           class="fr-link page-url"

diff --git a/confiture-web-app/src/pages/audit/AuditGenerationPage.vue b/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
@@ -183,9 +183,9 @@ onBeforeUnmount(() => {
 });
 
 const pageTitle = computed(() => {
-  // Audit XXX - Page en cours « XXX » - X résultats pour « XXX »
+  // [audit name] - Page en cours « XXX » - X résultats pour « XXX »
   if (auditStore.currentAudit) {
-    let title = `Audit ${auditStore.currentAudit.procedureName}`;
+    let title = auditStore.currentAudit.procedureName;
 
     const tabName = ` - Page en cours « ${
       auditStore.currentAudit.pages.find(

diff --git a/confiture-web-app/src/store/audit.ts b/confiture-web-app/src/store/audit.ts
@@ -34,6 +34,7 @@ interface AuditStoreState {
    * Timestamp of the last moment `currentRequestCount` changed from a non-zero value to zero.
    */
   lastRequestSuccessEnd: number | null;
+  lastRequestFailed: boolean;
 }
 
 export const useAuditStore = defineStore("audit", {
@@ -45,7 +46,8 @@ export const useAuditStore = defineStore("audit", {
     entities: {},
     listing: [],
     currentRequestCount: 0,
-    lastRequestSuccessEnd: null
+    lastRequestSuccessEnd: null,
+    lastRequestFailed: false
   }),
   actions: {
     async createAudit(data: CreateAuditRequestData): Promise<Audit> {

diff --git a/confiture-web-app/src/store/results.ts b/confiture-web-app/src/store/results.ts
@@ -53,6 +53,7 @@ interface ResultsStoreState {
    * Timestamp of the last moment `currentRequestCount` changed from a non-zero value to zero.
    */
   lastRequestSuccessEnd: number | null;
+  lastRequestFailed: boolean;
 }
 
 export const useResultsStore = defineStore("results", {
@@ -62,7 +63,8 @@ export const useResultsStore = defineStore("results", {
       data: null,
       previousStatuses: {},
       currentRequestCount: 0,
-      lastRequestSuccessEnd: null
+      lastRequestSuccessEnd: null,
+      lastRequestFailed: false
     };
   },