feat: improve accessibility

InseeFr · Nov 6, 2024 · 7b6fdb5 · 7b6fdb5
1 parent bb8efdc
commit 7b6fdb5
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 15 deletions.
diff --git a/src/pages/QuestioningPage.tsx b/src/pages/QuestioningPage.tsx
@@ -79,7 +79,7 @@ export const QuestioningPage = () => {
     <>
       <Stack px={6} py={3} sx={{ backgroundColor: theme.palette.Surfaces.Secondary }}>
         <Breadcrumbs items={breadcrumbs} />
-        <Typography component={"span"} variant="headlineLarge">
+        <Typography component="h1" variant="headlineLarge">
           {questioningMock.label}
         </Typography>
         <Row justifyContent={"space-between"} pt={1}>

diff --git a/src/pages/Search/SearchQuestionings.tsx b/src/pages/Search/SearchQuestionings.tsx
@@ -44,14 +44,16 @@ export const SearchQuestionings = () => {
       >
         <Stack>
           <Breadcrumbs items={breadcrumbs} />
-          <Typography variant="headlineLarge">Interrogations</Typography>
+          <Typography variant="headlineLarge" component="h1">
+            Interrogations
+          </Typography>
         </Stack>
         <Row justifyContent={"space-between"}>
           <ToggleButtonGroup value={tab} exclusive onChange={(_, v) => setTab(v)}>
-            <ToggleButton value="me" aria-label="left aligned" size="large">
+            <ToggleButton value="me" size="large">
               Mon portefeuille
             </ToggleButton>
-            <ToggleButton value="all" aria-label="left aligned" size="large">
+            <ToggleButton value="all" size="large">
               Tous les portefeuilles
             </ToggleButton>
           </ToggleButtonGroup>
@@ -96,7 +98,7 @@ export const SearchQuestionings = () => {
             inputProps={inputProps}
           />
           <Row gap={3}>
-            <FilterSelect options={[]} label={"Campagne"} name={"campaign"} />
+            <FilterSelect options={[]} label={"Collecte"} name={"campaign"} />
             <FilterSelect options={collectStatus} label={"Statut"} name={"status"} />
             <FilterSelect options={[]} label={"Dernière communication"} name={"lastCommunication"} />
           </Row>

diff --git a/src/theme.tsx b/src/theme.tsx
@@ -475,7 +475,7 @@ export const theme = createTheme({
     MuiInputLabel: {
       styleOverrides: {
         root: {
-          color: palette.text.tertiary,
+          color: palette.text.secondary,
           "&.Mui-focused": {
             color: palette.text.primary,
           },
@@ -531,6 +531,11 @@ export const theme = createTheme({
           "& .Mui-focused .MuiSelect-select": {
             backgroundColor: palette.Surfaces.Secondary,
           },
+          ":hover": {
+            "& .MuiInputLabel-root": {
+              color: palette.text.secondary,
+            },
+          },
           "& .MuiFormHelperText-root": {
             marginLeft: 0,
           },

diff --git a/src/ui/Questioning/QuestioningCommentsCard.tsx b/src/ui/Questioning/QuestioningCommentsCard.tsx
@@ -73,7 +73,7 @@ export const QuestioningCommentsCard = ({ questioning }: Props) => {
     <Card sx={{ p: 3 }} elevation={2}>
       <Row gap={2} justifyContent={"space-between"}>
         <CardtitleWithIcon IconComponent={ModeCommentOutlinedIcon} title={"Commentaires"} />
-        <IconButton onClick={toggleDialog}>
+        <IconButton onClick={toggleDialog} aria-label="add-comment">
           <AddCommentOutlinedIcon color="primary" fontSize="navigateIcon" />
         </IconButton>
       </Row>

diff --git a/src/ui/Questioning/QuestioningInfos.tsx b/src/ui/Questioning/QuestioningInfos.tsx
@@ -14,7 +14,9 @@ export const QuestioningInfos = ({ questioning }: Props) => {
     <Row gap={3} alignItems={"start"}>
       <Card sx={{ p: 3, flex: 1 }} elevation={2}>
         <Stack gap={2}>
-          <Typography variant={"headlineSmall"}>Informations</Typography>
+          <Typography variant={"headlineSmall"} component="h2">
+            Informations
+          </Typography>
 
           {/* TODO: use this List when get data */}
           {/* <List dense>
@@ -49,7 +51,9 @@ export const QuestioningInfos = ({ questioning }: Props) => {
             ))}
           </List> */}
           <Stack gap={1} sx={{ pr: 2 }}>
-            <Typography variant="titleSmall">Unité enquêtée</Typography>
+            <Typography variant="titleSmall" component="h3">
+              Unité enquêtée
+            </Typography>
             <Row justifyContent={"space-between"}>
               <Typography variant="bodyMedium">{questioning.identificationCode}</Typography>
               <Button
@@ -66,7 +70,9 @@ export const QuestioningInfos = ({ questioning }: Props) => {
             </Row>
           </Stack>
           <Stack gap={1} sx={{ pr: 2 }}>
-            <Typography variant="titleSmall">Campagne</Typography>
+            <Typography variant="titleSmall" component="h3">
+              Collecte
+            </Typography>
             <Row justifyContent={"space-between"}>
               <Typography variant="bodyMedium">{questioning.campaign}</Typography>
               <Button

diff --git a/src/ui/Questioning/SearchQuestioningTable.tsx b/src/ui/Questioning/SearchQuestioningTable.tsx
@@ -66,7 +66,7 @@ export const getCollectStateChipColor = (state?: string) => {
 };
 
 const columns: readonly Column[] = [
-  { id: "campaign", label: "Campagne", minWidth: "95px" },
+  { id: "campaign", label: "Collecte", minWidth: "95px" },
   { id: "identificationCode", label: "ID métier", minWidth: "95px" },
   { id: "contacts", label: "Contacts", minWidth: "95px" },
   { id: "status", label: "Statut", minWidth: "150px" },
@@ -76,7 +76,7 @@ const columns: readonly Column[] = [
 ];
 
 const columnsWithQuality: readonly Column[] = [
-  { id: "campaign", label: "Campagne", minWidth: "95px" },
+  { id: "campaign", label: "Collecte", minWidth: "95px" },
   { id: "identificationCode", label: "ID métier", minWidth: "100px" },
   { id: "contacts", label: "Contacts", minWidth: "95px" },
   { id: "status", label: "Statut", minWidth: "150px" },

diff --git a/src/ui/Questioning/StatesCard.tsx b/src/ui/Questioning/StatesCard.tsx
@@ -56,10 +56,14 @@ export const StatesCard = ({ questioning }: Props) => {
   return (
     <Card sx={{ p: 3 }} elevation={2}>
       <Stack gap={3}>
-        <Typography variant={"headlineSmall"}>États</Typography>
+        <Typography variant={"headlineSmall"} component="h2">
+          États
+        </Typography>
         <Stack gap={2}>
           <Row justifyContent={"space-between"}>
-            <Typography variant="titleSmall">Dernier statut</Typography>
+            <Typography variant="titleSmall" component="h3">
+              Dernier statut
+            </Typography>
             <Button
               variant="text"
               sx={{ typography: "titleSmall" }}
@@ -99,7 +103,9 @@ export const StatesCard = ({ questioning }: Props) => {
         </Stack>
         <Stack gap={2}>
           <Row justifyContent={"space-between"}>
-            <Typography variant="titleSmall">Dernière communication</Typography>
+            <Typography variant="titleSmall" component="h3">
+              Dernière communication
+            </Typography>
             <Button
               variant="text"
               sx={{ typography: "titleSmall" }}