Corrige les tickets d'accessibilité suite au contre audit (#478)

* fix fieldset/legend structure

closes #469

* replace @vueuse/head with @unhead/vue and fix dynamic title on generation page

* add topic number, criterium number and status to transverse switch label

* add current tab name to page title on step 3

* indicate active tab in markup on report page

* indicate active tab in markup on results and step 3 pages

* indicate active tab in markup on results and step 3 pages (2)

* Update confiture-web-app/src/pages/consult/ReportPage.vue

Co-authored-by: Adrien Boutigny <adrien@slash-tmp.dev>

* Update confiture-web-app/src/pages/consult/ReportPage.vue

Co-authored-by: Adrien Boutigny <adrien@slash-tmp.dev>

* Update confiture-web-app/src/pages/consult/ReportPage.vue

Co-authored-by: Adrien Boutigny <adrien@slash-tmp.dev>

* update changelog

---------

Co-authored-by: Adrien Boutigny <adrien@slash-tmp.dev>

Author: bellangerq

confiture-web-app/package.json

@@ -15,7 +15,7 @@
     "@gouvfr/dsfr": "1.9.0",
     "@sentry/tracing": "^7.37.2",
     "@sentry/vue": "^7.37.2",
-    "@vueuse/head": "^1.0.22",
+    "@unhead/vue": "^1.5.3",
     "chart.js": "^4.1.0",
     "dompurify": "^2.4.1",
     "ky": "^0.33.0",

confiture-web-app/src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { provide, ref, watch } from "vue";
 import { useRoute } from "vue-router";
-import { useHead } from "@vueuse/head";
+import { useHead } from "@unhead/vue";
 
 import Breadcrumb, { BreadcrumbLink } from "./components/Breadcrumb.vue";
 import ToastNotification from "./components/ToastNotification.vue";

confiture-web-app/src/assets/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.
 
