Fix campaign titles accessibility

.talismanrc

@@ -13,5 +13,6 @@ scopeconfig:
 - scope: node
 allowed_patterns:
 - keyof
+- \[key\]
 - key=
 version: "1.0"

frontend/package.json

@@ -62,6 +62,7 @@
     "react-use": "^17.5.1",
     "redux": "^5.0.1",
     "ts-essentials": "^10.0.2",
+    "ts-pattern": "^5.4.0",
     "uuid": "^9.0.1",
     "web-vitals": "^1.1.2",
     "whatwg-fetch": "^3.6.20",

frontend/src/components/Aside/Aside.tsx

@@ -20,6 +20,7 @@ function Aside(props: AsideProps) {
   const expand = props.expand ?? false;
   const component = (
     <aside
+      aria-hidden={!expand}
       className={classNames(styles.aside, {
         [styles.collapsed]: !expand
       })}

frontend/src/components/Draft/DraftBody.tsx

@@ -4,6 +4,7 @@ import RichEditor from '../RichEditor/RichEditor';
 import AppTextInput from '../_app/AppTextInput/AppTextInput';
 import { Col, Container, Row } from '../_dsfr';
 import AppLink from '../_app/AppLink/AppLink';
+import Typography from '@mui/material/Typography';
 
 interface Props {
   form: ReturnType<typeof useForm>;
@@ -21,9 +22,9 @@ function DraftBody(props: Readonly<Props>) {
   return (
     <Container as="article" className={styles.article} fluid>
       <Row className="fr-mb-2w justify-space-between">
-        <h6 id="draft-body-label" className="fr-mb-0">
+        <Typography id="draft-body-label" component="h4" variant="h6">
           Contenu de votre courrier
-        </h6>
+        </Typography>
         <AppLink
           isSimple
           target="_blank"
@@ -42,7 +43,7 @@ function DraftBody(props: Readonly<Props>) {
             onChange={(event) =>
               props.onChange({
                 subject: event.target.value,
-                body: props.body,
+                body: props.body
               })
             }
           />
@@ -55,7 +56,7 @@ function DraftBody(props: Readonly<Props>) {
           onChange={(content) =>
             props.onChange({
               subject: props.subject,
-              body: content,
+              body: content
             })
           }
         />

frontend/src/components/Draft/DraftMailInfo.tsx

@@ -5,13 +5,14 @@ import styles from './draft.module.scss';
 import AppTextInput from '../_app/AppTextInput/AppTextInput';
 import { useForm } from '../../hooks/useForm';
 import { DATE_REGEXP_OPTIONNAL } from '../../utils/dateUtils';
+import Typography from '@mui/material/Typography';
 
 export const writtenSchema = object({
   writtenAt: string().matches(
     DATE_REGEXP_OPTIONNAL,
-    'Veuillez renseigner une date au format yyyy-mm-dd',
+    'Veuillez renseigner une date au format yyyy-mm-dd'
   ),
-  writtenFrom: string(),
+  writtenFrom: string()
 });
 
 export interface Written {
@@ -32,14 +33,16 @@ function DraftMailInfo(props: Readonly<Props>) {
       props.onChange({
         at: props.writtenAt,
         from: props.writtenFrom,
-        [key]: e.target.value,
+        [key]: e.target.value
       });
     };
   }
 
   return (
     <article className={styles.article}>
-      <h6>Informations sur le courrier</h6>
+      <Typography component="h4" variant="h6" mb={2}>
+        Informations sur le courrier
+      </Typography>
       <AppTextInput
         inputForm={props.form}
         inputKey="writtenAt"

frontend/src/components/Draft/DraftSender.tsx

@@ -6,6 +6,7 @@ import { Sender, SenderPayload } from '../../models/Sender';
 import styles from './draft.module.scss';
 import AppTextInput from '../_app/AppTextInput/AppTextInput';
 import { Col, Container, Row } from '../_dsfr';
+import Typography from '@mui/material/Typography';
 
 export const senderSchema = object({
   name: string().trim(),
@@ -46,7 +47,9 @@ function DraftSender(props: Readonly<Props>) {
 
   return (
     <Container as="article" className={styles.article}>
-      <h6>Coordonnées de l’expéditeur</h6>
+      <Typography component="h4" variant="h6" mb={2}>
+        Coordonnées de l’expéditeur
+      </Typography>
       <AppTextInput
         inputForm={props.form}
         inputKey="sender.name"

frontend/src/components/Draft/DraftSenderLogo.tsx

@@ -4,6 +4,7 @@ import styles from './draft.module.scss';
 import { FileUploadDTO } from '@zerologementvacant/models';
 import classNames from 'classnames';
 import LogoViewer from './LogoViewer';
+import Typography from '@mui/material/Typography';
 
 interface Props {
   className?: string;
@@ -24,10 +25,12 @@ function DraftSenderLogo(props: Readonly<Props>) {
 
   function deleteLogo(id: string, index: number) {
     return (): void => {
-      const newFiles = [...files].filter(file => file?.id !== id);
+      const newFiles = [...files].filter((file) => file?.id !== id);
       props.onChange(newFiles);
-      const elem = document.getElementById(`fileUploadLogo${index}-input`) as HTMLInputElement;
-      if(elem !== null) {
+      const elem = document.getElementById(
+        `fileUploadLogo${index}-input`
+      ) as HTMLInputElement;
+      if (elem !== null) {
         elem.value = '';
       }
     };
@@ -41,15 +44,32 @@ function DraftSenderLogo(props: Readonly<Props>) {
     >
       <Row>
         <FileUpload
-          id='fileUploadLogo0'
-          label={<h6 className="fr-mb-2w">Logos de l’expéditeur</h6>}
+          id="fileUploadLogo0"
+          label={
+            <Typography component="h4" variant="h6" mb={2}>
+              Logos de l’expéditeur
+            </Typography>
+          }
           onUpload={onUpload(0)}
         />
-        <LogoViewer index={0} logo={props.value[0]} onDelete={deleteLogo(props.value[0]?.id, 0)} />
+        <LogoViewer
+          index={0}
+          logo={props.value[0]}
+          onDelete={deleteLogo(props.value[0]?.id, 0)}
+        />
       </Row>
       <Row spacing="mb-2w">
-        <FileUpload id='fileUploadLogo1' hint="" label={null} onUpload={onUpload(1)} />
-        <LogoViewer index={1} logo={props.value[1]} onDelete={deleteLogo(props.value[1]?.id, 1)} />
+        <FileUpload
+          id="fileUploadLogo1"
+          hint=""
+          label={null}
+          onUpload={onUpload(1)}
+        />
+        <LogoViewer
+          index={1}
+          logo={props.value[1]}
+          onDelete={deleteLogo(props.value[1]?.id, 1)}
+        />
       </Row>
     </Container>
   );

frontend/src/components/Draft/DraftSignature.tsx

@@ -9,11 +9,12 @@ import { Col, Container, Row } from '../_dsfr';
 import FileUpload from '../FileUpload/FileUpload';
 import { FileUploadDTO } from '@zerologementvacant/models';
 import LogoViewer from './LogoViewer';
+import Typography from '@mui/material/Typography';
 
 export const signatureSchema = object({
   signatoryFirstName: string().optional().nullable(),
   signatoryLastName: string().optional().nullable(),
-  signatoryRole: string().optional().nullable(),
+  signatoryRole: string().optional().nullable()
 });
 
 interface Props {
@@ -32,7 +33,7 @@ function DraftSignature(props: Readonly<Props>) {
       if (props.value) {
         props.onChange({
           ...props.value,
-          [key]: e.target.value,
+          [key]: e.target.value
         });
       }
     };
@@ -41,22 +42,26 @@ function DraftSignature(props: Readonly<Props>) {
   function onFileUpload(file: FileUploadDTO) {
     props.onChange({
       ...props.value,
-      signatoryFile: file,
+      signatoryFile: file
     });
   }
 
   function deleteFile() {
     props.value.signatoryFile = null;
     props.onChange(props.value);
-    const elem = document.getElementById(`fileUploadSignature-input`) as HTMLInputElement;
-    if(elem !== null) {
+    const elem = document.getElementById(
+      `fileUploadSignature-input`
+    ) as HTMLInputElement;
+    if (elem !== null) {
       elem.value = '';
     }
   }
 
   return (
     <Container as="article" className={styles.article}>
-      <h6>Signature de l’expéditeur</h6>
+      <Typography component="h4" variant="h6" mb={2}>
+        Signature de l’expéditeur
+      </Typography>
       <Row className={styles.row} gutters>
         <Col n="6">
           <AppTextInput
@@ -86,7 +91,11 @@ function DraftSignature(props: Readonly<Props>) {
       />
       <FileUpload id="fileUploadSignature" onUpload={onFileUpload} />
 
-      <LogoViewer index={0} logo={props.value.signatoryFile as FileUploadDTO} onDelete={deleteFile} />
+      <LogoViewer
+        index={0}
+        logo={props.value.signatoryFile as FileUploadDTO}
+        onDelete={deleteFile}
+      />
     </Container>
   );
 }

frontend/src/components/HousingDetails/HousingDetailsSubCardProperties.tsx

@@ -1,5 +1,5 @@
 import { Text } from '../_dsfr';
-import { Housing, OwnershipKindLabels } from '../../models/Housing';
+import { formatOwnershipKind, Housing } from '../../models/Housing';
 import { cadastralClassificationOptions } from '../../models/HousingFilters';
 import HousingDetailsSubCard from './HousingDetailsSubCard';
 
@@ -21,7 +21,7 @@ function HousingDetailsSubCardProperties({ housing }: Props) {
           Type de propriété
         </Text>
         <Text spacing="mb-1w">
-          {OwnershipKindLabels[housing.ownershipKind]}
+          {formatOwnershipKind(housing.ownershipKind)}
         </Text>
       </div>
       <div>
@@ -49,7 +49,7 @@ function HousingDetailsSubCardProperties({ housing }: Props) {
         <Text spacing="mb-1w">
           {
             cadastralClassificationOptions.find(
-              (_) => _.value === String(housing.cadastralClassification),
+              (_) => _.value === String(housing.cadastralClassification)
             )?.label
           }
         </Text>

frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx

@@ -69,6 +69,19 @@ function OwnerEditionSideMenu(props: Props) {
     toastId: 'owner-edition'
   });
 
+  if (!active) {
+    return (
+      <Button
+        className={props.className}
+        priority="tertiary"
+        size="small"
+        onClick={open}
+      >
+        Éditer l’adresse
+      </Button>
+    );
+  }
+
   return (
     <>
       <Button

frontend/src/models/Housing.tsx

@@ -1,10 +1,13 @@
 import { differenceInDays, format } from 'date-fns';
+import { match, Pattern } from 'ts-pattern';
 
 import {
   EnergyConsumption,
   HousingDTO,
   HousingKind,
   HousingStatus,
+  INTERNAL_CO_CONDOMINIUM_VALUES,
+  INTERNAL_MONO_CONDOMINIUM_VALUES,
   Occupancy
 } from '@zerologementvacant/models';
 import { Owner, toOwnerDTO } from './Owner';
@@ -38,7 +41,7 @@ export interface Housing {
   uncomfortable: boolean;
   cadastralClassification: number;
   taxed: boolean;
-  ownershipKind: OwnershipKinds;
+  ownershipKind: string;
   buildingHousingCount?: number;
   buildingVacancyRate: number;
   dataFileYears: string[];
@@ -128,22 +131,16 @@ export function byAddress(h1: Housing, h2: Housing): Compare {
   return byCity;
 }
 
-export const hasGeoPerimeters = (housing: Housing) =>
-  housing.geoPerimeters &&
-  housing.geoPerimeters.filter((_) => _ !== null).length > 0;
-
-export enum OwnershipKinds {
-  Single = 'single',
-  CoOwnership = 'co',
-  Other = 'other'
+export function formatOwnershipKind(kind: string | null): string {
+  return match(kind)
+    .with(
+      Pattern.union(null, ...INTERNAL_MONO_CONDOMINIUM_VALUES),
+      () => 'Monopropriété'
+    )
+    .with(Pattern.union(...INTERNAL_CO_CONDOMINIUM_VALUES), () => 'Copropriété')
+    .otherwise(() => 'Autre');
 }
 
-export const OwnershipKindLabels = {
-  [OwnershipKinds.Single]: 'Monopropriété',
-  [OwnershipKinds.CoOwnership]: 'Copropriété',
-  [OwnershipKinds.Other]: 'Autre'
-};
-
 export type HousingSortable = Pick<
   Housing,
   'rawAddress' | 'owner' | 'occupancy' | 'status'

frontend/src/models/HousingFilters.tsx

@@ -19,11 +19,7 @@ import {
 } from '@zerologementvacant/models';
 import { OptionTreeElement, SelectOption } from './SelectOption';
 import { HousingStates } from './HousingState';
-import {
-  OCCUPANCY_LABELS,
-  OwnershipKindLabels,
-  OwnershipKinds
-} from './Housing';
+import { OCCUPANCY_LABELS } from './Housing';
 import { LocalityKindLabels, LocalityKinds } from './Locality';
 import EnergyConsumptionOption from '../components/_app/AppMultiSelect/EnergyConsumptionOption';
 
@@ -228,16 +224,16 @@ export const taxedOptions: SelectOption[] = [
 
 export const ownershipKindsOptions: SelectOption<OwnershipKind>[] = [
   {
-    value: OwnershipKinds.Single,
-    label: OwnershipKindLabels[OwnershipKinds.Single]
+    value: 'single',
+    label: 'Monopropriété'
   },
   {
-    value: OwnershipKinds.CoOwnership,
-    label: OwnershipKindLabels[OwnershipKinds.CoOwnership]
+    value: 'co',
+    label: 'Copropriété'
   },
   {
-    value: OwnershipKinds.Other,
-    label: OwnershipKindLabels[OwnershipKinds.Other],
+    value: 'other',
+    label: 'Autre',
     badgeLabel: 'Autre type de propriété'
   }
 ];

frontend/test/fixtures.test.ts

@@ -4,7 +4,7 @@ import randomstring from 'randomstring';
 
 import { Owner } from '../src/models/Owner';
 import { Address } from '../src/models/Address';
-import { Housing, OccupancyKind, OwnershipKinds } from '../src/models/Housing';
+import { Housing, OccupancyKind } from '../src/models/Housing';
 import { AuthUser, User } from '../src/models/User';
 import { SignupLink } from '../src/models/SignupLink';
 import { Prospect } from '../src/models/Prospect';
@@ -103,7 +103,7 @@ export function genHousing(): Housing {
     uncomfortable: false,
     cadastralClassification: genNumber(1),
     taxed: false,
-    ownershipKind: OwnershipKinds.Single,
+    ownershipKind: 'single',
     buildingVacancyRate: genNumber(2),
     status: HousingStatus.NEVER_CONTACTED,
     source: null,