feat: update TimeStepSelector buttons

src/components/TimeStepSelector/TimeStepSelector.tsx

@@ -10,7 +10,7 @@ import DateChartService from 'services/dateChart.service'
 import { FluidType } from 'enum/fluid.enum'
 import { TimeStep } from 'enum/timeStep.enum'
 
-import MuiButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import ZoomInIcon from 'assets/icons/ico/zoom-in.svg'
 import ZoomOutIcon from 'assets/icons/ico/zoom-out.svg'
@@ -78,7 +78,8 @@ const TimeStepSelector: React.FC<TimeStepSelectorProps> = ({
 
   return (
     <div className={'timestep-selector'}>
-      <MuiButton
+      <Button
+        aria-label={t('timestep.accessibility.button_zoom_in')}
         onClick={handleZoomInClick}
         disabled={disableZoomIn}
         classes={{
@@ -89,7 +90,7 @@ const TimeStepSelector: React.FC<TimeStepSelectorProps> = ({
         }}
       >
         <StyledIcon icon={ZoomInIcon} size={26} />
-      </MuiButton>
+      </Button>
       <div className={'timestep-container'}>
         <ul className={'timestep-bar'}>
           {timeStepArray.map((step, key) => {
@@ -110,7 +111,8 @@ const TimeStepSelector: React.FC<TimeStepSelectorProps> = ({
           })}
         </ul>
       </div>
-      <MuiButton
+      <Button
+        aria-label={t('timestep.accessibility.button_zoom_out')}
         onClick={handleZoomOutClick}
         disabled={disableZoomOut}
         classes={{
@@ -121,7 +123,7 @@ const TimeStepSelector: React.FC<TimeStepSelectorProps> = ({
         }}
       >
         <StyledIcon icon={ZoomOutIcon} size={26} />
-      </MuiButton>
+      </Button>
     </div>
   )
 }

src/locales/fr.json

@@ -701,6 +701,10 @@
     "half_an_hour": {
       "period": "Jour",
       "comparelabel": "Comparer à la journée précédente"
+    },
+    "accessibility": {
+      "button_zoom_in": "Sélectionner le pas de temps précédent",
+      "button_zoom_out": "Sélectionner le pas de temps suivant"
     }
   },
   "welcome_modal": {