diff --git a/src/components/TimeStepSelector/TimeStepSelector.tsx b/src/components/TimeStepSelector/TimeStepSelector.tsx index 5b675b822ef35b381d2c8b0a408eda8b21baf093..ac376b4fa56d1ff38bca5b03ce13275077af4ac9 100644 --- a/src/components/TimeStepSelector/TimeStepSelector.tsx +++ b/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> ) } diff --git a/src/locales/fr.json b/src/locales/fr.json index 1da78e96f0b41fbd02c5b130825939d6bbf76f3b..113c0cf6c0a24685abceb1061bd51d47c3a35fd3 100644 --- a/src/locales/fr.json +++ b/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": {