Merge pull request #10646 from colinux/faq-allow-custom-image-attributes

Accessibilité: permet au markdown FAQ d'intégrer n'importe quel attribut html dans les `<img>`

app/lib/redcarpet/trusted_renderer.rb

@@ -34,8 +34,26 @@ def autolink(link, link_type)
       end
     end
 
-    def image(link, title, alt)
-      view_context.image_tag(link, title:, alt:, loading: :lazy)
+    def image(link, title, alt_text)
+      # Extrait les attributs personnalisés s'ils existent sous la forme { aria-hidden=true } dans les []
+      custom_attributes = {}
+      if alt_text =~ /\s*\{(.+)\}$/
+        attr_string = Regexp.last_match(1)
+        alt_text = alt_text.sub(/\s*\{.+\}$/, '').strip
+        attr_string.split(' ').each do |attr|
+          key, value = attr.split('=')
+          custom_attributes[key.strip] = value.strip.delete('"')
+        end
+      end
+
+      # Combine les attributs standard et personnalisés
+      image_options = {
+        alt: alt_text,
+        title:,
+        loading: :lazy
+      }.merge(custom_attributes)
+
+      view_context.image_tag(link, image_options)
     end
 
     # rubocop:disable Rails/OutputSafety

doc/faqs/administrateur/ajouter-plusieurs-administrateurs-sur-une-meme-demarche.fr.md

@@ -13,7 +13,7 @@ Il est possible d’avoir plusieurs administrateurs sur une même démarche. Cel
 
 **Nous conseillons vivement à chaque administrateur de nommer un co-administrateur pour assurer une gestion continue de la démarche.**
 
-![Capture d’écran de la page gérant la liste des administrateurs](faq/administrateur-add-administrateur.png)
+![Capture d’écran de la page gérant la liste des administrateurs {aria-hidden="true"}](faq/administrateur-add-administrateur.png)
 
 ## Comment ajouter un autre administrateur sur votre démarche ?
 

doc/faqs/administrateur/comment-clore-une-demarche.fr.md

@@ -17,21 +17,21 @@ Cliquez sur le bouton **« Clore »** situé à droite de la démarche.
 
 Bien que l’accès à la démarche soit restreint, les dossiers déjà déposés ne sont pas affectés et leur instruction peut se poursuivre normalement.
 
-![Capture d’écran de la page de clôture de la demarche](faq/administrateur-procedure-action-close.png)
+![Capture d’écran de la page de clôture de la demarche {aria-hidden="true"}](faq/administrateur-procedure-action-close.png)
 
 ## Informer les usagers accédant à la démarche close
 
  Un usager qui suit un lien vers la démarche sera informé qu’elle est close. Cependant au moment de la clôture vous pouvez indiquer quelle démarche la remplace (nous le redigerons vers celle-ci), ou la raison pour laquelle est close.
 
