Merge pull request #3138 from MTES-MCT/fix/3117-hidden-content

[FO - Formulaire] Accessibilité : ajout d'attributs pour bien préciser que certains éléments sont masqués
MTES-MCT · Oct 8, 2024 · db72119 · db72119
2 parents 5fe7675 + ebbcb7b
commit db72119
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 9 deletions.
diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormAddress.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormAddress.vue
@@ -35,6 +35,8 @@
       :id="idShow"
       label="Saisir une adresse manuellement"
       :customCss="buttonCss + ' btn-link fr-btn--icon-left fr-icon-edit-line'"
+      :aria-hidden="buttonCss == 'fr-hidden' ? true : undefined"
+      :hidden="buttonCss == 'fr-hidden' ? true : undefined"
       :action="actionShow"
       :clickEvent="handleClickButton"
     />
@@ -44,6 +46,8 @@
       :id="idSubscreen"
       label=""
       :customCss="subscreenCss + ' fr-mt-3v'"
+      :aria-hidden="subscreenCss == 'fr-hidden' ? true : undefined"
+      :hidden="subscreenCss == 'fr-hidden' ? true : undefined"
       :components="screens"
       v-model="formStore.data[idSubscreen]"
       :hasError="formStore.validationErrors[idSubscreen] !== undefined"

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormPhonefield.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormPhonefield.vue
@@ -48,14 +48,18 @@
     <SignalementFormButton
       :id="idShow"
       label="Ajouter un numéro"
-      :customCss="formStore.data[idSecond] === '' || formStore.data[idSecond] === undefined ? 'btn-link fr-btn--icon-left fr-icon-add-line' : 'btn-link fr-btn--icon-left fr-icon-add-line fr-hidden'"
+      :customCss="isHiddenSecond ? 'btn-link fr-btn--icon-left fr-icon-add-line' : 'btn-link fr-btn--icon-left fr-icon-add-line fr-hidden'"
+      :aria-hidden="isHiddenSecond ? undefined : true"
+      :hidden="isHiddenSecond ? undefined : true"
       :action="actionShow"
       :clickEvent="handleClickButton"
       />
 
     <fieldset
       :id=idSecondGroup
-      :class="[ 'fr-fieldset', formStore.data[idSecond] === undefined ? 'fr-hidden' : '' , hasErrorSecond ? 'fr-fieldset--error' : '']"
+      :class="[ 'fr-fieldset', isHiddenSecond ? 'fr-hidden' : '', hasErrorSecond ? 'fr-fieldset--error' : '']"
+      :aria-hidden="isHiddenSecond ? true : undefined"
+      :hidden="isHiddenSecond ? true : undefined"
       :aria-labelledby="id + '-legend-second'"
       >
       <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-col-12" :id="id + '-legend-second'">
@@ -161,6 +165,9 @@ export default defineComponent({
     },
     getSelectOptionLabel (countryCode:CountryCode) {
       return getCountryNameByCode(countryCode) + ' : +' + getCountryCallingCode(countryCode)
+    },
+    isHiddenSecond () {
+      return formStore.data[this.idSecond] === '' || formStore.data[this.idSecond] === undefined
     }
   },
   computed: {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormScreen.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormScreen.vue
@@ -39,7 +39,9 @@
         v-model="formStore.data[component.slug]"
         :hasError="formStore.validationErrors[component.slug] !== undefined"
         :error="formStore.validationErrors[component.slug]"
-        :class="{ 'fr-hidden': component.conditional && !formStore.shouldShowField(component.conditional.show) }"
+        :class="{ 'fr-hidden': !formStore.shouldShowField(component) }"
+        :aria-hidden="!formStore.shouldShowField(component) ? true : undefined"
+        :hidden="!formStore.shouldShowField(component) ? true : undefined"
         :autocomplete="component.autocomplete"
         :clickEvent="handleClickComponent"
         :handleClickComponent="handleClickComponent"
@@ -76,9 +78,11 @@
         :disabled="component.disabled"
         :multiple="component.multiple"
         v-model="formStore.data[component.slug]"
-        :hasError="formStore.validationErrors[component.slug]  !== undefined"
+        :hasError="formStore.validationErrors[component.slug] !== undefined"
         :error="formStore.validationErrors[component.slug]"
-        :class="{ 'fr-hidden': component.conditional && !formStore.shouldShowField(component.conditional.show) }"
+        :class="{ 'fr-hidden': !formStore.shouldShowField(component) }"
+        :aria-hidden="!formStore.shouldShowField(component) ? true : undefined"
+        :hidden="!formStore.shouldShowField(component) ? true : undefined"
         :clickEvent="handleClickComponent"
         :handleClickComponent="handleClickComponent"
         :access_focus="component.accessibility?.focus ?? false"
@@ -234,10 +238,14 @@ export default defineComponent({
       const componentToShow = document.querySelector('#' + slug)
       if (componentToShow) {
         componentToShow.classList.remove('fr-hidden')
+        componentToShow.removeAttribute('aria-hidden')
+        componentToShow.removeAttribute('hidden')
       }
       const buttonToHide = document.querySelector('#' + slugButton)
       if (buttonToHide) {
         buttonToHide.classList.add('fr-hidden')
+        buttonToHide.setAttribute('aria-hidden', 'true')
+        buttonToHide.setAttribute('hidden', 'true')
       }
     },
     toggleComponentBySlug (slug:string, isVisible:string) {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormSubscreen.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormSubscreen.vue
@@ -31,9 +31,11 @@
         :ariaControls="component.ariaControls"
         :tagWhenEdit="component.tagWhenEdit"
         v-model="formStore.data[component.slug]"
-        :hasError="formStore.validationErrors[component.slug]  !== undefined"
+        :hasError="formStore.validationErrors[component.slug] !== undefined"
         :error="formStore.validationErrors[component.slug]"
-        :class="{ 'fr-hidden': component.conditional && !formStore.shouldShowField(component.conditional.show) }"
+        :class="{ 'fr-hidden': !formStore.shouldShowField(component) }"
+        :aria-hidden="!formStore.shouldShowField(component) ? true : undefined"
+        :hidden="!formStore.shouldShowField(component) ? true : undefined"
         :clickEvent="handleClickComponent"
       />
     </div>

diff --git a/assets/scripts/vue/components/signalement-form/store.ts b/assets/scripts/vue/components/signalement-form/store.ts
@@ -116,8 +116,11 @@ const formStore: FormStore = reactive({
   updateData (key: string, value: any) {
     formStore.data[key] = value
   },
-  shouldShowField (conditional: string) {
-    return computed(() => eval(conditional)).value
+  shouldShowField (component: any) {
+    if (!component.conditional) {
+      return true
+    }
+    return computed(() => eval(component.conditional.show)).value
   },
   preprocessScreen (screenBodyComponents: any): Component[] {
     const repeatedComponents: Component[] = []