feat: update Profile buttons

src/components/Feedback/FeedbackModal.spec.tsx

@@ -3,7 +3,7 @@ import * as reactRedux from 'react-redux'
 import { shallow } from 'enzyme'
 import FeedbackModal from 'components/Feedback/FeedbackModal'
 
-import MuiButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
 import { userChallengeExplo1OnGoing } from '../../../tests/__mocks__/userChallengeData.mock'
 
 const mockSendMail = jest.fn()
@@ -93,7 +93,7 @@ describe('FeedbackModal functionnalities', () => {
     wrapper
       .find('#idFeedbackDescription')
       .simulate('change', { target: { value: 'La description' } })
-    wrapper.find(MuiButton).simulate('click')
+    wrapper.find(Button).simulate('click')
 
     expect(mockSendMail).toHaveBeenCalledWith(
       expect.anything(),

src/components/Options/ProfileTypeOptions.tsx

@@ -2,7 +2,7 @@ import React, { useState, useCallback, useRef } from 'react'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { AppStore } from 'store'
 import { useSelector } from 'react-redux'
-import MuiButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
 import './profileTypeOptions.scss'
 import {
   IndividualOrCollective,
@@ -233,15 +233,18 @@ const ProfileTypeOptions: React.FC = () => {
                   </div>
                 </div>
                 <div className="inline-buttons">
-                  <MuiButton
+                  <Button
+                    aria-label={t(
+                      'profile_type.accessibility.button_update_profile'
+                    )}
                     onClick={goToForm}
                     classes={{
                       root: 'btn-secondary-negative',
                       label: 'text-16-normal',
                     }}
                   >
-                    {t('profile_type.update_profile')}
-                  </MuiButton>
+                    {t('profile_type.button_update_profile')}
+                  </Button>
                 </div>
               </div>
             </div>

src/components/ProfileType/ProfileTypeFinished.tsx

@@ -5,7 +5,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 import { updateProfile } from 'store/profile/profile.actions'
 import { ProfileType } from 'models/profileType.model'
-import MuiButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import finishIcon from 'assets/icons/visu/profileType/finish.svg'
 import ProfileTypeService from 'services/profileType.service'
@@ -68,7 +68,8 @@ const ProfileTypeFinished: React.FC<ProfileTypeFinishedProps> = ({
         <div>{t('profile_type.finished.label1')}</div>
         <div>{t('profile_type.finished.label2')}</div>
       </div>
-      <MuiButton
+      <Button
+        aria-label={t('profile_type.accessibility.button_validate')}
         onClick={handleClick}
         className={'profile-type-finished-button'}
         classes={{
@@ -76,8 +77,8 @@ const ProfileTypeFinished: React.FC<ProfileTypeFinishedProps> = ({
           label: 'text-16-normal',
         }}
       >
-        {t('profile_type.finished.OK')}
-      </MuiButton>
+        {t('profile_type.finished.button_validate')}
+      </Button>
     </div>
   )
 }

src/components/ProfileType/ProfileTypeNavigation.spec.tsx

 import React from 'react'
 import { Provider } from 'react-redux'
 import { mount } from 'enzyme'
-import MuiButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
 import {
   createMockStore,
   mockInitialEcolyoState,
@@ -40,15 +40,15 @@ describe('ProfileTypeNavigation component', () => {
       </Provider>
     )
     wrapper
-      .find(MuiButton)
+      .find(Button)
       .at(0)
       .simulate('click')
     wrapper
-      .find(MuiButton)
+      .find(Button)
       .at(1)
       .simulate('click')
     expect(wrapper.find('profile-navigation')).toBeTruthy()
-    expect(wrapper.find(MuiButton)).toBeTruthy()
+    expect(wrapper.find(Button)).toBeTruthy()
     expect(mockhandlePrevious.mock.calls.length).toEqual(1)
     expect(mockhandleNext.mock.calls.length).toEqual(1)
   })

src/components/ProfileType/ProfileTypeNavigation.tsx

-import React from 'react'
-import 'components/ProfileType/profileTypeNavigation.scss'
-import classNames from 'classnames'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import MuiButton from '@material-ui/core/Button'
-import { ProfileTypeStepForm } from 'enum/profileType.enum'
-
-interface ProfileTypeNavigationProps {
-  step: ProfileTypeStepForm
-  handlePrevious: Function
-  handleNext: Function
-  disableNextButton: boolean
-}
-
-const ProfileTypeNavigation: React.FC<ProfileTypeNavigationProps> = ({
-  step,
-  handlePrevious,
-  handleNext,
-  disableNextButton,
-}: ProfileTypeNavigationProps) => {
-  const { t } = useI18n()
-
-  const handlePreviousClick = () => {
-    handlePrevious()
-  }
-  const handleNextClick = () => {
-    handleNext()
-  }
-
-  return (
-    <div className="profile-navigation">
-      <MuiButton
-        onClick={handlePreviousClick}
-        className={'profile-navigation-button'}
-        disabled={step === ProfileTypeStepForm.HOUSING_TYPE}
-        classes={{
-          root: 'btn-profile-back',
-          label: 'text-16-normal',
-        }}
-      >
-        {`< ${t('profile_type.form.previous')}`}
-      </MuiButton>
-      <MuiButton
-        onClick={handleNextClick}
-        className={classNames('profile-navigation-button', {
-          ['disabled']: disableNextButton,
-        })}
-        disabled={disableNextButton}
-        classes={{
-          root: 'btn-profile-next rounded',
-          label: 'text-16-normal',
-        }}
-      >
-        {step === ProfileTypeStepForm.COOKING_FLUID
-          ? t('profile_type.form.end')
-          : `${t('profile_type.form.next')} >`}
-      </MuiButton>
-    </div>
-  )
-}
-
-export default ProfileTypeNavigation
+import React from 'react'
+import 'components/ProfileType/profileTypeNavigation.scss'
+import classNames from 'classnames'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Button from '@material-ui/core/Button'
+import { ProfileTypeStepForm } from 'enum/profileType.enum'
+
+interface ProfileTypeNavigationProps {
+  step: ProfileTypeStepForm
+  handlePrevious: Function
+  handleNext: Function
+  disableNextButton: boolean
+}
+
+const ProfileTypeNavigation: React.FC<ProfileTypeNavigationProps> = ({
+  step,
+  handlePrevious,
+  handleNext,
+  disableNextButton,
+}: ProfileTypeNavigationProps) => {
+  const { t } = useI18n()
+
+  const handlePreviousClick = () => {
+    handlePrevious()
+  }
+  const handleNextClick = () => {
+    handleNext()
+  }
+
+  return (
+    <div className="profile-navigation">
+      <Button
+        aria-label={t('profile_type.accessibility.button_previous')}
+        onClick={handlePreviousClick}
+        className={'profile-navigation-button'}
+        disabled={step === ProfileTypeStepForm.HOUSING_TYPE}
+        classes={{
+          root: 'btn-profile-back',
+          label: 'text-16-normal',
+        }}
+      >
+        {`< ${t('profile_type.form.button_previous')}`}
+      </Button>
+      <Button
+        aria-label={
+          step === ProfileTypeStepForm.COOKING_FLUID
+            ? t('profile_type.accessibility.button_end')
+            : t('profile_type.accessibility.button_next')
+        }
+        onClick={handleNextClick}
+        className={classNames('profile-navigation-button', {
+          ['disabled']: disableNextButton,
+        })}
+        disabled={disableNextButton}
+        classes={{
+          root: 'btn-profile-next rounded',
+          label: 'text-16-normal',
+        }}
+      >
+        {step === ProfileTypeStepForm.COOKING_FLUID
+          ? t('profile_type.form.button_end')
+          : `${t('profile_type.form.button_next')} >`}
+      </Button>
+    </div>
+  )
+}
+
+export default ProfileTypeNavigation

src/locales/fr.json

@@ -477,7 +477,7 @@
   "profile_type": {
     "title_profile": "Profil de consommation",
     "read_profile": "Ajuster mon profil",
-    "update_profile": "J'ajuste mon profil",
+    "button_update_profile": "J'ajuste mon profil",
     "your_profile": "Votre profil",
     "multi_choices": "Plusieurs réponses possibles",
     "housing_type": {
@@ -624,15 +624,22 @@
       "2": "Gaz"
     },
     "form": {
-      "previous": "Précédent",
-      "next": "Suivant",
-      "end": "Terminer"
+      "button_previous": "Précédent",
+      "button_next": "Suivant",
+      "button_end": "Terminer"
     },
     "finished": {
       "title": "Terminé !",
       "label1": "Grâce à ces informations, vous pourrez comparer votre consommation avec un foyer vous ressemblant davantage.",
       "label2": "Nous pourrons aussi vous proposer des écogestes adaptés à votre profil.",
-      "OK": "OK"
+      "button_validate": "OK"
+    },
+    "accessibility": {
+      "button_end": "Terminer la mise à jour du profil",
+      "button_next": "Aller à la section suivante",
+      "button_previous": "Retour à la section précédente",
+      "button_update_profile": "Ouvrir la page de mise à jour du profil",
+      "button_validate": "Valider"
     }
   },
   "quiz": {