+## 08/09/2023
+
+### Corrections 🐛
+
+- Corrige les problèmes d’accessibilité suite au contre-audit ([#478](https://github.com/DISIC/Ara/pull/478))
+
 ## 06/09/2023
 
 ### Corrections 🐛

confiture-web-app/src/components/AuditGeneralInformationsForm.vue

@@ -164,27 +164,26 @@ const route = useRoute();
         :key="i"
         class="fr-mt-4w fr-p-4w page-card"
       >
-        <div class="fr-mb-2w page-header">
-          <legend>
-            <h3 class="fr-h6 fr-mb-0">Page {{ i + 1 }}</h3>
-          </legend>
-
-          <button
-            class="fr-btn fr-btn--tertiary-no-outline"
-            type="button"
-            :disabled="pages.length === 1"
-            @click="deletePage(i)"
-          >
-            Supprimer
-            <span class="sr-only">la page {{ i + 1 }}</span>
-          </button>
-        </div>
+        <legend class="page-legend">
+          <h3 class="fr-h6 fr-mb-0">Page {{ i + 1 }}</h3>
+        </legend>
+
+        <button
+          class="fr-btn fr-btn--tertiary-no-outline page-delete-button"
+          type="button"
+          :disabled="pages.length === 1"
+          @click="deletePage(i)"
+        >
+          Supprimer
+          <span class="sr-only">la page {{ i + 1 }}</span>
+        </button>
 
         <DsfrField
           :id="`page-name-${i + 1}`"
           ref="pageNameFieldRefs"
           v-model="page.name"
           label="Nom de la page"
+          class="fr-mt-2w page-field"
         />
 
         <DsfrField
@@ -193,6 +192,7 @@ const route = useRoute();
           label="URL de la page"
           type="url"
           required
+          class="page-field"
         >
           <template #hint>
             L’URL de la page doit commencer par <code>https://</code>
@@ -304,14 +304,21 @@ const route = useRoute();
 
 .page-card {
   border: 1px solid var(--border-default-grey);
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: center;
 }
 
-.page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  flex-wrap: wrap;
+.page-legend {
+  float: left;
+}
+
+.page-delete-button {
+  justify-self: end;
+}
+
+.page-field {
+  grid-column: 1 / -1;
 }
 
 .auditor-fields {

confiture-web-app/src/components/AuditGenerationCriterium.vue

@@ -18,7 +18,7 @@ import CriteriumTestsAccordion from "./CriteriumTestsAccordion.vue";
 import { useResultsStore, useFiltersStore } from "../store";
 import { useNotifications } from "../composables/useNotifications";
 import RadioGroup, { RadioColor } from "./RadioGroup.vue";
-import { captureWithPayloads } from "../utils";
+import { captureWithPayloads, formatStatus } from "../utils";
 import { useIsOffline } from "../composables/useIsOffline";
 
 const store = useResultsStore();
@@ -265,7 +265,11 @@ const isOffline = useIsOffline();
           class="fr-toggle__label fr-pr-2w"
           :for="`applicable-all-pages-${uniqueId}`"
         >
-          Sur toutes les pages
+          <span class="sr-only">
+            Appliquer le statut {{ formatStatus(result.status) }} pour le
+            critère {{ topicNumber }}.{{ criterium.number }}
+          </span>
+          &nbsp;Sur toutes les pages
         </label>
       </div>
     </div>

confiture-web-app/src/components/AuditGenerationFilters.vue

@@ -2,6 +2,7 @@
 import { computed, watch, nextTick } from "vue";
 import { ref } from "vue";
 import { useFiltersStore, useResultsStore } from "../store";
+import { pluralize } from "../utils";
 
 defineProps<{
   topics: { title: string; number: number; value: number }[];
@@ -116,7 +117,8 @@ watch(
 
     <div role="alert" aria-live="polite">
       <p v-if="filterStore.search" class="fr-mt-2w fr-mb-1w">
-        {{ resultsCount }} {{ resultsCount !== 1 ? "résultats" : "résultat" }}
+        {{ resultsCount }}
+        {{ pluralize("résultat", "résultats", resultsCount) }}
       </p>
       <!-- FIXME: can't change color on dismissable tags. "fr-tag--blue-france" -->
     </div>

confiture-web-app/src/components/PageMeta.ts

@@ -1,5 +1,5 @@
 import { defineComponent } from "vue";
-import { useHead } from "@vueuse/head";
+import { useHead } from "@unhead/vue";
 
 const PageMeta = defineComponent({
   name: "PageMeta",
@@ -21,7 +21,7 @@ const PageMeta = defineComponent({
      * If no props are provided, defaults are used.
      */
     useHead({
-      title: props.title,
+      title: () => props.title ?? "",
       meta: [
         { name: "description", content: props.description },
         { name: "og:title", content: props.title },

confiture-web-app/src/components/ResultDetailsCard.vue

@@ -1,10 +1,18 @@
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import { slugify } from "../utils";
 
 defineProps<{
   title: string;
   tableData: string[][];
 }>();
+
+const currentDisplay = ref("chart");
+
+function updateCurrentDisplay(display: string) {
+  currentDisplay.value = display;
+}
 </script>
 
 <template>
@@ -19,44 +27,54 @@ defineProps<{
       >
         <li role="presentation">
           <button
-            :id="`tabpanel-table-${slugify(title)}`"
+            :id="`tabpanel-chart-${slugify(title)}`"
             class="fr-tabs__tab"
             tabindex="0"
             role="tab"
             aria-selected="true"
-            :aria-controls="`tabpanel-table-${slugify(title)}-panel`"
+            :aria-controls="`tabpanel-chart-${slugify(title)}-panel`"
           >
             Graphique
+            <span v-if="currentDisplay === 'chart'" class="sr-only"
+              >&nbsp;Actif</span
+            >
           </button>
         </li>
         <li role="presentation">
           <button
-            :id="`tabpanel-chart-${slugify(title)}`"
+            :id="`tabpanel-table-${slugify(title)}`"
             class="fr-tabs__tab"
             tabindex="-1"
             role="tab"
             aria-selected="false"
-            :aria-controls="`tabpanel-chart-${slugify(title)}-panel`"
+            :aria-controls="`tabpanel-table-${slugify(title)}-panel`"
           >
             Tableau
+            <span v-if="currentDisplay === 'table'" class="sr-only"
+              >&nbsp;Actif</span
+            >
           </button>
         </li>
       </ul>
       <div
-        :id="`tabpanel-table-${slugify(title)}-panel`"
-        class="fr-tabs__panel fr-tabs__panel--selected"
+        :id="`tabpanel-chart-${slugify(title)}-panel`"
+        class="fr-tabs__panel"
+        :class="{ 'fr-tabs__panel--selected': currentDisplay === 'chart' }"
         role="tabpanel"
-        :aria-labelledby="`tabpanel-table-${slugify(title)}`"
+        :aria-labelledby="`tabpanel-chart-${slugify(title)}`"
         tabindex="0"
+        v-on="{ 'dsfr.disclose': () => updateCurrentDisplay('chart') }"
       >
         <slot />
       </div>
       <div
-        :id="`tabpanel-chart-${slugify(title)}-panel`"
+        :id="`tabpanel-table-${slugify(title)}-panel`"
         class="fr-tabs__panel"
+        :class="{ 'fr-tabs__panel--selected': currentDisplay === 'table' }"
         role="tabpanel"
-        :aria-labelledby="`tabpanel-chart-${slugify(title)}`"
+        :aria-labelledby="`tabpanel-table-${slugify(title)}`"
         tabindex="0"
+        v-on="{ 'dsfr.disclose': () => updateCurrentDisplay('table') }"
       >
         <div class="fr-table fr-table--no-caption fr-mb-0">
           <table>

confiture-web-app/src/components/TestEnvironmentSelection/TestEnvironmentSelection.vue

@@ -280,22 +280,22 @@ function combineEnvironments(
       :key="i"
       class="fr-fieldset fr-m-0 fr-p-0 fr-mt-4w fr-p-4w env-card"
     >
-      <div class="fr-mb-2w env-header">
-        <legend>
-          <h3 class="fr-h6 fr-mb-0">Environnement {{ i + 1 }}</h3>
-        </legend>
-        <button
-          class="fr-btn fr-btn--tertiary-no-outline"
-          type="button"
-          :disabled="customEnvironments.length === 1"
-          @click="deleteEnvironment(i)"
-        >
-          Supprimer
-        </button>
-      </div>
-      <div class="fr-form-group">
+      <legend class="env-legend">
+        <h3 class="fr-h6 fr-mb-0">Environnement {{ i + 1 }}</h3>
+      </legend>
+      <button
+        class="fr-btn fr-btn--tertiary-no-outline env-delete-button"
+        type="button"
+        :disabled="customEnvironments.length === 1"
+        @click="deleteEnvironment(i)"
+      >
+        Supprimer
+      </button>
+      <div class="fr-form-group env-form">
         <fieldset class="fr-fieldset fr-fieldset--inline">
-          <legend class="fr-fieldset__legend fr-text--regular">Support</legend>
+          <legend class="fr-fieldset__legend fr-text--regular fr-mt-2w">
+            Support
+          </legend>
           <div class="fr-fieldset__content">
             <div class="fr-radio-group">
               <input
@@ -438,15 +438,21 @@ function combineEnvironments(
 
 .env-card {
   border: 1px solid var(--border-default-grey);
-  display: block;
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: center;
 }
 
-.env-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  flex-wrap: wrap;
+.env-legend {
+  float: left;
+}
+
+.env-delete-button {
+  justify-self: end;
+}
+
+.env-card > *:not(.env-legend, .env-delete-button) {
+  grid-column: 1 / -1;
 }
 
 @media (max-width: 992px) {

confiture-web-app/src/main.ts

@@ -1,7 +1,7 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import { marked } from "marked";
-import { createHead } from "@vueuse/head";
+import { createHead } from "@unhead/vue";
 // @ts-expect-error vue-matomo does not have any sort of typescript support :'(
 import Matomo from "vue-matomo";