correction des ereurs

[mucamaadd-create]

Console Error

DialogContent requires a DialogTitle for the component to be accessible for screen reader users.

If you want to hide the DialogTitle, you can wrap it with our VisuallyHidden component.

For more information, see https://radix-ui.com/primitives/docs/components/dialog
src/components/ui/dialog.tsx (60:7) @ DialogContent

58 |
59 |

60 | <DialogPrimitive.Content
| ^
61 | data-slot="dialog-content"
62 | className={cn(
63 | "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
Call Stack
76

Show 69 ignore-listed frame(s)
DialogContent
src/components/ui/dialog.tsx (60:7)
DialogPortal
src/components/ui/dialog.tsx (24:10)
DialogContent
src/components/ui/dialog.tsx (58:5)
QuittancesModule
src/components/coman/DocumentsModules.tsx (1769:9)
DocumentsModules
src/components/coman/DocumentsModules.tsx (1859:14)
renderModule
src/app/page.tsx (46:16)
Home
src/app/page.tsx (66:10 . j'ai besoin d'aide pour corriger ces erreus

[agrovr]

L’erreur ne vient pas réellement de dialog.tsx:60 : ce composant partagé signale qu’un de ses appels à <DialogContent> n’a pas de titre accessible. La pile indique le premier appel à corriger dans DocumentsModules.tsx, dans QuittancesModule vers la ligne 1769.

Ajoutez un titre au contenu de cette boîte de dialogue :

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"

<DialogContent>
  <DialogHeader>
    <DialogTitle>Quittances</DialogTitle>
    <DialogDescription>
      Consultez ou gérez les quittances.
    </DialogDescription>
  </DialogHeader>

  {/* contenu existant */}
</DialogContent>

Si le titre ne doit pas être visible, gardez-le tout de même pour les lecteurs d’écran :

<DialogContent>
  <DialogTitle className="sr-only">Quittances</DialogTitle>
  {/* contenu existant */}
</DialogContent>

Évitez de supprimer l’avertissement ou d’ajouter un titre générique directement dans le composant partagé dialog.tsx : chaque dialogue doit avoir un titre qui décrit son propre contenu. Vérifiez aussi les autres usages de <DialogContent>, car le prochain dialogue sans titre produira le même message.

Références : shadcn/ui Dialog · Radix Dialog accessibility

[ISMEG-0x00]

Voici la solution directe pour corriger cette erreur d'accessibilité (Radix UI / shadcn/ui).

Cause de l'erreur
Radix UI exige qu'un composant contienne toujours un pour les lecteurs d'écran.

Solution
Dans le fichier src/components/coman/DocumentsModules.tsx (à la ligne 1769 où vous utilisez ), ajoutez le composant :

Option A : Si vous voulez afficher un titre
TypeScript

<DialogContent>
  <DialogHeader>
    <DialogTitle>Titre du dialogue</DialogTitle>
    <DialogDescription>
      Description optionnelle de votre dialogue.
    </DialogDescription>
  </DialogHeader>
  
  {/* Le reste de votre contenu */}
</DialogContent>

Option B : Si vous voulez masquer le titre visuellement
Si vous ne voulez pas voir le titre à l'écran tout en conservant l'accessibilité :

TypeScript

import { VisuallyHidden } from "@radix-ui/react-visually-hidden"

// Dans votre composant :
<DialogContent>
  <VisuallyHidden>
    <DialogTitle>Titre masqué pour l'accessibilité</DialogTitle>
  </VisuallyHidden>
  
  {/* Le reste de votre contenu */}
</DialogContent>