-![Capture d'écran du remplacement de démarche](faq/administrateur-procedure-close-replace.png)
+![Capture d'écran du remplacement de démarche {aria-hidden="true"}](faq/administrateur-procedure-close-replace.png)
 
-![Capture d'écran pour saisir le motif de cloture de démarche](faq/administrateur-procedure-close-message.png)
+![Capture d'écran pour saisir le motif de cloture de démarche {aria-hidden="true"}](faq/administrateur-procedure-close-message.png)
 
 ## Comment prévoir la clôture automatique d’une démarche ?
 
 Si vous anticipez la clôture de votre démarche à une date et/ou heure spécifique, il est possible de programmer cette clôture. Rendez-vous dans l’onglet **« Présentation »** de votre démarche, section **« Options avancées »**, pour définir les paramètres de clôture automatique.
 
-![Capture d’écran de la configuration de fermeture à une date donnée](faq/administrateur-procedure-auto-archive.png)
+![Capture d’écran de la configuration de fermeture à une date donnée {aria-hidden="true"}](faq/administrateur-procedure-auto-archive.png)
 
 Lorsqu’une démarche se clôture automatiquement, tous les dossiers en construction passent automatiquement au statut *« en instruction »* à la date limite de dépôt des dossiers.
 

doc/faqs/administrateur/comment-comprendre-mon-tableau-de-bord-administrateur.fr.md

@@ -11,7 +11,7 @@ title: "Comment comprendre mon tableau de bord administrateur ?"
 
 Votre tableau de bord présente l'ensemble de vos démarches, classées en 4 catégories :
 
-![Capture d'écran du tableau de bord administrateur](faq/administrateur-procedures-list-header.png)
+![Capture d'écran du tableau de bord administrateur {aria-hidden="true"}](faq/administrateur-procedures-list-header.png)
 
 ## Publiées
 

doc/faqs/administrateur/comment-creer-une-demarche-declarative.fr.md

@@ -22,6 +22,6 @@ Une démarche déclarative est une démarche pour laquelle certaines étapes de
 
 Pour configurer une démarche comme déclarative, accédez à la partie **« Présentation »** de la démarche depuis le tableau de bord administrateur. En bas de la page, dans l’onglet **« Options avancées »**, sélectionnez l’option souhaitée (*« En instruction »* ou *« Accepté »*) et enregistrez les modifications.
 
-![Capture d'écran de la page de configuration de la demarche déclarative](faq/administrateur-create-declarative.png)
+![Capture d'écran de la page de configuration de la demarche déclarative {aria-hidden="true"}](faq/administrateur-create-declarative.png)
 
 Vous avez la possibilité de revenir en arrière ou de modifier le type de démarche déclarative à tout moment, même après publication.

doc/faqs/administrateur/comment-limiter-une-demarche-dans-le-temps.fr.md

@@ -22,6 +22,6 @@ Pour mettre en place la clôture automatique :
 1. Accédez à l’onglet « _Présentation_ » de votre démarche depuis le tableau de bord administrateur.
 2. Dans les « _Options avancées_ », recherchez le champ intitulé « _Date limite de dépôt des dossiers_ » et renseignez la date souhaitée.
 
-![Saisie de la date limite de dépôt](faq/administrateur-set-auto-close-date.png)
+![Saisie de la date limite de dépôt {aria-hidden="true"}](faq/administrateur-set-auto-close-date.png)
 
 **Attention** : Si vous fixez la date de clôture au « 14 septembre », la fin de dépôt des dossiers sera effective le **14 septembre à 23h59 (heure de Paris)**.

doc/faqs/administrateur/comment-mettre-en-forme-le-texte-de-ma-demarche.fr.md

@@ -33,12 +33,12 @@ Pour cela, utilisez les balises HTML, identifiées par les caractères `<` et `>
   - Exemple : « `Mon texte en <em>italique</em>` » affiche « Mon texte en *italique* »
 
 - **Souligner un texte**
-  - Balise ouvrante : `<u>` 
+  - Balise ouvrante : `<u>`
   - Balise fermante : `</u>`
   - Exemple : `« Mon texte <u>souligné</u> »` affiche « Mon texte <u>souligné</u> »
 
 - **Mettre un texte en gras**
-  - Balise ouvrante : `<strong>` 
+  - Balise ouvrante : `<strong>`
   - Balise fermante : `</strong>`
   - Exemple : `« Mon texte en <strong>gras</strong> »` donne « Mon texte en **gras** »
 
@@ -53,8 +53,8 @@ Pour cela, utilisez les balises HTML, identifiées par les caractères `<` et `>
 
 Exemple dans la description de la démarche :
 
-![Démonstration de texte qui contient des balises HTML de mises en forme](faq/administrateur-example-markup.png)
+![Saisie de texte utilisant les balises b, i et u](faq/administrateur-example-markup.png)
 
 Rendu côté usager :
 
-![Aperçu du même texte dans la description de la démarche lisible par l’usager](faq/administrateur-example-markup-preview.png)
+![Aperçu de ce même texte faisant état d'une mise en gras, d'une mise en italique et d'un soulignement](faq/administrateur-example-markup-preview.png)

doc/faqs/administrateur/guide-de-bonnes-pratiques-pour-tester-une-demarche.fr.md

@@ -24,29 +24,29 @@ Le test d’une démarche se déroule en trois étapes :
 2. le test de la partie instructeur (instruction du dossier)
 3. le test des fonctionnalités secondaires
 
-Vous pouvez faire tester la partie usager (étape 1) et instructeur (étape 2) par des collaborateurs. Cependant, nous vous recommandons fortement de les tester vous-même une première fois. 
+Vous pouvez faire tester la partie usager (étape 1) et instructeur (étape 2) par des collaborateurs. Cependant, nous vous recommandons fortement de les tester vous-même une première fois.
 
 **Vous pouvez effectuer toutes les modifications que vous souhaitez sur votre démarche pendant cette phase de test.**
 
 Bien évidemment, avant de tester la démarche, il faut l’avoir créé. Pour cela, vous pouvez vous aider de [notre guide de la dématérialisation réussie via %{application_name}](https://456404736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-L7_aKvpAJdAIEfxHudA%2Fuploads%2FGJm7S7LVjHPKVlMCE36e%2FGuide%20des%20bonnes%20pratiques%20démarches-simplifiees.pdf?alt=media&token=228e63c7-a168-4656-9cda-3f53a10645c2). Vous pouvez également consulter la documentation [Comment créer une nouvelle démarche](https://doc.demarches-simplifiees.fr/tutoriels/tutoriel-administrateur)
 
 ## Étape 1 : Déposer un dossier de test côté usager
 
-Vous devez commencer par cette étape afin de tester le parcours d’un usager pour déposer un dossier. De plus, sans dossier déposé, vous ne pourrez pas tester les fonctionnalités relatives à l’instruction. 
+Vous devez commencer par cette étape afin de tester le parcours d’un usager pour déposer un dossier. De plus, sans dossier déposé, vous ne pourrez pas tester les fonctionnalités relatives à l’instruction.
 
 1. Utilisez le bouton **« Tester la démarche »** (ou suivez le lien de la démarche), accessibles depuis votre interface administrateur. Toute personne ayant connaissance du lien pourra remplir des dossiers test sur votre démarche qui seront supprimés plus tard.
-  ![Bouton Tester la démarche depuis la tableau de bord de la démarche](faq/administrateur-procedure-test-button.png)
-  ![Affichage du lien de test de la démarche](faq/administrateur-procedure-test-link.png)
+  ![Bouton Tester la démarche depuis la tableau de bord de la démarche {aria-hidden="true"}](faq/administrateur-procedure-test-button.png)
+  ![Affichage du lien de test de la démarche {aria-hidden="true"}](faq/administrateur-procedure-test-link.png)
 
 2. Commencez à remplir votre dossier en suivant le bouton **« Commencer la démarche »**.
-  ![Page d’accueil usager de la démarche](faq/administrateur-procedure-test-commencer.png)
+  ![Page d’accueil usager de la démarche {aria-hidden="true"}](faq/administrateur-procedure-test-commencer.png)
 
 3. Après avoir complété le dossier et éventuellement testé les fonctionnalités dédiées à l'interface usagers (invitation à compléter un dossier…), cliquez sur **« Déposer le dossier »** pour finaliser le dépôt et voir le message de confirmation de dépôt.
-  ![Test de la démarche par l’usager](faq/administrateur-procedure-test-usager.png)
+  ![Test de la démarche par l’usager {aria-hidden="true"}](faq/administrateur-procedure-test-usager.png)
 
 Une fois votre dossier de test déposé, un message de confirmation de dépôt sera affiché :
 
-![Message de confirmation de dépôt d’un dossier](faq/administrateur-procedure-test-thanks.png)
+![Message de confirmation de dépôt d’un dossier {aria-hidden="true"}](faq/administrateur-procedure-test-thanks.png)
 
 N’hésitez pas à [transmettre le lien vers la démarche test à vos collègues](/faq/administrateur/faire-tester-une-demarche-par-un-collegue) afin qu’ils puissent la tester et vous transmettre leur retour. Gardez à l’esprit que **tous les dossiers déposés pendant le test seront supprimés** lorsque la démarche sera modifiée ou publiée.
 
@@ -56,23 +56,23 @@ Vous avez déposé à l’étape précédente un premier dossier. Rendez-vous d
 
 Passez à l’interface instructeur via le lien [%{application_base_url}/procedures](/procedures) ou en changeant de profil depuis le menu en haut à droite en cliquant sur votre adresse email.
 
-![Menu pour passer instructeur](faq/administrateur-profile-switch.png)
+![Menu pour passer instructeur {aria-hidden="true"}](faq/administrateur-profile-switch.png)
 
 ⚠️ **Vous devez être instructeur de la démarche pour accéder aux dossiers déposés**. Par défaut, en tant que créateur de la démarche (administrateur), vous êtes instructeur de celle-ci. Si vous ne testez pas vous-même cette partie, ajoutez votre collaborateur en tant qu’instructeur.
 
-Vous arrivez alors sur l’interface instructeur. Il vous suffit de cliquer sur l’onglet **« En test »** puis suivez le lien de votre démarche avec un dossier **« à suivre »** . 
+Vous arrivez alors sur l’interface instructeur. Il vous suffit de cliquer sur l’onglet **« En test »** puis suivez le lien de votre démarche avec un dossier **« à suivre »** .
 
-![Page d’accueil instructeur de la démarche](faq/administrateur-procedures-list.png)
+![Page d’accueil instructeur de la démarche {aria-hidden="true"}](faq/administrateur-procedures-list.png)
 
 Trouvez le dossier à suivre, puis testez l’instruction du dossier.
 
-![Dossier à suivre](faq/administrateur-test-instruction-dossiers-list.png)
+![Dossier à suivre {aria-hidden="true"}](faq/administrateur-test-instruction-dossiers-list.png)
 
 Voici le tutoriel pour instruire un dossier en tant qu’instructeur : [Tutoriel Instructeur](https://doc.demarches-simplifiees.fr/tutoriels/tutoriel-instructeur)
 
 ## Étape 3 : Tester les fonctionnalités secondaires
 
-Vous pourrez ici tester différents éléments secondaires : 
+Vous pourrez ici tester différents éléments secondaires :
 
 - Demande d’**avis externe** (partie instruction) . Pour plus d’information, vous pouvez consulter [notre tutoriel expert invité](https://doc.demarches-simplifiees.fr/tutoriels/tutoriel-expert-invite)
 - **Vérifiez les e-mails** d’accusé de réception, de passage en instruction, d’acceptation, de refus et de classement sans suite (partie usager)
@@ -89,7 +89,7 @@ En cas d’erreur et/ou en fonction des retours de vos collègues suite à la ph
 Après avoir minutieusement testé votre démarche, il est temps de la rendre accessible à tous en la publiant.
 
 1. **Accédez au tableau de bord administrateur** de votre démarche et cliquez sur le bouton **« Publier »** situé en haut à droite.
-  ![Bouton Publier](faq/administrateur-procedure-test-publish.png)
+  ![Bouton Publier {aria-hidden="true"}](faq/administrateur-procedure-test-publish.png)
 
 2. **Personnalisez le lien** du formulaire pour le diffuser plus facilement à vos usagers. Cette étape vous permet de simplifier l’accès à votre démarche.
 

doc/faqs/administrateur/je-ne-trouve-pas-ma-demarche-dans-le-catalogue-de-demarches.fr.md

@@ -12,7 +12,7 @@ title: "Je ne trouve pas ma démarche dans le catalogue de démarches"
 Si vous avez publié votre démarche et qu’un collègue souhaite la cloner mais ne la trouve pas sous « _Nouvelle démarche_ » dans le catalogue _Créer une nouvelle démarche à partir d’une démarche existante_, voici quelques étapes à suivre :
 
 1. Utiliser la fonction de recherche du navigateur (Ctrl + F) pour chercher par mot clé plutôt que par le titre complet de la démarche et vérifier sa présence.
-2. Si la démarche n’est pas trouvée, cela peut être dû au critère de répertoriation qui requiert que 30 dossiers soient déposés sur la démarche pour figurer dans le catalogue. 
+2. Si la démarche n’est pas trouvée, cela peut être dû au critère de répertoriation qui requiert que 30 dossiers soient déposés sur la démarche pour figurer dans le catalogue.
 
 ## Partager la démarche
 Dans cette situation, vous pouvez partager directement votre démarche avec votre collègue :
@@ -25,11 +25,11 @@ Dans cette situation, vous pouvez partager directement votre démarche avec votr
 
 Votre collègue trouvera alors une copie de votre démarche dans ses démarches « En test ».
 
-![Capture d’écran du bouton Envoyer une copie de ma démarche](faq/administrateur-button-copy-procedure.png)
+![Capture d’écran du bouton Envoyer une copie de ma démarche {aria-hidden="true"}](faq/administrateur-button-copy-procedure.png)
 
 ## Recherche dans « Toutes les démarches »
 
 Vous pouvez également rechercher la démarche depuis la page « _Toutes les démarches_ », où il est possible de filtrer les démarches par zones, statut, SIRET ou tags, y compris celles avec moins de 30 dossiers déposés.
 
-![Capture d’écran du lien vers la page Toute les démarches](faq/administrateur-link-all-procedures.png)
-![Capture d’écran de la page Toutes les démarches](faq/administrateur-all-procedures.png)
+![Capture d’écran du lien vers la page Toute les démarches {aria-hidden="true"}](faq/administrateur-link-all-procedures.png)
+![Capture d’écran de la page Toutes les démarches {aria-hidden="true"}](faq/administrateur-all-procedures.png)

doc/faqs/administrateur/les-blocs-repetables.fr.md

@@ -20,19 +20,19 @@ Imaginez une situation où l’usager doit saisir plusieurs fois une commune. L
 ## Comment configurer un bloc répétable ?
 
 1. Sélectionnez comme type de champ le **« Bloc répétable »** et ajoutez son libellé. Dans notre exemple ce sera *Localisation*.
-  ![Exemple de choix du champ Bloc répétable](faq/administrateur-list-champs-repetition.png)
+  ![Exemple de choix du champ Bloc répétable {aria-hidden="true"}](faq/administrateur-list-champs-repetition.png)
 
 2. Renseignez les différents champs à inclure au sein de ce bloc répétable en cliquant sur **« Ajouter un champ »** à l’intérieur du bloc. Vous pouvez ajouter tous les types de champ (texte, zone de texte, entier, etc…)
   Dans l’exemple d’une liste de communes, l’administrateur ajoute donc le champ « Commune » mais d’autres champs pourraient être ajoutés.
-  ![Exemple de configuration d’une répétition](faq/administrateur-repetition-create.png)
+  ![Exemple de configuration d’une répétition {aria-hidden="true"}](faq/administrateur-repetition-create.png)
 
 ## Comment fonctionne-t-il pour l’usager ?
 
 - L’usager voit le champ répétable, vide par défaut, et peut cliquer sur **« Ajouter un élément »** pour saisir une nouvelle instance du bloc.
-  ![Vue usager vide du bloc répétable](faq/administrateur-repetition-view-usager-empty.png)
+  ![Vue usager vide du bloc répétable {aria-hidden="true"}](faq/administrateur-repetition-view-usager-empty.png)
 
 - Après avoir ajouté un élément, il peut continuer à ajouter de nouvelles valeurs aussi souvent que nécessaire.
-  ![Vue usager remplie avec 2 communes du bloc répétable](faq/administrateur-repetition-view-usager-fill.png)
+  ![Vue usager remplie avec 2 communes du bloc répétable {aria-hidden="true"}](faq/administrateur-repetition-view-usager-fill.png)
 
 - Si nécessaire, l’usager a la possibilité de supprimer un élément précédemment ajouté.
 

doc/faqs/instructeur/a-quoi-correspondent-les-differentes-categories-de-dossiers.fr.md

@@ -20,4 +20,4 @@ Pour chaque démarche, les dossiers sont répartis dans plusieurs onglets :
 
 Notez qu’**un dossier peut être suivi par plusieurs instructeurs**. Vous pourrez donc retrouver les dossiers que vous ne suivez pas dans l’onglet **au total**. La somme des onglets *à suivre*, *suivis* et *traités* n’est donc pas nécessairement égale au nombre affiché *au total*.
 
-![Différents onglets répartissant les dossiers d’une démarche.](faq/instructeur-procedure-show.png)
+![Différents onglets répartissant les dossiers d’une démarche {aria-hidden="true"}](faq/instructeur-procedure-show.png)

doc/faqs/instructeur/comment-ajouter-un-justificatif-lors-de-l-acceptation-d-un-dossier.fr.md

@@ -11,7 +11,7 @@ title: "Comment ajouter un justificatif lors de l’acceptation d’un dossier"
 
 Lorsque vous acceptez, refusez ou classez sans suite un dossier, il est possible de joindre un document après avoir indiqué la raison derrière ce choix.
 
-![L’interface de l’instructeur pour accepter, refuser ou classer sans suite un dossier.](faq/instructeur-accepter-add-justificatif.png)
+![L’interface de l’instructeur pour accepter, refuser ou classer sans suite un dossier {aria-hidden="true"}](faq/instructeur-accepter-add-justificatif.png)
 
 ## Note importante