feat(frontend): integrating dsfr faq #4063

hbalty · 2026-01-24T01:32:01Z

No description provided.

sonarqubecloud · 2026-01-24T01:32:42Z

Quality Gate failed

Failed conditions
20.4% Duplication on New Code (required ≤ 15%)
D Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

revu-bot

Summary

This PR refactors the FAQ section to use DSFR components with lazy-loaded routing and splits content into multiple components. The implementation is generally solid with good structure and accessibility considerations.

Key Changes

✅ Implements lazy-loaded routing for FAQ sections
✅ Splits FAQ into logical components (Discover, Usage, Security, Fiches, Video Tutorials)
✅ Uses DSFR accordion components for better UX
✅ Maintains accessibility with proper ARIA attributes

Issues Found

CRITICAL: Duplicate accordion IDs will break accessibility and functionality
IMPORTANT: Missing CommonModule import in routing module
IMPORTANT: Inconsistent email obfuscation pattern
MINOR: Commented-out code should be removed before merge

The refactoring improves maintainability significantly by breaking down a large monolithic FAQ into manageable components.

revu-bot · 2026-01-24T01:33:10Z

packages/frontend/src/app/modules/general/components/faq/faq-routing.module.ts

+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+import { FaqComponent } from "./faq.component";
+import { FaqSecurityComponent } from "./fragments/faq-security/faq-security.component";
+import { FaqDiscoverComponent } from "./fragments/faq-discover/faq-discover.component";
+import { FaqUsageComponent } from "./fragments/faq-usage/faq-usage.component";
+import { FaqFichesComponent } from "./fragments/faq-fiches/faq-fiches.component";
+import { FaqVideoTutorialComponent } from "./fragments/faq-video-tutorial/faq-video-tutorial.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: FaqComponent,
+    children: [
+      { path: "", redirectTo: "decouvrir-domifa", pathMatch: "full" },
+      { path: "decouvrir-domifa", component: FaqDiscoverComponent },
+      { path: "utiliser-domifa", component: FaqUsageComponent },
+      { path: "securite-et-confidentialite", component: FaqSecurityComponent },
+      { path: "fiches-pratiques", component: FaqFichesComponent },
+      { path: "tutoriels-videos", component: FaqVideoTutorialComponent },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class FaqRoutingModule {}


[IMPORTANT] Missing CommonModule import for standalone components

Why it matters:

The routing module references standalone components that use CommonModule

Without proper imports, the lazy-loaded module may fail at runtime

Angular's module system requires explicit imports for dependencies

Recommendation:
While standalone components import CommonModule themselves, ensure the routing module is properly configured. Consider adding explicit imports if you encounter runtime issues.

revu-bot · 2026-01-24T01:33:11Z

...frontend/src/app/modules/general/components/faq/fragments/faq-usage/faq-usage.component.html

+      <button
+        type="button"
+        class="fr-accordion__btn"
+        aria-expanded="false"
+        aria-controls="accordion-usage-9"
+      >
+        Comment modifier les informations de la structure (adresse, nom du
+        responsable, paramètres) ?
+      </button>
+    </div>
+    <div class="fr-collapse" id="accordion-usage-9">


[CRITICAL] Duplicate accordion IDs break accessibility and functionality

Why it matters:

Multiple accordions use id="accordion-usage-9" through the file

Duplicate IDs violate HTML standards and break ARIA relationships

Screen readers and keyboard navigation will malfunction

JavaScript accordion behavior will be unpredictable

Impact:

Accessibility compliance failure

Broken user experience for keyboard/screen reader users

Only the first accordion with each ID will work correctly

Required action:
Ensure each accordion section has a unique ID. The IDs should increment sequentially (accordion-usage-1, accordion-usage-2, etc.) throughout the entire file.

Suggested change

<button

type="button"

class="fr-accordion__btn"

aria-expanded="false"

aria-controls="accordion-usage-9"

>

Comment modifier les informations de la structure (adresse, nom du

responsable, paramètres) ?

</button>

</div>

<div class="fr-collapse" id="accordion-usage-9">

<button

type="button"

class="fr-accordion__btn"

aria-expanded="false"

aria-controls="accordion-usage-9"

>

Comment modifier les informations de la structure (adresse, nom du

responsable, paramètres) ?

</button>

</div>

<div class="fr-collapse" id="accordion-usage-9">

revu-bot · 2026-01-24T01:33:12Z

...nd/src/app/modules/general/components/faq/fragments/faq-security/faq-security.component.html

+        Une structure peut à tout moment arrêter d'utiliser DomiFa. Dans son
+        compte administrateur, la structure peut exporter sa base de données si
+        besoin. Elle peut aussi supprimer l'entièreté des dossiers de
+        domiciliation sur la plateforme.
+      </p>
+      <p>
+        Pour une demande de suppression d'un compte structure, merci de nous
+        envoyer un message à l'adresse
+        <a
+          href="mailto:contact.domifa{{ '@' }}fabrique.social.gouv.fr"
+          title="Envoyer un email à l'équipe DomiFa"


[IMPORTANT] Inconsistent email obfuscation pattern

Why it matters:

This file uses {{ '@' }} and {{ "@" }} for email obfuscation

The faq-usage component uses plain @ in email addresses

Inconsistent patterns make maintenance harder and may indicate incomplete security measures

Recommendation:
Standardize the email obfuscation approach across all FAQ components. If obfuscation is needed for anti-spam, apply it consistently. If not needed, remove the template interpolation for cleaner code.

revu-bot · 2026-01-24T01:33:13Z

...ontend/src/app/modules/general/components/faq/fragments/faq-fiches/faq-fiches.component.html

+<!-- 
+    ***************************** Remove Block *****************************  
+    TODO : remettre le commentaires une fois que les fiches sont prêtes à être publiés 
+    N'oubliez pas de mettre à jour les lien en cas de changement de support de partage (Ex: Docs)
+    ***************************** *********** *****************************  
+  -->
+
+<h2 class="fr-h2">Fiches pratiques</h2>
+
+<div class="fr-callout">
+  <h3 class="fr-callout__title">Bientôt</h3>
+  <p class="fr-callout__text">Fiches pratiques à venir</p>
+</div>
+<!-- 
+    ***************************** End Temporary Block ***************************** 
+-->


[MINOR] Remove commented-out code before merging

Why it matters:

Large blocks of commented code (lines 1-15 and 18-296) reduce readability

Version control already preserves history

The TODO comment suggests this is temporary scaffolding

Recommendation:
If the fiches are truly coming soon, keep only the callout message. Remove all commented HTML to keep the codebase clean. You can always retrieve this code from git history when needed.

Suggested change



<h2 class="fr-h2">Fiches pratiques</h2>

<div class="fr-callout">

<h3 class="fr-callout__title">Bientôt</h3>

<p class="fr-callout__text">Fiches pratiques à venir</p>

</div>



<h2 class="fr-h2">Fiches pratiques</h2>

<div class="fr-callout">

<h3 class="fr-callout__title">Bientôt</h3>

<p class="fr-callout__text">Fiches pratiques à venir</p>

</div>

revu-bot · 2026-01-24T01:33:14Z

...odules/general/components/faq/fragments/faq-video-tutorial/faq-video-tutorial.component.html

+<h2 class="fr-h2">Tutoriels vidéos</h2>
+<!-- 
+    ***************************** Remove Block *****************************  
+    TODO : 
+      - Les mettres les vidéos et leurs transcriptions
+      - Modifier les titles ID 
+      - Modifier les liens / urls / chemins video
+      - Modifier les ids et les aria-controls pour lier les transcripts avec les vidéos
+
+    ***************************** *********** *****************************  
+  -->
+<div class="fr-callout">
+  <h3 class="fr-callout__title">Bientôt</h3>
+  <p class="fr-callout__text">Vidéos tutoriels à venir</p>
+</div>
+<!-- 
+    ***************************** End Temporary Block ***************************** 
+-->


[MINOR] Remove commented-out video tutorial scaffolding

Why it matters:

Similar to faq-fiches, this contains extensive commented code (lines 1-14 and 18-628)

The TODO indicates this is placeholder content

Keeping commented code bloats the file unnecessarily

Recommendation:
Remove all commented HTML scaffolding. Keep only the callout message indicating videos are coming soon.

Suggested change

<h2 class="fr-h2">Tutoriels vidéos</h2>



<div class="fr-callout">

<h3 class="fr-callout__title">Bientôt</h3>

<p class="fr-callout__text">Vidéos tutoriels à venir</p>

</div>



<h2 class="fr-h2">Tutoriels vidéos</h2>

<div class="fr-callout">

<h3 class="fr-callout__title">Bientôt</h3>

<p class="fr-callout__text">Vidéos tutoriels à venir</p>

</div>

revu-bot · 2026-01-24T01:33:15Z

packages/frontend/src/app/modules/general/components/faq/faq.component.html

+</div>
+
+<!-- 
 <div class="head-page py-4">


[MINOR] Remove old FAQ implementation

Why it matters:

484 lines of commented-out legacy code (lines 118-602)

This is the old FAQ implementation that's been replaced

Keeping it makes the file unnecessarily large and harder to navigate

Recommendation:
Delete the entire commented block. The old implementation is preserved in git history if needed for reference.

Suggested change

</div>

<!--

<div class="head-page py-4">

</div>

tokenbureau · 2026-01-24T01:41:01Z

🎉 Deployment for commit 3943b3b :

Ingresses

Docker images

📦 docker pull harbor.fabrique.social.gouv.fr/domifa/domifa/backend:sha-3943b3b7458f1dd455ce0409f7a3c4d2bd897f41
📦 docker pull harbor.fabrique.social.gouv.fr/domifa/domifa/frontend:sha-3943b3b7458f1dd455ce0409f7a3c4d2bd897f41
📦 docker pull harbor.fabrique.social.gouv.fr/domifa/domifa/portail-admins:sha-3943b3b7458f1dd455ce0409f7a3c4d2bd897f41
📦 docker pull harbor.fabrique.social.gouv.fr/domifa/domifa/portail-usagers:sha-3943b3b7458f1dd455ce0409f7a3c4d2bd897f41

Debug

feat(frontend): integrating dsfr faq

3943b3b

revu-bot bot requested a review from revu-bot January 24, 2026 01:32

revu-bot reviewed Jan 24, 2026

View reviewed changes

hbalty temporarily deployed to review-auto January 24, 2026 01:33 — with GitHub Actions Inactive

revu-bot reviewed Jan 24, 2026

View reviewed changes

hbalty added the 🥁 Ready for review label Jan 24, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(frontend): integrating dsfr faq #4063

feat(frontend): integrating dsfr faq #4063

Uh oh!

hbalty commented Jan 24, 2026

Uh oh!

sonarqubecloud bot commented Jan 24, 2026

Uh oh!

revu-bot left a comment

Uh oh!

revu-bot Jan 24, 2026

Uh oh!

revu-bot Jan 24, 2026

Uh oh!

revu-bot Jan 24, 2026

Uh oh!

revu-bot Jan 24, 2026

Uh oh!

revu-bot Jan 24, 2026

Uh oh!

revu-bot Jan 24, 2026

Uh oh!

tokenbureau bot commented Jan 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat(frontend): integrating dsfr faq #4063

Are you sure you want to change the base?

feat(frontend): integrating dsfr faq #4063

Uh oh!

Conversation

hbalty commented Jan 24, 2026

Uh oh!

sonarqubecloud bot commented Jan 24, 2026

Quality Gate failed

Uh oh!

revu-bot left a comment

Choose a reason for hiding this comment

Summary

Key Changes

Issues Found

Uh oh!

revu-bot Jan 24, 2026

Choose a reason for hiding this comment

[IMPORTANT] Missing CommonModule import for standalone components

Uh oh!

revu-bot Jan 24, 2026

Choose a reason for hiding this comment

[CRITICAL] Duplicate accordion IDs break accessibility and functionality

Uh oh!

revu-bot Jan 24, 2026

Choose a reason for hiding this comment

[IMPORTANT] Inconsistent email obfuscation pattern

Uh oh!

revu-bot Jan 24, 2026

Choose a reason for hiding this comment

[MINOR] Remove commented-out code before merging

Uh oh!

revu-bot Jan 24, 2026

Choose a reason for hiding this comment

[MINOR] Remove commented-out video tutorial scaffolding

Uh oh!

revu-bot Jan 24, 2026

Choose a reason for hiding this comment

[MINOR] Remove old FAQ implementation

Uh oh!

tokenbureau bot commented Jan 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants