packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorSimple.html

-<div class="fr-alert fr-alert--error fr-alert--sm">
+<div class="fr-alert fr-alert--error fr-alert--sm" role="alert">
   <p>Ceci est une alerte de l'api</p>
 </div>
\ No newline at end of file

packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorWithCompleteMessage.html

-<div class="fr-alert fr-alert--error">
+<div class="fr-alert fr-alert--error" role="alert">
   <h3 class="fr-alert__title">Ceci est une alerte de l'api</h3>Validation error: Array must contain at least 3 element(s) at "features[0].geometry.coordinates[0][0]"
 </div>
\ No newline at end of file

packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorWithDetail.html

-<div class="fr-alert fr-alert--error">
+<div class="fr-alert fr-alert--error" role="alert">
   <h3 class="fr-alert__title">Ceci est une alerte de l'api</h3>Ceci est le détail human readable de l'erreur
 </div>
\ No newline at end of file

packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorWithDetailAndCompleteMessage.html

-<div class="fr-alert fr-alert--error">
+<div class="fr-alert fr-alert--error" role="alert">
   <h3 class="fr-alert__title">Ceci est une alerte de l'api</h3>
   <div style="display: flex; flex-direction: column;">
     <div>Ceci est le détail human readable de l'erreur</div>

packages/ui/src/components/_ui/alert.tsx

+import { fr } from '@codegouvfr/react-dsfr'
 import { capitalize } from 'camino-common/src/strings'
 import type { CaminoError } from 'camino-common/src/zod-tools'
 import type { FunctionalComponent, HTMLAttributes } from 'vue'
@@ -12,19 +13,20 @@ type ClassicProps = {
 type Props = {
   type: 'warning' | 'success' | 'error' | 'info'
   title: string | JSX.Element
+  role?: 'alert'
 } & (SmallProps | ClassicProps) & { class?: HTMLAttributes['class']; style?: HTMLAttributes['style'] }
 
 export const Alert: FunctionalComponent<Props> = props => {
   if ('small' in props) {
     return (
-      <div class={['fr-alert', `fr-alert--${props.type}`, 'fr-alert--sm']}>
+      <div class={[fr.cx('fr-alert'), fr.cx(`fr-alert--${props.type}`), fr.cx('fr-alert--sm')]} role={props.role}>
         <p>{typeof props.title === 'string' ? capitalize(props.title) : props.title}</p>
       </div>
     )
   } else {
     return (
-      <div class={['fr-alert', `fr-alert--${props.type}`]}>
-        <h3 class="fr-alert__title">{props.title}</h3>
+      <div class={[fr.cx('fr-alert'), fr.cx(`fr-alert--${props.type}`)]} role={props.role}>
+        <h3 class={[fr.cx('fr-alert__title')]}>{typeof props.title === 'string' ? capitalize(props.title) : props.title}</h3>
         {props.description !== undefined ? props.description : null}
       </div>
     )
@@ -34,12 +36,13 @@ export const Alert: FunctionalComponent<Props> = props => {
 export const CaminoApiAlert: FunctionalComponent<{ caminoApiError: CaminoError<string>; class?: HTMLAttributes['class'] }> = props => {
   const small = !('zodErrorReadableMessage' in props.caminoApiError || 'detail' in props.caminoApiError)
   if (small) {
-    return <Alert small={small} type="error" title={props.caminoApiError.message} />
+    return <Alert small={small} type="error" role="alert" title={props.caminoApiError.message} />
   } else if ('zodErrorReadableMessage' in props.caminoApiError && 'detail' in props.caminoApiError) {
     return (
       <Alert
         type="error"
         title={capitalize(props.caminoApiError.message)}
+        role="alert"
         description={
           <div style={{ display: 'flex', flexDirection: 'column' }}>
             <div>{props.caminoApiError.detail}</div>
@@ -52,14 +55,14 @@ export const CaminoApiAlert: FunctionalComponent<{ caminoApiError: CaminoError<s
       />
     )
   } else if ('zodErrorReadableMessage' in props.caminoApiError) {
-    return <Alert type="error" title={capitalize(props.caminoApiError.message)} description={props.caminoApiError.zodErrorReadableMessage} />
+    return <Alert type="error" role="alert" title={capitalize(props.caminoApiError.message)} description={props.caminoApiError.zodErrorReadableMessage} />
   } else {
-    return <Alert type="error" title={capitalize(props.caminoApiError.message)} description={props.caminoApiError.detail} />
+    return <Alert type="error" role="alert" title={capitalize(props.caminoApiError.message)} description={props.caminoApiError.detail} />
   }
 }
 
 export const PageIntrouvableAlert: FunctionalComponent = () => {
-  return <Alert type="error" title="Page Introuvable" small={true} />
+  return <Alert type="error" role="alert" title="Page Introuvable" small={true} />
 }
 // Demandé par le router car utilisé dans un import asynchrone /shrug
 PageIntrouvableAlert.displayName = 'Page introuvable'

packages/ui/src/components/_ui/dsfr-callout.stories.tsx

+import { Meta, StoryFn } from '@storybook/vue3'
+import { DsfrCallout } from './dsfr-callout'
+
+const meta: Meta = {
+  title: 'Components/UI/Dsfr/Callout',
+  component: DsfrCallout,
+}
+export default meta
+
+export const Default: StoryFn = () => <DsfrCallout title="Mon title" content={<>Ceci est le contenu</>} footer={<>Ceci est le footer</>} />

packages/ui/src/components/_ui/dsfr-callout.stories_snapshots_Default.html

+<div class="fr-callout fr-icon-information-line">
+  <h3 class="fr-callout__title">Mon title</h3>
+  <p class="fr-callout__text">Ceci est le contenu</p>Ceci est le footer
+</div>
\ No newline at end of file

packages/ui/src/components/_ui/dsfr-callout.tsx

+import { FunctionalComponent } from 'vue'
+import { JSX } from 'vue/jsx-runtime'
+
+type Props = {
+  content: JSX.Element
+  title: string
+  footer: JSX.Element
+}
+
+export const DsfrCallout: FunctionalComponent<Props> = props => {
+  return (
+    <div class="fr-callout fr-icon-information-line">
+      <h3 class="fr-callout__title">{props.title}</h3>
+      <p class="fr-callout__text">{props.content}</p>
+      {props.footer}
+    </div>
+  )
+}

packages/ui/src/components/_ui/dsfr-input-checkbox.tsx

 import { isEventWithTarget, random } from '@/utils/vue-tsx-utils'
 import { isNotNullNorUndefinedNorEmpty } from 'camino-common/src/typescript-tools'
 import { defineComponent } from 'vue'
+import { JSX } from 'vue/jsx-runtime'
 
 export type Props = {
   id?: string
-  legend: { main: string; description?: string }
+  legend: { main: string | JSX.Element; description?: string }
   size?: 'sm' | 'md'
   disabled?: boolean
   valueChanged: (value: boolean) => void

packages/ui/src/components/_ui/dsfr-input-checkboxes.tsx

@@ -65,4 +65,4 @@ export const DsfrInputCheckboxes = defineComponent(<T extends string>(props: Pro
 })
 
 // @ts-ignore waiting for https://github.com/vuejs/core/issues/7833
-DsfrInputCheckboxes.props = ['id', 'valueChanged', 'legend', 'disabled', 'elements', 'size', 'initialCheckedValue']
+DsfrInputCheckboxes.props = ['id', 'valueChanged', 'legend', 'disabled', 'elements', 'size', 'initialCheckedValue', 'required']

packages/ui/src/components/_ui/dsfr-input-file.stories.tsx

@@ -10,5 +10,6 @@ const meta: Meta = {
 export default meta
 const uploadFile = action('uploadFile')
 
-export const PdfOnly: StoryFn = () => <InputFile accept={['pdf']} uploadFile={uploadFile} />
-export const ManyFormats: StoryFn = () => <InputFile accept={['pdf', 'csv']} uploadFile={uploadFile} />
+export const PdfOnly: StoryFn = () => <InputFile required={false} accept={['pdf']} uploadFile={uploadFile} />
+export const ManyFormats: StoryFn = () => <InputFile required={false} accept={['pdf', 'csv']} uploadFile={uploadFile} />
+export const Required: StoryFn = () => <InputFile required={true} accept={['pdf', 'csv']} uploadFile={uploadFile} />

packages/ui/src/components/_ui/dsfr-input-file.stories_snapshots_ManyFormats.html

-<div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<span class="fr-hint-text">Taille maximale : 100 Mo. Formats supportés : pdf, csv.</span></label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf,.csv"></div>
\ No newline at end of file
+<div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier (optionnel)<span class="fr-hint-text">Taille maximale : 100 Mo. Formats supportés : pdf, csv.</span></label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf,.csv"></div>
\ No newline at end of file

packages/ui/src/components/_ui/dsfr-input-file.stories_snapshots_PdfOnly.html

-<div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<span class="fr-hint-text">Taille maximale : 100 Mo. Format<!----> supporté<!----> : pdf.</span></label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf"></div>
\ No newline at end of file
+<div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier (optionnel)<span class="fr-hint-text">Taille maximale : 100 Mo. Format<!----> supporté<!----> : pdf.</span></label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf"></div>
\ No newline at end of file

packages/ui/src/components/_ui/dsfr-input-file.stories_snapshots_Required.html

+<div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier
+    <!----><span class="fr-hint-text">Taille maximale : 100 Mo. Formats supportés : pdf, csv.</span>
+  </label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf,.csv"></div>
\ No newline at end of file

packages/ui/src/components/_ui/dsfr-input-file.tsx

@@ -5,6 +5,7 @@ import { defineComponent, ref } from 'vue'
 interface Props {
   accept: FileUploadType[]
   uploadFile: (file: File) => void
+  required: boolean
 }
 
 const isDragEvent = (e: Event): e is DragEvent => {
@@ -49,7 +50,7 @@ export const InputFile = defineComponent<Props>(props => {
   return () => (
     <div class="fr-upload-group" style={{ opacity: dragHover.value ? '20%' : '100%' }} onDragover={onDragHover} onDragleave={onDragLeave} onDrop={dropFile}>
       <label class="fr-label" for="file-upload">
-        Ajouter un fichier
+        Ajouter un fichier {!props.required ? ' (optionnel)' : null}
         <span class="fr-hint-text">
           Taille maximale : 100 Mo. Format{props.accept.length > 1 ? 's' : null} supporté{props.accept.length > 1 ? 's' : null} : {props.accept.join(', ')}.
         </span>
@@ -61,4 +62,4 @@ export const InputFile = defineComponent<Props>(props => {
 })
 
 // @ts-ignore waiting for https://github.com/vuejs/core/issues/7833
-InputFile.props = ['accept', 'uploadFile']
+InputFile.props = ['accept', 'uploadFile', 'required']

packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Default.html

 <fieldset class="fr-fieldset" id="input1" aria-labelledby="input1-legend" style="flex-direction: column; align-items: flex-start;">
-  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input1-legend">Légende
+  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input1-legend">Légende (optionnel)
     <!---->
   </legend>
   <div class="fr-fieldset__element">

packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Disabled.html

 <fieldset class="fr-fieldset" id="input5" aria-labelledby="input5-legend" style="flex-direction: column; align-items: flex-start;" disabled="">
-  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input5-legend">Légende
+  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input5-legend">Légende (optionnel)
     <!---->
   </legend>
   <div class="fr-fieldset__element">

packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Horizontal.html

 <fieldset class="fr-fieldset" id="input6" aria-labelledby="input6-legend" style="flex-direction: row; align-items: flex-start;">
-  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input6-legend">Légende *
+  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input6-legend">Légende
     <!---->
   </legend>
   <div class="fr-fieldset__element fr-fieldset__element--inline">

packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_OneElementDisabled.html

 <fieldset class="fr-fieldset" id="input5" aria-labelledby="input5-legend" style="flex-direction: column; align-items: flex-start;">
-  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input5-legend">Légende élément 2 désactivé
+  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input5-legend">Légende élément 2 désactivé (optionnel)
     <!---->
   </legend>
   <div class="fr-fieldset__element">

packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Required.html

 <fieldset class="fr-fieldset" id="input6" aria-labelledby="input6-legend" style="flex-direction: column; align-items: flex-start;">
-  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input6-legend">Légende *
+  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input6-legend">Légende
     <!---->
   </legend>
   <div class="fr-fieldset__element">