diff --git a/.eslintrc.js b/.eslintrc.js
index d39998612f8c0db553cef901130d3386610ba5e3..9d68cf3abd23e188c8e6ce7686ef59070cd408d9 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -5,6 +5,7 @@ module.exports = {
     'plugin:react-hooks/recommended',
     'prettier', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
     'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+    'plugin:jsx-a11y/recommended',
   ],
   overrides: [
     {
@@ -41,6 +42,9 @@ module.exports = {
 
         // Allow some params to be described and some to be omitted
         'jsdoc/check-param-names': 0,
+
+        // a11y label fix, nesting is enough
+        'jsx-a11y/label-has-associated-control': 0,
       },
     },
     {
@@ -51,7 +55,7 @@ module.exports = {
       },
     },
   ],
-  plugins: ['@typescript-eslint', 'react', 'react-hooks', 'jest'],
+  plugins: ['@typescript-eslint', 'react', 'react-hooks', 'jest', 'jsx-a11y'],
   parser: '@typescript-eslint/parser', // Specifies the ESLint parser
   parserOptions: {
     ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
diff --git a/package.json b/package.json
index bccc161455df693c20eafd52e776428ba5b887f1..790f8c1c0f2c075632d1bec60edc2f9ade564652 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
     "lint": "yarn lint:js",
     "lint:js": "eslint src -c .eslintrc.js --fix",
     "load-data": "cd test && importData.bat",
-    "prebuild": "yarn lint",
     "prepare": "husky install",
     "release": "standard-version --no-verify",
     "start": "cs start --browser",
@@ -121,6 +120,7 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^27.2.3",
     "eslint-plugin-jsdoc": "^46.8.2",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
diff --git a/src/components/Challenge/ChallengeView.tsx b/src/components/Challenge/ChallengeView.tsx
index b253829e1f9ce227a508b8f36073e0110a4780b0..d55765ebf5596fe03eb72362b2959a7031e826b7 100644
--- a/src/components/Challenge/ChallengeView.tsx
+++ b/src/components/Challenge/ChallengeView.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
 import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
 import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
diff --git a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
index ee273a798dd2f43980f4583ff4a56f0a5e184a1a..7d00ebf2f1864fd6dbf382541bd91ae3b7664ee1 100644
--- a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
+++ b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
@@ -411,18 +411,28 @@ exports[`lastDuelModal component should render correctly 1`] = `
                       <div
                         class="duel-last-modal-root"
                       >
-                        <div>
-                          <svg
-                            aria-hidden="true"
-                            class="closeIcon styles__icon___23x3R"
-                            height="16"
-                            width="16"
+                        <button
+                          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label"
                           >
-                            <use
-                              xlink:href="#test-file-stub"
-                            />
-                          </svg>
-                        </div>
+                            <svg
+                              class="styles__icon___23x3R"
+                              height="16"
+                              width="16"
+                            >
+                              <use
+                                xlink:href="#test-file-stub"
+                              />
+                            </svg>
+                          </span>
+                          <span
+                            class="MuiTouchRipple-root"
+                          />
+                        </button>
                         <svg
                           aria-hidden="true"
                           class="icon styles__icon___23x3R"
@@ -671,43 +681,126 @@ exports[`lastDuelModal component should render correctly 1`] = `
                             <div
                               className="duel-last-modal-root"
                             >
-                              <div
+                              <WithStyles(ForwardRef(IconButton))
+                                className="modal-paper-close-button"
                                 onClick={[MockFunction]}
                               >
-                                <StyledIcon
-                                  className="closeIcon"
-                                  icon="test-file-stub"
-                                  size={16}
+                                <ForwardRef(IconButton)
+                                  className="modal-paper-close-button"
+                                  classes={
+                                    Object {
+                                      "colorInherit": "MuiIconButton-colorInherit",
+                                      "colorPrimary": "MuiIconButton-colorPrimary",
+                                      "colorSecondary": "MuiIconButton-colorSecondary",
+                                      "disabled": "Mui-disabled",
+                                      "edgeEnd": "MuiIconButton-edgeEnd",
+                                      "edgeStart": "MuiIconButton-edgeStart",
+                                      "label": "MuiIconButton-label",
+                                      "root": "MuiIconButton-root",
+                                      "sizeSmall": "MuiIconButton-sizeSmall",
+                                    }
+                                  }
+                                  onClick={[MockFunction]}
                                 >
-                                  <Icon
-                                    aria-hidden={true}
-                                    className="closeIcon"
-                                    icon="test-file-stub"
-                                    size={16}
-                                    spin={false}
+                                  <WithStyles(ForwardRef(ButtonBase))
+                                    centerRipple={true}
+                                    className="MuiIconButton-root modal-paper-close-button"
+                                    disabled={false}
+                                    focusRipple={true}
+                                    onClick={[MockFunction]}
                                   >
-                                    <Component
-                                      aria-hidden={true}
-                                      className="closeIcon styles__icon___23x3R"
-                                      height={16}
-                                      style={Object {}}
-                                      width={16}
+                                    <ForwardRef(ButtonBase)
+                                      centerRipple={true}
+                                      className="MuiIconButton-root modal-paper-close-button"
+                                      classes={
+                                        Object {
+                                          "disabled": "Mui-disabled",
+                                          "focusVisible": "Mui-focusVisible",
+                                          "root": "MuiButtonBase-root",
+                                        }
+                                      }
+                                      disabled={false}
+                                      focusRipple={true}
+                                      onClick={[MockFunction]}
                                     >
-                                      <svg
-                                        aria-hidden={true}
-                                        className="closeIcon styles__icon___23x3R"
-                                        height={16}
-                                        style={Object {}}
-                                        width={16}
+                                      <button
+                                        className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+                                        disabled={false}
+                                        onBlur={[Function]}
+                                        onClick={[MockFunction]}
+                                        onDragLeave={[Function]}
+                                        onFocus={[Function]}
+                                        onKeyDown={[Function]}
+                                        onKeyUp={[Function]}
+                                        onMouseDown={[Function]}
+                                        onMouseLeave={[Function]}
+                                        onMouseUp={[Function]}
+                                        onTouchEnd={[Function]}
+                                        onTouchMove={[Function]}
+                                        onTouchStart={[Function]}
+                                        tabIndex={0}
+                                        type="button"
                                       >
-                                        <use
-                                          xlinkHref="#test-file-stub"
-                                        />
-                                      </svg>
-                                    </Component>
-                                  </Icon>
-                                </StyledIcon>
-                              </div>
+                                        <span
+                                          className="MuiIconButton-label"
+                                        >
+                                          <Icon
+                                            icon="test-file-stub"
+                                            size={16}
+                                            spin={false}
+                                          >
+                                            <Component
+                                              className="styles__icon___23x3R"
+                                              height={16}
+                                              style={Object {}}
+                                              width={16}
+                                            >
+                                              <svg
+                                                className="styles__icon___23x3R"
+                                                height={16}
+                                                style={Object {}}
+                                                width={16}
+                                              >
+                                                <use
+                                                  xlinkHref="#test-file-stub"
+                                                />
+                                              </svg>
+                                            </Component>
+                                          </Icon>
+                                        </span>
+                                        <WithStyles(memo)
+                                          center={true}
+                                        >
+                                          <ForwardRef(TouchRipple)
+                                            center={true}
+                                            classes={
+                                              Object {
+                                                "child": "MuiTouchRipple-child",
+                                                "childLeaving": "MuiTouchRipple-childLeaving",
+                                                "childPulsate": "MuiTouchRipple-childPulsate",
+                                                "ripple": "MuiTouchRipple-ripple",
+                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
+                                                "root": "MuiTouchRipple-root",
+                                              }
+                                            }
+                                          >
+                                            <span
+                                              className="MuiTouchRipple-root"
+                                            >
+                                              <TransitionGroup
+                                                childFactory={[Function]}
+                                                component={null}
+                                                exit={true}
+                                              />
+                                            </span>
+                                          </ForwardRef(TouchRipple)>
+                                        </WithStyles(memo)>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
                               <StyledIcon
                                 className="icon"
                                 icon="test-file-stub"
diff --git a/src/components/Duel/LastDuelModal/lastDuelModal.scss b/src/components/Duel/LastDuelModal/lastDuelModal.scss
index 65fb3afaa6d50b50700e590a13b90708e091ff01..d5dd373730a53a4397b44d1b7c21a51d859e59b0 100644
--- a/src/components/Duel/LastDuelModal/lastDuelModal.scss
+++ b/src/components/Duel/LastDuelModal/lastDuelModal.scss
@@ -5,10 +5,7 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  .closeIcon {
-    float: right;
-    cursor: pointer;
-  }
+
   .icon {
     margin: auto;
   }
diff --git a/src/components/Duel/LastDuelModal/lastDuelModal.tsx b/src/components/Duel/LastDuelModal/lastDuelModal.tsx
index 032a32d9fa787c812aef18b136de1eca862518d6..2e13dfff83fa585f7aed4b97b0c1bc3cac8b84fd 100644
--- a/src/components/Duel/LastDuelModal/lastDuelModal.tsx
+++ b/src/components/Duel/LastDuelModal/lastDuelModal.tsx
@@ -1,8 +1,10 @@
+import { IconButton } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import star from 'assets/icons/visu/duel/star.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import React from 'react'
 import './lastDuelModal.scss'
 
@@ -26,9 +28,12 @@ const LastDuelModal = ({ open, handleCloseClick }: LastDuelModalProps) => {
     >
       <div id="accessibility-title">{t('last_duel_modal.title')}</div>
       <div className="duel-last-modal-root">
-        <div onClick={handleCloseClick}>
-          <StyledIcon className="closeIcon" icon={CloseIcon} size={16} />
-        </div>
+        <IconButton
+          className="modal-paper-close-button"
+          onClick={handleCloseClick}
+        >
+          <Icon size={16} icon={CloseIcon} />
+        </IconButton>
         <StyledIcon className="icon" icon={star} size={48} />
         <h1 className="text-28-bold">{t('last_duel_modal.title')}</h1>
         <div>
diff --git a/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx b/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx
index cb5842537012afc4ff28f714d8563779b9262e46..2ae4fb300120eff93e1a2ed31a8c902fe3146868 100644
--- a/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx
+++ b/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx
@@ -1,16 +1,17 @@
-import { Link } from '@material-ui/core/'
 import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
 import StyledEcogestureCard from 'components/CommonKit/Card/StyledEcogestureCard'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { Ecogesture } from 'models'
 import React, { useEffect, useState } from 'react'
-import { Link as RouterLink } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { importIconById } from 'utils/utils'
 import EfficiencyRating from '../EfficiencyRating/EfficiencyRating'
 import './ecogestureCard.scss'
 
 const EcogestureCard = ({ ecogesture }: { ecogesture: Ecogesture }) => {
+  const navigate = useNavigate()
   const [ecogestureIcon, setEcogestureIcon] = useState<string>('')
+
   useEffect(() => {
     async function handleEcogestureIcon() {
       const icon = await importIconById(ecogesture.id, 'ecogesture')
@@ -22,23 +23,18 @@ const EcogestureCard = ({ ecogesture }: { ecogesture: Ecogesture }) => {
   }, [ecogesture])
 
   return (
-    <Link
-      to={{
-        pathname: `/ecogesture/${ecogesture.id}`,
-      }}
-      component={RouterLink}
+    <StyledEcogestureCard
+      onClick={() => navigate(`/ecogesture/${ecogesture.id}`)}
       className="ecogesture-list-item"
     >
-      <StyledEcogestureCard>
-        <div className="ec-content">
-          <StyledIcon className="Icon" icon={ecogestureIcon} size={50} />
-          <div className="ec-content-short-name text-15-bold">
-            {ecogesture.shortName}
-          </div>
-          <EfficiencyRating result={Math.round(ecogesture.efficiency)} />
+      <div className="ec-content">
+        <StyledIcon className="Icon" icon={ecogestureIcon} size={50} />
+        <div className="ec-content-short-name text-15-bold">
+          {ecogesture.shortName}
         </div>
-      </StyledEcogestureCard>
-    </Link>
+        <EfficiencyRating result={Math.round(ecogesture.efficiency)} />
+      </div>
+    </StyledEcogestureCard>
   )
 }
 
diff --git a/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap b/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
index 67ce554e79c991ea674a77a280ee4997b9e497da..4651aef74bf933a342f65549c0b21a2740fb46be 100644
--- a/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
@@ -67,471 +67,349 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
         }
       }
     >
-      <WithStyles(ForwardRef(Link))
+      <StyledEcogestureCard
         className="ecogesture-list-item"
-        component={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "displayName": "Link",
-            "render": [Function],
-          }
-        }
-        to={
-          Object {
-            "pathname": "/ecogesture/ECOGESTURE001",
-          }
-        }
+        onClick={[Function]}
       >
-        <ForwardRef(Link)
+        <WithStyles(WithStyles(ForwardRef(CardActionArea)))
           className="ecogesture-list-item"
-          classes={
-            Object {
-              "button": "MuiLink-button",
-              "focusVisible": "Mui-focusVisible",
-              "root": "MuiLink-root",
-              "underlineAlways": "MuiLink-underlineAlways",
-              "underlineHover": "MuiLink-underlineHover",
-              "underlineNone": "MuiLink-underlineNone",
-            }
-          }
-          component={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "displayName": "Link",
-              "render": [Function],
-            }
-          }
-          to={
-            Object {
-              "pathname": "/ecogesture/ECOGESTURE001",
-            }
-          }
+          onClick={[Function]}
         >
-          <WithStyles(ForwardRef(Typography))
-            className="MuiLink-root MuiLink-underlineHover ecogesture-list-item"
-            color="primary"
-            component={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "displayName": "Link",
-                "render": [Function],
-              }
-            }
-            onBlur={[Function]}
-            onFocus={[Function]}
-            to={
+          <WithStyles(ForwardRef(CardActionArea))
+            className="ecogesture-list-item"
+            classes={
               Object {
-                "pathname": "/ecogesture/ECOGESTURE001",
+                "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
               }
             }
-            variant="inherit"
+            onClick={[Function]}
           >
-            <ForwardRef(Typography)
-              className="MuiLink-root MuiLink-underlineHover ecogesture-list-item"
+            <ForwardRef(CardActionArea)
+              className="ecogesture-list-item"
               classes={
                 Object {
-                  "alignCenter": "MuiTypography-alignCenter",
-                  "alignJustify": "MuiTypography-alignJustify",
-                  "alignLeft": "MuiTypography-alignLeft",
-                  "alignRight": "MuiTypography-alignRight",
-                  "body1": "MuiTypography-body1",
-                  "body2": "MuiTypography-body2",
-                  "button": "MuiTypography-button",
-                  "caption": "MuiTypography-caption",
-                  "colorError": "MuiTypography-colorError",
-                  "colorInherit": "MuiTypography-colorInherit",
-                  "colorPrimary": "MuiTypography-colorPrimary",
-                  "colorSecondary": "MuiTypography-colorSecondary",
-                  "colorTextPrimary": "MuiTypography-colorTextPrimary",
-                  "colorTextSecondary": "MuiTypography-colorTextSecondary",
-                  "displayBlock": "MuiTypography-displayBlock",
-                  "displayInline": "MuiTypography-displayInline",
-                  "gutterBottom": "MuiTypography-gutterBottom",
-                  "h1": "MuiTypography-h1",
-                  "h2": "MuiTypography-h2",
-                  "h3": "MuiTypography-h3",
-                  "h4": "MuiTypography-h4",
-                  "h5": "MuiTypography-h5",
-                  "h6": "MuiTypography-h6",
-                  "noWrap": "MuiTypography-noWrap",
-                  "overline": "MuiTypography-overline",
-                  "paragraph": "MuiTypography-paragraph",
-                  "root": "MuiTypography-root",
-                  "srOnly": "MuiTypography-srOnly",
-                  "subtitle1": "MuiTypography-subtitle1",
-                  "subtitle2": "MuiTypography-subtitle2",
-                }
-              }
-              color="primary"
-              component={
-                Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "displayName": "Link",
-                  "render": [Function],
+                  "focusHighlight": "MuiCardActionArea-focusHighlight",
+                  "focusVisible": "Mui-focusVisible",
+                  "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
                 }
               }
-              onBlur={[Function]}
-              onFocus={[Function]}
-              to={
-                Object {
-                  "pathname": "/ecogesture/ECOGESTURE001",
-                }
-              }
-              variant="inherit"
+              onClick={[Function]}
             >
-              <Link
-                className="MuiTypography-root MuiLink-root MuiLink-underlineHover ecogesture-list-item MuiTypography-colorPrimary"
-                onBlur={[Function]}
-                onFocus={[Function]}
-                to={
-                  Object {
-                    "pathname": "/ecogesture/ECOGESTURE001",
-                  }
-                }
+              <WithStyles(ForwardRef(ButtonBase))
+                className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 ecogesture-list-item"
+                focusVisibleClassName="Mui-focusVisible"
+                onClick={[Function]}
               >
-                <a
-                  className="MuiTypography-root MuiLink-root MuiLink-underlineHover ecogesture-list-item MuiTypography-colorPrimary"
-                  href="/ecogesture/ECOGESTURE001"
-                  onBlur={[Function]}
+                <ForwardRef(ButtonBase)
+                  className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 ecogesture-list-item"
+                  classes={
+                    Object {
+                      "disabled": "Mui-disabled",
+                      "focusVisible": "Mui-focusVisible",
+                      "root": "MuiButtonBase-root",
+                    }
+                  }
+                  focusVisibleClassName="Mui-focusVisible"
                   onClick={[Function]}
-                  onFocus={[Function]}
                 >
-                  <StyledEcogestureCard>
-                    <WithStyles(WithStyles(ForwardRef(CardActionArea)))>
-                      <WithStyles(ForwardRef(CardActionArea))
+                  <button
+                    className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 ecogesture-list-item"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onDragLeave={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchMove={[Function]}
+                    onTouchStart={[Function]}
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <WithStyles(WithStyles(ForwardRef(CardContent)))>
+                      <WithStyles(ForwardRef(CardContent))
                         classes={
                           Object {
-                            "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
+                            "root": "WithStyles(ForwardRef(CardContent))-root-2",
                           }
                         }
                       >
-                        <ForwardRef(CardActionArea)
+                        <ForwardRef(CardContent)
                           classes={
                             Object {
-                              "focusHighlight": "MuiCardActionArea-focusHighlight",
-                              "focusVisible": "Mui-focusVisible",
-                              "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
+                              "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
                             }
                           }
                         >
-                          <WithStyles(ForwardRef(ButtonBase))
-                            className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1"
-                            focusVisibleClassName="Mui-focusVisible"
+                          <div
+                            className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
                           >
-                            <ForwardRef(ButtonBase)
-                              className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1"
-                              classes={
-                                Object {
-                                  "disabled": "Mui-disabled",
-                                  "focusVisible": "Mui-focusVisible",
-                                  "root": "MuiButtonBase-root",
-                                }
-                              }
-                              focusVisibleClassName="Mui-focusVisible"
+                            <div
+                              className="ec-content"
                             >
-                              <button
-                                className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1"
-                                disabled={false}
-                                onBlur={[Function]}
-                                onDragLeave={[Function]}
-                                onFocus={[Function]}
-                                onKeyDown={[Function]}
-                                onKeyUp={[Function]}
-                                onMouseDown={[Function]}
-                                onMouseLeave={[Function]}
-                                onMouseUp={[Function]}
-                                onTouchEnd={[Function]}
-                                onTouchMove={[Function]}
-                                onTouchStart={[Function]}
-                                tabIndex={0}
-                                type="button"
+                              <StyledIcon
+                                className="Icon"
+                                icon="test-file-stub"
+                                size={50}
+                              >
+                                <Icon
+                                  aria-hidden={true}
+                                  className="Icon"
+                                  icon="test-file-stub"
+                                  size={50}
+                                  spin={false}
+                                >
+                                  <Component
+                                    aria-hidden={true}
+                                    className="Icon styles__icon___23x3R"
+                                    height={50}
+                                    style={Object {}}
+                                    width={50}
+                                  >
+                                    <svg
+                                      aria-hidden={true}
+                                      className="Icon styles__icon___23x3R"
+                                      height={50}
+                                      style={Object {}}
+                                      width={50}
+                                    >
+                                      <use
+                                        xlinkHref="#test-file-stub"
+                                      />
+                                    </svg>
+                                  </Component>
+                                </Icon>
+                              </StyledIcon>
+                              <div
+                                className="ec-content-short-name text-15-bold"
+                              >
+                                Bonhomme de neige
+                              </div>
+                              <EfficiencyRating
+                                result={4}
                               >
-                                <WithStyles(WithStyles(ForwardRef(CardContent)))>
-                                  <WithStyles(ForwardRef(CardContent))
-                                    classes={
-                                      Object {
-                                        "root": "WithStyles(ForwardRef(CardContent))-root-2",
-                                      }
-                                    }
+                                <div
+                                  className="thunder"
+                                >
+                                  <StyledIcon
+                                    className="star"
+                                    icon="test-file-stub"
+                                    key="1"
+                                    size={15}
                                   >
-                                    <ForwardRef(CardContent)
-                                      classes={
-                                        Object {
-                                          "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
-                                        }
-                                      }
+                                    <Icon
+                                      aria-hidden={true}
+                                      className="star"
+                                      icon="test-file-stub"
+                                      size={15}
+                                      spin={false}
                                     >
-                                      <div
-                                        className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
+                                      <Component
+                                        aria-hidden={true}
+                                        className="star styles__icon___23x3R"
+                                        height={15}
+                                        style={Object {}}
+                                        width={15}
                                       >
-                                        <div
-                                          className="ec-content"
+                                        <svg
+                                          aria-hidden={true}
+                                          className="star styles__icon___23x3R"
+                                          height={15}
+                                          style={Object {}}
+                                          width={15}
                                         >
-                                          <StyledIcon
-                                            className="Icon"
-                                            icon="test-file-stub"
-                                            size={50}
-                                          >
-                                            <Icon
-                                              aria-hidden={true}
-                                              className="Icon"
-                                              icon="test-file-stub"
-                                              size={50}
-                                              spin={false}
-                                            >
-                                              <Component
-                                                aria-hidden={true}
-                                                className="Icon styles__icon___23x3R"
-                                                height={50}
-                                                style={Object {}}
-                                                width={50}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="Icon styles__icon___23x3R"
-                                                  height={50}
-                                                  style={Object {}}
-                                                  width={50}
-                                                >
-                                                  <use
-                                                    xlinkHref="#test-file-stub"
-                                                  />
-                                                </svg>
-                                              </Component>
-                                            </Icon>
-                                          </StyledIcon>
-                                          <div
-                                            className="ec-content-short-name text-15-bold"
-                                          >
-                                            Bonhomme de neige
-                                          </div>
-                                          <EfficiencyRating
-                                            result={4}
-                                          >
-                                            <div
-                                              className="thunder"
-                                            >
-                                              <StyledIcon
-                                                className="star"
-                                                icon="test-file-stub"
-                                                key="1"
-                                                size={15}
-                                              >
-                                                <Icon
-                                                  aria-hidden={true}
-                                                  className="star"
-                                                  icon="test-file-stub"
-                                                  size={15}
-                                                  spin={false}
-                                                >
-                                                  <Component
-                                                    aria-hidden={true}
-                                                    className="star styles__icon___23x3R"
-                                                    height={15}
-                                                    style={Object {}}
-                                                    width={15}
-                                                  >
-                                                    <svg
-                                                      aria-hidden={true}
-                                                      className="star styles__icon___23x3R"
-                                                      height={15}
-                                                      style={Object {}}
-                                                      width={15}
-                                                    >
-                                                      <use
-                                                        xlinkHref="#test-file-stub"
-                                                      />
-                                                    </svg>
-                                                  </Component>
-                                                </Icon>
-                                              </StyledIcon>
-                                              <StyledIcon
-                                                className="star"
-                                                icon="test-file-stub"
-                                                key="2"
-                                                size={15}
-                                              >
-                                                <Icon
-                                                  aria-hidden={true}
-                                                  className="star"
-                                                  icon="test-file-stub"
-                                                  size={15}
-                                                  spin={false}
-                                                >
-                                                  <Component
-                                                    aria-hidden={true}
-                                                    className="star styles__icon___23x3R"
-                                                    height={15}
-                                                    style={Object {}}
-                                                    width={15}
-                                                  >
-                                                    <svg
-                                                      aria-hidden={true}
-                                                      className="star styles__icon___23x3R"
-                                                      height={15}
-                                                      style={Object {}}
-                                                      width={15}
-                                                    >
-                                                      <use
-                                                        xlinkHref="#test-file-stub"
-                                                      />
-                                                    </svg>
-                                                  </Component>
-                                                </Icon>
-                                              </StyledIcon>
-                                              <StyledIcon
-                                                className="star"
-                                                icon="test-file-stub"
-                                                key="3"
-                                                size={15}
-                                              >
-                                                <Icon
-                                                  aria-hidden={true}
-                                                  className="star"
-                                                  icon="test-file-stub"
-                                                  size={15}
-                                                  spin={false}
-                                                >
-                                                  <Component
-                                                    aria-hidden={true}
-                                                    className="star styles__icon___23x3R"
-                                                    height={15}
-                                                    style={Object {}}
-                                                    width={15}
-                                                  >
-                                                    <svg
-                                                      aria-hidden={true}
-                                                      className="star styles__icon___23x3R"
-                                                      height={15}
-                                                      style={Object {}}
-                                                      width={15}
-                                                    >
-                                                      <use
-                                                        xlinkHref="#test-file-stub"
-                                                      />
-                                                    </svg>
-                                                  </Component>
-                                                </Icon>
-                                              </StyledIcon>
-                                              <StyledIcon
-                                                className="star"
-                                                icon="test-file-stub"
-                                                key="4"
-                                                size={15}
-                                              >
-                                                <Icon
-                                                  aria-hidden={true}
-                                                  className="star"
-                                                  icon="test-file-stub"
-                                                  size={15}
-                                                  spin={false}
-                                                >
-                                                  <Component
-                                                    aria-hidden={true}
-                                                    className="star styles__icon___23x3R"
-                                                    height={15}
-                                                    style={Object {}}
-                                                    width={15}
-                                                  >
-                                                    <svg
-                                                      aria-hidden={true}
-                                                      className="star styles__icon___23x3R"
-                                                      height={15}
-                                                      style={Object {}}
-                                                      width={15}
-                                                    >
-                                                      <use
-                                                        xlinkHref="#test-file-stub"
-                                                      />
-                                                    </svg>
-                                                  </Component>
-                                                </Icon>
-                                              </StyledIcon>
-                                              <StyledIcon
-                                                className="star"
-                                                icon="test-file-stub"
-                                                key="5"
-                                                size={15}
-                                              >
-                                                <Icon
-                                                  aria-hidden={true}
-                                                  className="star"
-                                                  icon="test-file-stub"
-                                                  size={15}
-                                                  spin={false}
-                                                >
-                                                  <Component
-                                                    aria-hidden={true}
-                                                    className="star styles__icon___23x3R"
-                                                    height={15}
-                                                    style={Object {}}
-                                                    width={15}
-                                                  >
-                                                    <svg
-                                                      aria-hidden={true}
-                                                      className="star styles__icon___23x3R"
-                                                      height={15}
-                                                      style={Object {}}
-                                                      width={15}
-                                                    >
-                                                      <use
-                                                        xlinkHref="#test-file-stub"
-                                                      />
-                                                    </svg>
-                                                  </Component>
-                                                </Icon>
-                                              </StyledIcon>
-                                            </div>
-                                          </EfficiencyRating>
-                                        </div>
-                                      </div>
-                                    </ForwardRef(CardContent)>
-                                  </WithStyles(ForwardRef(CardContent))>
-                                </WithStyles(WithStyles(ForwardRef(CardContent)))>
-                                <span
-                                  className="MuiCardActionArea-focusHighlight"
-                                />
-                                <WithStyles(memo)
-                                  center={false}
-                                >
-                                  <ForwardRef(TouchRipple)
-                                    center={false}
-                                    classes={
-                                      Object {
-                                        "child": "MuiTouchRipple-child",
-                                        "childLeaving": "MuiTouchRipple-childLeaving",
-                                        "childPulsate": "MuiTouchRipple-childPulsate",
-                                        "ripple": "MuiTouchRipple-ripple",
-                                        "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                        "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                        "root": "MuiTouchRipple-root",
-                                      }
-                                    }
+                                          <use
+                                            xlinkHref="#test-file-stub"
+                                          />
+                                        </svg>
+                                      </Component>
+                                    </Icon>
+                                  </StyledIcon>
+                                  <StyledIcon
+                                    className="star"
+                                    icon="test-file-stub"
+                                    key="2"
+                                    size={15}
                                   >
-                                    <span
-                                      className="MuiTouchRipple-root"
+                                    <Icon
+                                      aria-hidden={true}
+                                      className="star"
+                                      icon="test-file-stub"
+                                      size={15}
+                                      spin={false}
                                     >
-                                      <TransitionGroup
-                                        childFactory={[Function]}
-                                        component={null}
-                                        exit={true}
-                                      />
-                                    </span>
-                                  </ForwardRef(TouchRipple)>
-                                </WithStyles(memo)>
-                              </button>
-                            </ForwardRef(ButtonBase)>
-                          </WithStyles(ForwardRef(ButtonBase))>
-                        </ForwardRef(CardActionArea)>
-                      </WithStyles(ForwardRef(CardActionArea))>
-                    </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
-                  </StyledEcogestureCard>
-                </a>
-              </Link>
-            </ForwardRef(Typography)>
-          </WithStyles(ForwardRef(Typography))>
-        </ForwardRef(Link)>
-      </WithStyles(ForwardRef(Link))>
+                                      <Component
+                                        aria-hidden={true}
+                                        className="star styles__icon___23x3R"
+                                        height={15}
+                                        style={Object {}}
+                                        width={15}
+                                      >
+                                        <svg
+                                          aria-hidden={true}
+                                          className="star styles__icon___23x3R"
+                                          height={15}
+                                          style={Object {}}
+                                          width={15}
+                                        >
+                                          <use
+                                            xlinkHref="#test-file-stub"
+                                          />
+                                        </svg>
+                                      </Component>
+                                    </Icon>
+                                  </StyledIcon>
+                                  <StyledIcon
+                                    className="star"
+                                    icon="test-file-stub"
+                                    key="3"
+                                    size={15}
+                                  >
+                                    <Icon
+                                      aria-hidden={true}
+                                      className="star"
+                                      icon="test-file-stub"
+                                      size={15}
+                                      spin={false}
+                                    >
+                                      <Component
+                                        aria-hidden={true}
+                                        className="star styles__icon___23x3R"
+                                        height={15}
+                                        style={Object {}}
+                                        width={15}
+                                      >
+                                        <svg
+                                          aria-hidden={true}
+                                          className="star styles__icon___23x3R"
+                                          height={15}
+                                          style={Object {}}
+                                          width={15}
+                                        >
+                                          <use
+                                            xlinkHref="#test-file-stub"
+                                          />
+                                        </svg>
+                                      </Component>
+                                    </Icon>
+                                  </StyledIcon>
+                                  <StyledIcon
+                                    className="star"
+                                    icon="test-file-stub"
+                                    key="4"
+                                    size={15}
+                                  >
+                                    <Icon
+                                      aria-hidden={true}
+                                      className="star"
+                                      icon="test-file-stub"
+                                      size={15}
+                                      spin={false}
+                                    >
+                                      <Component
+                                        aria-hidden={true}
+                                        className="star styles__icon___23x3R"
+                                        height={15}
+                                        style={Object {}}
+                                        width={15}
+                                      >
+                                        <svg
+                                          aria-hidden={true}
+                                          className="star styles__icon___23x3R"
+                                          height={15}
+                                          style={Object {}}
+                                          width={15}
+                                        >
+                                          <use
+                                            xlinkHref="#test-file-stub"
+                                          />
+                                        </svg>
+                                      </Component>
+                                    </Icon>
+                                  </StyledIcon>
+                                  <StyledIcon
+                                    className="star"
+                                    icon="test-file-stub"
+                                    key="5"
+                                    size={15}
+                                  >
+                                    <Icon
+                                      aria-hidden={true}
+                                      className="star"
+                                      icon="test-file-stub"
+                                      size={15}
+                                      spin={false}
+                                    >
+                                      <Component
+                                        aria-hidden={true}
+                                        className="star styles__icon___23x3R"
+                                        height={15}
+                                        style={Object {}}
+                                        width={15}
+                                      >
+                                        <svg
+                                          aria-hidden={true}
+                                          className="star styles__icon___23x3R"
+                                          height={15}
+                                          style={Object {}}
+                                          width={15}
+                                        >
+                                          <use
+                                            xlinkHref="#test-file-stub"
+                                          />
+                                        </svg>
+                                      </Component>
+                                    </Icon>
+                                  </StyledIcon>
+                                </div>
+                              </EfficiencyRating>
+                            </div>
+                          </div>
+                        </ForwardRef(CardContent)>
+                      </WithStyles(ForwardRef(CardContent))>
+                    </WithStyles(WithStyles(ForwardRef(CardContent)))>
+                    <span
+                      className="MuiCardActionArea-focusHighlight"
+                    />
+                    <WithStyles(memo)
+                      center={false}
+                    >
+                      <ForwardRef(TouchRipple)
+                        center={false}
+                        classes={
+                          Object {
+                            "child": "MuiTouchRipple-child",
+                            "childLeaving": "MuiTouchRipple-childLeaving",
+                            "childPulsate": "MuiTouchRipple-childPulsate",
+                            "ripple": "MuiTouchRipple-ripple",
+                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                            "rippleVisible": "MuiTouchRipple-rippleVisible",
+                            "root": "MuiTouchRipple-root",
+                          }
+                        }
+                      >
+                        <span
+                          className="MuiTouchRipple-root"
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            component={null}
+                            exit={true}
+                          />
+                        </span>
+                      </ForwardRef(TouchRipple)>
+                    </WithStyles(memo)>
+                  </button>
+                </ForwardRef(ButtonBase)>
+              </WithStyles(ForwardRef(ButtonBase))>
+            </ForwardRef(CardActionArea)>
+          </WithStyles(ForwardRef(CardActionArea))>
+        </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
+      </StyledEcogestureCard>
     </EcogestureCard>
   </Router>
 </BrowserRouter>
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
index 91a4fd40e0e99c7103a647eb7abb129dbfc3ec4a..e90b2a64530163110d9cf23f69ba7bdb440e657c 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
@@ -1,4 +1,6 @@
 import { Button } from '@material-ui/core'
+import { render, screen, waitFor } from '@testing-library/react'
+import { EquipmentType } from 'enums'
 import { mount } from 'enzyme'
 import toJson from 'enzyme-to-json'
 import React from 'react'
@@ -30,8 +32,8 @@ describe('EcogestureFormEquipment component', () => {
     expect(toJson(wrapper)).toMatchSnapshot()
   })
 
-  it('should select equipment and unselect it', async () => {
-    const wrapper = mount(
+  it('should find X equipments', async () => {
+    const { container } = render(
       <Provider store={store}>
         <EcogestureFormEquipment
           currentProfileEcogesture={mockProfileEcogesture}
@@ -41,14 +43,12 @@ describe('EcogestureFormEquipment component', () => {
         />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-    wrapper.find('.item-eq').first().simulate('change')
-    await waitForComponentToPaint(wrapper)
-
-    expect(wrapper.find('.item-eq').first().hasClass('checked')).toBeTruthy()
-    wrapper.find('.checked').first().simulate('change')
-    await waitForComponentToPaint(wrapper)
-    expect(wrapper.find('.item-eq').first().hasClass('checked')).toBeFalsy()
+    await waitFor(() => null, { container })
+    const equipments = screen.getAllByRole('button', {
+      name: 'ecogesture_profile.equipments.accessible_label',
+    })
+    expect(equipments[0]).not.toBeDisabled()
+    expect(equipments.length).toBe(Object.keys(EquipmentType).length)
   })
 
   it('should click on disabled back button', async () => {
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx
index 85caa4b5381b778e4fb8c2b91da0d2a287ef0579..eca4b0a774d14d728af91863186e0ee07704edab 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx
@@ -1,3 +1,4 @@
+import { IconButton } from '@material-ui/core'
 import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
 import 'components/ProfileType/profileTypeForm.scss'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -59,10 +60,6 @@ const EcogestureFormEquipment = ({
     answer,
   ])
 
-  const isChecked = (value: EquipmentType): boolean => {
-    return answer.includes(value)
-  }
-
   const handleChange = useCallback(
     (value: EquipmentType) => {
       const tempAnswer = [...answer]
@@ -97,22 +94,18 @@ const EcogestureFormEquipment = ({
           </div>
           <div className="icons-container">
             {Object.values(EquipmentType).map(equipment => (
-              <label key={equipment} className="checkbox-equipment">
-                <input
-                  type="checkbox"
-                  value={equipment}
-                  name={equipment.toString()}
-                  onChange={() => handleChange(equipment)}
-                  checked={isChecked(equipment)}
-                  className={
-                    isChecked(equipment) ? 'item-eq checked' : 'item-eq'
-                  }
-                />
+              <IconButton
+                key={equipment}
+                style={{ borderRadius: '5px' }}
+                onClick={() => handleChange(equipment)}
+                className="checkbox-equipment"
+                aria-label={t('ecogesture_profile.equipments.accessible_label')}
+              >
                 <EquipmentIcon
                   equipment={equipment}
                   isChecked={answer.includes(equipment)}
                 />
-              </label>
+              </IconButton>
             ))}
           </div>
         </div>
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap b/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
index 7381cda358b3b37d937a45c18608809ca5b83850..b15399a11483d25721a0d9e1e8f73970599b1fb8 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
@@ -45,261 +45,1986 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
         <div
           className="icons-container"
         >
-          <label
+          <WithStyles(ForwardRef(IconButton))
+            aria-label="ecogesture_profile.equipments.accessible_label"
             className="checkbox-equipment"
             key="AIR_CONDITIONING"
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "5px",
+              }
+            }
           >
-            <input
-              checked={false}
-              className="item-eq"
-              name="AIR_CONDITIONING"
-              onChange={[Function]}
-              type="checkbox"
-              value="AIR_CONDITIONING"
-            />
-            <mock-equipment-icon
-              equipment="AIR_CONDITIONING"
-              isChecked={false}
-            />
-          </label>
-          <label
+            <ForwardRef(IconButton)
+              aria-label="ecogesture_profile.equipments.accessible_label"
+              className="checkbox-equipment"
+              classes={
+                Object {
+                  "colorInherit": "MuiIconButton-colorInherit",
+                  "colorPrimary": "MuiIconButton-colorPrimary",
+                  "colorSecondary": "MuiIconButton-colorSecondary",
+                  "disabled": "Mui-disabled",
+                  "edgeEnd": "MuiIconButton-edgeEnd",
+                  "edgeStart": "MuiIconButton-edgeStart",
+                  "label": "MuiIconButton-label",
+                  "root": "MuiIconButton-root",
+                  "sizeSmall": "MuiIconButton-sizeSmall",
+                }
+              }
+              onClick={[Function]}
+              style={
+                Object {
+                  "borderRadius": "5px",
+                }
+              }
+            >
+              <WithStyles(ForwardRef(ButtonBase))
+                aria-label="ecogesture_profile.equipments.accessible_label"
+                centerRipple={true}
+                className="MuiIconButton-root checkbox-equipment"
+                disabled={false}
+                focusRipple={true}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "borderRadius": "5px",
+                  }
+                }
+              >
+                <ForwardRef(ButtonBase)
+                  aria-label="ecogesture_profile.equipments.accessible_label"
+                  centerRipple={true}
+                  className="MuiIconButton-root checkbox-equipment"
+                  classes={
+                    Object {
+                      "disabled": "Mui-disabled",
+                      "focusVisible": "Mui-focusVisible",
+                      "root": "MuiButtonBase-root",
+                    }
+                  }
+                  disabled={false}
+                  focusRipple={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "borderRadius": "5px",
+                    }
+                  }
+                >
+                  <button
+                    aria-label="ecogesture_profile.equipments.accessible_label"
+                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onDragLeave={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchMove={[Function]}
+                    onTouchStart={[Function]}
+                    style={
+                      Object {
+                        "borderRadius": "5px",
+                      }
+                    }
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <span
+                      className="MuiIconButton-label"
+                    >
+                      <mock-equipment-icon
+                        equipment="AIR_CONDITIONING"
+                        isChecked={false}
+                      />
+                    </span>
+                    <WithStyles(memo)
+                      center={true}
+                    >
+                      <ForwardRef(TouchRipple)
+                        center={true}
+                        classes={
+                          Object {
+                            "child": "MuiTouchRipple-child",
+                            "childLeaving": "MuiTouchRipple-childLeaving",
+                            "childPulsate": "MuiTouchRipple-childPulsate",
+                            "ripple": "MuiTouchRipple-ripple",
+                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                            "rippleVisible": "MuiTouchRipple-rippleVisible",
+                            "root": "MuiTouchRipple-root",
+                          }
+                        }
+                      >
+                        <span
+                          className="MuiTouchRipple-root"
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            component={null}
+                            exit={true}
+                          />
+                        </span>
+                      </ForwardRef(TouchRipple)>
+                    </WithStyles(memo)>
+                  </button>
+                </ForwardRef(ButtonBase)>
+              </WithStyles(ForwardRef(ButtonBase))>
+            </ForwardRef(IconButton)>
+          </WithStyles(ForwardRef(IconButton))>
+          <WithStyles(ForwardRef(IconButton))
+            aria-label="ecogesture_profile.equipments.accessible_label"
             className="checkbox-equipment"
             key="COMPUTER"
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "5px",
+              }
+            }
           >
-            <input
-              checked={false}
-              className="item-eq"
-              name="COMPUTER"
-              onChange={[Function]}
-              type="checkbox"
-              value="COMPUTER"
-            />
-            <mock-equipment-icon
-              equipment="COMPUTER"
-              isChecked={false}
-            />
-          </label>
-          <label
+            <ForwardRef(IconButton)
+              aria-label="ecogesture_profile.equipments.accessible_label"
+              className="checkbox-equipment"
+              classes={
+                Object {
+                  "colorInherit": "MuiIconButton-colorInherit",
+                  "colorPrimary": "MuiIconButton-colorPrimary",
+                  "colorSecondary": "MuiIconButton-colorSecondary",
+                  "disabled": "Mui-disabled",
+                  "edgeEnd": "MuiIconButton-edgeEnd",
+                  "edgeStart": "MuiIconButton-edgeStart",
+                  "label": "MuiIconButton-label",
+                  "root": "MuiIconButton-root",
+                  "sizeSmall": "MuiIconButton-sizeSmall",
+                }
+              }
+              onClick={[Function]}
+              style={
+                Object {
+                  "borderRadius": "5px",
+                }
+              }
+            >
+              <WithStyles(ForwardRef(ButtonBase))
+                aria-label="ecogesture_profile.equipments.accessible_label"
+                centerRipple={true}
+                className="MuiIconButton-root checkbox-equipment"
+                disabled={false}
+                focusRipple={true}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "borderRadius": "5px",
+                  }
+                }
+              >
+                <ForwardRef(ButtonBase)
+                  aria-label="ecogesture_profile.equipments.accessible_label"
+                  centerRipple={true}
+                  className="MuiIconButton-root checkbox-equipment"
+                  classes={
+                    Object {
+                      "disabled": "Mui-disabled",
+                      "focusVisible": "Mui-focusVisible",
+                      "root": "MuiButtonBase-root",
+                    }
+                  }
+                  disabled={false}
+                  focusRipple={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "borderRadius": "5px",
+                    }
+                  }
+                >
+                  <button
+                    aria-label="ecogesture_profile.equipments.accessible_label"
+                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onDragLeave={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchMove={[Function]}
+                    onTouchStart={[Function]}
+                    style={
+                      Object {
+                        "borderRadius": "5px",
+                      }
+                    }
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <span
+                      className="MuiIconButton-label"
+                    >
+                      <mock-equipment-icon
+                        equipment="COMPUTER"
+                        isChecked={false}
+                      />
+                    </span>
+                    <WithStyles(memo)
+                      center={true}
+                    >
+                      <ForwardRef(TouchRipple)
+                        center={true}
+                        classes={
+                          Object {
+                            "child": "MuiTouchRipple-child",
+                            "childLeaving": "MuiTouchRipple-childLeaving",
+                            "childPulsate": "MuiTouchRipple-childPulsate",
+                            "ripple": "MuiTouchRipple-ripple",
+                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                            "rippleVisible": "MuiTouchRipple-rippleVisible",
+                            "root": "MuiTouchRipple-root",
+                          }
+                        }
+                      >
+                        <span
+                          className="MuiTouchRipple-root"
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            component={null}
+                            exit={true}
+                          />
+                        </span>
+                      </ForwardRef(TouchRipple)>
+                    </WithStyles(memo)>
+                  </button>
+                </ForwardRef(ButtonBase)>
+              </WithStyles(ForwardRef(ButtonBase))>
+            </ForwardRef(IconButton)>
+          </WithStyles(ForwardRef(IconButton))>
+          <WithStyles(ForwardRef(IconButton))
+            aria-label="ecogesture_profile.equipments.accessible_label"
             className="checkbox-equipment"
             key="MICROWAVE"
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "5px",
+              }
+            }
           >
-            <input
-              checked={false}
-              className="item-eq"
-              name="MICROWAVE"
-              onChange={[Function]}
-              type="checkbox"
-              value="MICROWAVE"
-            />
-            <mock-equipment-icon
-              equipment="MICROWAVE"
-              isChecked={false}
-            />
-          </label>
-          <label
+            <ForwardRef(IconButton)
+              aria-label="ecogesture_profile.equipments.accessible_label"
+              className="checkbox-equipment"
+              classes={
+                Object {
+                  "colorInherit": "MuiIconButton-colorInherit",
+                  "colorPrimary": "MuiIconButton-colorPrimary",
+                  "colorSecondary": "MuiIconButton-colorSecondary",
+                  "disabled": "Mui-disabled",
+                  "edgeEnd": "MuiIconButton-edgeEnd",
+                  "edgeStart": "MuiIconButton-edgeStart",
+                  "label": "MuiIconButton-label",
+                  "root": "MuiIconButton-root",
+                  "sizeSmall": "MuiIconButton-sizeSmall",
+                }
+              }
+              onClick={[Function]}
+              style={
+                Object {
+                  "borderRadius": "5px",
+                }
+              }
+            >
+              <WithStyles(ForwardRef(ButtonBase))
+                aria-label="ecogesture_profile.equipments.accessible_label"
+                centerRipple={true}
+                className="MuiIconButton-root checkbox-equipment"
+                disabled={false}
+                focusRipple={true}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "borderRadius": "5px",
+                  }
+                }
+              >
+                <ForwardRef(ButtonBase)
+                  aria-label="ecogesture_profile.equipments.accessible_label"
+                  centerRipple={true}
+                  className="MuiIconButton-root checkbox-equipment"
+                  classes={
+                    Object {
+                      "disabled": "Mui-disabled",
+                      "focusVisible": "Mui-focusVisible",
+                      "root": "MuiButtonBase-root",
+                    }
+                  }
+                  disabled={false}
+                  focusRipple={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "borderRadius": "5px",
+                    }
+                  }
+                >
+                  <button
+                    aria-label="ecogesture_profile.equipments.accessible_label"
+                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onDragLeave={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchMove={[Function]}
+                    onTouchStart={[Function]}
+                    style={
+                      Object {
+                        "borderRadius": "5px",
+                      }
+                    }
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <span
+                      className="MuiIconButton-label"
+                    >
+                      <mock-equipment-icon
+                        equipment="MICROWAVE"
+                        isChecked={false}
+                      />
+                    </span>
+                    <WithStyles(memo)
+                      center={true}
+                    >
+                      <ForwardRef(TouchRipple)
+                        center={true}
+                        classes={
+                          Object {
+                            "child": "MuiTouchRipple-child",
+                            "childLeaving": "MuiTouchRipple-childLeaving",
+                            "childPulsate": "MuiTouchRipple-childPulsate",
+                            "ripple": "MuiTouchRipple-ripple",
+                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                            "rippleVisible": "MuiTouchRipple-rippleVisible",
+                            "root": "MuiTouchRipple-root",
+                          }
+                        }
+                      >
+                        <span
+                          className="MuiTouchRipple-root"
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            component={null}
+                            exit={true}
+                          />
+                        </span>
+                      </ForwardRef(TouchRipple)>
+                    </WithStyles(memo)>
+                  </button>
+                </ForwardRef(ButtonBase)>
+              </WithStyles(ForwardRef(ButtonBase))>
+            </ForwardRef(IconButton)>
+          </WithStyles(ForwardRef(IconButton))>
+          <WithStyles(ForwardRef(IconButton))
+            aria-label="ecogesture_profile.equipments.accessible_label"
             className="checkbox-equipment"
             key="WASHING_MACHINE"
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "5px",
+              }
+            }
           >
-            <input
-              checked={false}
-              className="item-eq"
-              name="WASHING_MACHINE"
-              onChange={[Function]}
-              type="checkbox"
-              value="WASHING_MACHINE"
-            />
-            <mock-equipment-icon
-              equipment="WASHING_MACHINE"
-              isChecked={false}
-            />
-          </label>
-          <label
+            <ForwardRef(IconButton)
+              aria-label="ecogesture_profile.equipments.accessible_label"
+              className="checkbox-equipment"
+              classes={
+                Object {
+                  "colorInherit": "MuiIconButton-colorInherit",
+                  "colorPrimary": "MuiIconButton-colorPrimary",
+                  "colorSecondary": "MuiIconButton-colorSecondary",
+                  "disabled": "Mui-disabled",
+                  "edgeEnd": "MuiIconButton-edgeEnd",
+                  "edgeStart": "MuiIconButton-edgeStart",
+                  "label": "MuiIconButton-label",
+                  "root": "MuiIconButton-root",
+                  "sizeSmall": "MuiIconButton-sizeSmall",
+                }
+              }
+              onClick={[Function]}
+              style={
+                Object {
+                  "borderRadius": "5px",
+                }
+              }
+            >
+              <WithStyles(ForwardRef(ButtonBase))
+                aria-label="ecogesture_profile.equipments.accessible_label"
+                centerRipple={true}
+                className="MuiIconButton-root checkbox-equipment"
+                disabled={false}
+                focusRipple={true}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "borderRadius": "5px",
+                  }
+                }
+              >
+                <ForwardRef(ButtonBase)
+                  aria-label="ecogesture_profile.equipments.accessible_label"
+                  centerRipple={true}
+                  className="MuiIconButton-root checkbox-equipment"
+                  classes={
+                    Object {
+                      "disabled": "Mui-disabled",
+                      "focusVisible": "Mui-focusVisible",
+                      "root": "MuiButtonBase-root",
+                    }
+                  }
+                  disabled={false}
+                  focusRipple={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "borderRadius": "5px",
+                    }
+                  }
+                >
+                  <button
+                    aria-label="ecogesture_profile.equipments.accessible_label"
+                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onDragLeave={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchMove={[Function]}
+                    onTouchStart={[Function]}
+                    style={
+                      Object {
+                        "borderRadius": "5px",
+                      }
+                    }
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <span
+                      className="MuiIconButton-label"
+                    >
+                      <mock-equipment-icon
+                        equipment="WASHING_MACHINE"
+                        isChecked={false}
+                      />
+                    </span>
+                    <WithStyles(memo)
+                      center={true}
+                    >
+                      <ForwardRef(TouchRipple)
+                        center={true}
+                        classes={
+                          Object {
+                            "child": "MuiTouchRipple-child",
+                            "childLeaving": "MuiTouchRipple-childLeaving",
+                            "childPulsate": "MuiTouchRipple-childPulsate",
+                            "ripple": "MuiTouchRipple-ripple",
+                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                            "rippleVisible": "MuiTouchRipple-rippleVisible",
+                            "root": "MuiTouchRipple-root",
+                          }
+                        }
+                      >
+                        <span
+                          className="MuiTouchRipple-root"
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            component={null}
+                            exit={true}
+                          />
+                        </span>
+                      </ForwardRef(TouchRipple)>
+                    </WithStyles(memo)>
+                  </button>
+                </ForwardRef(ButtonBase)>
+              </WithStyles(ForwardRef(ButtonBase))>
+            </ForwardRef(IconButton)>
+          </WithStyles(ForwardRef(IconButton))>
+          <WithStyles(ForwardRef(IconButton))
+            aria-label="ecogesture_profile.equipments.accessible_label"
             className="checkbox-equipment"
             key="DISHWASHER"
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "5px",
+              }
+            }
           >
-            <input
-              checked={false}
-              className="item-eq"
-              name="DISHWASHER"
-              onChange={[Function]}
-              type="checkbox"
-              value="DISHWASHER"
-            />
-            <mock-equipment-icon
-              equipment="DISHWASHER"
-              isChecked={false}
-            />
-          </label>
-          <label
+            <ForwardRef(IconButton)
+              aria-label="ecogesture_profile.equipments.accessible_label"
+              className="checkbox-equipment"
+              classes={
+                Object {
+                  "colorInherit": "MuiIconButton-colorInherit",
+                  "colorPrimary": "MuiIconButton-colorPrimary",
+                  "colorSecondary": "MuiIconButton-colorSecondary",
+                  "disabled": "Mui-disabled",
+                  "edgeEnd": "MuiIconButton-edgeEnd",
+                  "edgeStart": "MuiIconButton-edgeStart",
+                  "label": "MuiIconButton-label",
+                  "root": "MuiIconButton-root",
+                  "sizeSmall": "MuiIconButton-sizeSmall",
+                }
+              }
+              onClick={[Function]}
+              style={
+                Object {
+                  "borderRadius": "5px",
+                }
+              }
+            >
+              <WithStyles(ForwardRef(ButtonBase))
+                aria-label="ecogesture_profile.equipments.accessible_label"
+                centerRipple={true}
+                className="MuiIconButton-root checkbox-equipment"
+                disabled={false}
+                focusRipple={true}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "borderRadius": "5px",
+                  }
+                }
+              >
+                <ForwardRef(ButtonBase)
+                  aria-label="ecogesture_profile.equipments.accessible_label"
+                  centerRipple={true}
+                  className="MuiIconButton-root checkbox-equipment"
+                  classes={
+                    Object {
+                      "disabled": "Mui-disabled",
+                      "focusVisible": "Mui-focusVisible",
+                      "root": "MuiButtonBase-root",
+                    }
+                  }
+                  disabled={false}
+                  focusRipple={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "borderRadius": "5px",
+                    }
+                  }
+                >
+                  <button
+                    aria-label="ecogesture_profile.equipments.accessible_label"
+                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onDragLeave={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchMove={[Function]}
+                    onTouchStart={[Function]}
+                    style={
+                      Object {
+                        "borderRadius": "5px",
+                      }
+                    }
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <span
+                      className="MuiIconButton-label"
+                    >
+                      <mock-equipment-icon
+                        equipment="DISHWASHER"
+                        isChecked={false}
+                      />
+                    </span>
+                    <WithStyles(memo)
+                      center={true}
+                    >
+                      <ForwardRef(TouchRipple)
+                        center={true}
+                        classes={
+                          Object {
+                            "child": "MuiTouchRipple-child",
+                            "childLeaving": "MuiTouchRipple-childLeaving",
+                            "childPulsate": "MuiTouchRipple-childPulsate",
+                            "ripple": "MuiTouchRipple-ripple",
+                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                            "rippleVisible": "MuiTouchRipple-rippleVisible",
+                            "root": "MuiTouchRipple-root",
+                          }
+                        }
+                      >
+                        <span
+                          className="MuiTouchRipple-root"
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            component={null}
+                            exit={true}
+                          />
+                        </span>
+                      </ForwardRef(TouchRipple)>
+                    </WithStyles(memo)>
+                  </button>
+                </ForwardRef(ButtonBase)>
+              </WithStyles(ForwardRef(ButtonBase))>
+            </ForwardRef(IconButton)>
+          </WithStyles(ForwardRef(IconButton))>
+          <WithStyles(ForwardRef(IconButton))
+            aria-label="ecogesture_profile.equipments.accessible_label"
             className="checkbox-equipment"
             key="COOKING_PLATES"
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "5px",
+              }
+            }
           >
-            <input
-              checked={false}
-              className="item-eq"
-              name="COOKING_PLATES"
-              onChange={[Function]}
-              type="checkbox"
-              value="COOKING_PLATES"
-            />
-            <mock-equipment-icon
-              equipment="COOKING_PLATES"
-              isChecked={false}
-            />
-          </label>
-          <label
+            <ForwardRef(IconButton)
+              aria-label="ecogesture_profile.equipments.accessible_label"
+              className="checkbox-equipment"
+              classes={
+                Object {
+                  "colorInherit": "MuiIconButton-colorInherit",
+                  "colorPrimary": "MuiIconButton-colorPrimary",
+                  "colorSecondary": "MuiIconButton-colorSecondary",
+                  "disabled": "Mui-disabled",
+                  "edgeEnd": "MuiIconButton-edgeEnd",
+                  "edgeStart": "MuiIconButton-edgeStart",
+                  "label": "MuiIconButton-label",
+                  "root": "MuiIconButton-root",
+                  "sizeSmall": "MuiIconButton-sizeSmall",
+                }
+              }
+              onClick={[Function]}
+              style={
+                Object {
+                  "borderRadius": "5px",
+                }
+              }
+            >
+              <WithStyles(ForwardRef(ButtonBase))
+                aria-label="ecogesture_profile.equipments.accessible_label"
+                centerRipple={true}
+                className="MuiIconButton-root checkbox-equipment"
+                disabled={false}
+                focusRipple={true}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "borderRadius": "5px",
+                  }
+                }
+              >
+                <ForwardRef(ButtonBase)
+                  aria-label="ecogesture_profile.equipments.accessible_label"
+                  centerRipple={true}
+                  className="MuiIconButton-root checkbox-equipment"
+                  classes={
+                    Object {
+                      "disabled": "Mui-disabled",
+                      "focusVisible": "Mui-focusVisible",
+                      "root": "MuiButtonBase-root",
+                    }
+                  }
+                  disabled={false}
+                  focusRipple={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "borderRadius": "5px",
+                    }
+                  }
+                >
+                  <button
+                    aria-label="ecogesture_profile.equipments.accessible_label"
+                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onDragLeave={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchMove={[Function]}
+                    onTouchStart={[Function]}
+                    style={
+                      Object {
+                        "borderRadius": "5px",
+                      }
+                    }
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <span
+                      className="MuiIconButton-label"
+                    >
+                      <mock-equipment-icon
+                        equipment="COOKING_PLATES"
+                        isChecked={false}
+                      />
+                    </span>
+                    <WithStyles(memo)
+                      center={true}
+                    >
+                      <ForwardRef(TouchRipple)
+                        center={true}
+                        classes={
+                          Object {
+                            "child": "MuiTouchRipple-child",
+                            "childLeaving": "MuiTouchRipple-childLeaving",
+                            "childPulsate": "MuiTouchRipple-childPulsate",
+                            "ripple": "MuiTouchRipple-ripple",
+                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                            "rippleVisible": "MuiTouchRipple-rippleVisible",
+                            "root": "MuiTouchRipple-root",
+                          }
+                        }
+                      >
+                        <span
+                          className="MuiTouchRipple-root"
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            component={null}
+                            exit={true}
+                          />
+                        </span>
+                      </ForwardRef(TouchRipple)>
+                    </WithStyles(memo)>
+                  </button>
+                </ForwardRef(ButtonBase)>
+              </WithStyles(ForwardRef(ButtonBase))>
+            </ForwardRef(IconButton)>
+          </WithStyles(ForwardRef(IconButton))>
+          <WithStyles(ForwardRef(IconButton))
+            aria-label="ecogesture_profile.equipments.accessible_label"
             className="checkbox-equipment"
             key="DRYER"
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "5px",
+              }
+            }
           >
-            <input
-              checked={false}
-              className="item-eq"
-              name="DRYER"
-              onChange={[Function]}
-              type="checkbox"
-              value="DRYER"
-            />
-            <mock-equipment-icon
-              equipment="DRYER"
-              isChecked={false}
-            />
-          </label>
-          <label
+            <ForwardRef(IconButton)
+              aria-label="ecogesture_profile.equipments.accessible_label"
+              className="checkbox-equipment"
+              classes={
+                Object {
+                  "colorInherit": "MuiIconButton-colorInherit",
+                  "colorPrimary": "MuiIconButton-colorPrimary",
+                  "colorSecondary": "MuiIconButton-colorSecondary",
+                  "disabled": "Mui-disabled",
+                  "edgeEnd": "MuiIconButton-edgeEnd",
+                  "edgeStart": "MuiIconButton-edgeStart",
+                  "label": "MuiIconButton-label",
+                  "root": "MuiIconButton-root",
+                  "sizeSmall": "MuiIconButton-sizeSmall",
+                }
+              }
+              onClick={[Function]}
+              style={
+                Object {
+                  "borderRadius": "5px",
+                }
+              }
+            >
+              <WithStyles(ForwardRef(ButtonBase))
+                aria-label="ecogesture_profile.equipments.accessible_label"
+                centerRipple={true}
+                className="MuiIconButton-root checkbox-equipment"
+                disabled={false}
+                focusRipple={true}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "borderRadius": "5px",
+                  }
+                }
+              >
+                <ForwardRef(ButtonBase)
+                  aria-label="ecogesture_profile.equipments.accessible_label"
+                  centerRipple={true}
+                  className="MuiIconButton-root checkbox-equipment"
+                  classes={
+                    Object {
+                      "disabled": "Mui-disabled",
+                      "focusVisible": "Mui-focusVisible",
+                      "root": "MuiButtonBase-root",
+                    }
+                  }
+                  disabled={false}
+                  focusRipple={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "borderRadius": "5px",
+                    }
+                  }
+                >
+                  <button
+                    aria-label="ecogesture_profile.equipments.accessible_label"
+                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onDragLeave={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchMove={[Function]}
+                    onTouchStart={[Function]}
+                    style={
+                      Object {
+                        "borderRadius": "5px",
+                      }
+                    }
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <span
+                      className="MuiIconButton-label"
+                    >
+                      <mock-equipment-icon
+                        equipment="DRYER"
+                        isChecked={false}
+                      />
+                    </span>
+                    <WithStyles(memo)
+                      center={true}
+                    >
+                      <ForwardRef(TouchRipple)
+                        center={true}
+                        classes={
+                          Object {
+                            "child": "MuiTouchRipple-child",
+                            "childLeaving": "MuiTouchRipple-childLeaving",
+                            "childPulsate": "MuiTouchRipple-childPulsate",
+                            "ripple": "MuiTouchRipple-ripple",
+                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                            "rippleVisible": "MuiTouchRipple-rippleVisible",
+                            "root": "MuiTouchRipple-root",
+                          }
+                        }
+                      >
+                        <span
+                          className="MuiTouchRipple-root"
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            component={null}
+                            exit={true}
+                          />
+                        </span>
+                      </ForwardRef(TouchRipple)>
+                    </WithStyles(memo)>
+                  </button>
+                </ForwardRef(ButtonBase)>
+              </WithStyles(ForwardRef(ButtonBase))>
+            </ForwardRef(IconButton)>
+          </WithStyles(ForwardRef(IconButton))>
+          <WithStyles(ForwardRef(IconButton))
+            aria-label="ecogesture_profile.equipments.accessible_label"
             className="checkbox-equipment"
             key="REFREGIRATOR"
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "5px",
+              }
+            }
           >
-            <input
-              checked={false}
-              className="item-eq"
-              name="REFREGIRATOR"
-              onChange={[Function]}
-              type="checkbox"
-              value="REFREGIRATOR"
-            />
-            <mock-equipment-icon
-              equipment="REFREGIRATOR"
-              isChecked={false}
-            />
-          </label>
-          <label
+            <ForwardRef(IconButton)
+              aria-label="ecogesture_profile.equipments.accessible_label"
+              className="checkbox-equipment"
+              classes={
+                Object {
+                  "colorInherit": "MuiIconButton-colorInherit",
+                  "colorPrimary": "MuiIconButton-colorPrimary",
+                  "colorSecondary": "MuiIconButton-colorSecondary",
+                  "disabled": "Mui-disabled",
+                  "edgeEnd": "MuiIconButton-edgeEnd",
+                  "edgeStart": "MuiIconButton-edgeStart",
+                  "label": "MuiIconButton-label",
+                  "root": "MuiIconButton-root",
+                  "sizeSmall": "MuiIconButton-sizeSmall",
+                }
+              }
+              onClick={[Function]}
+              style={
+                Object {
+                  "borderRadius": "5px",
+                }
+              }
+            >
+              <WithStyles(ForwardRef(ButtonBase))
+                aria-label="ecogesture_profile.equipments.accessible_label"
+                centerRipple={true}
+                className="MuiIconButton-root checkbox-equipment"
+                disabled={false}
+                focusRipple={true}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "borderRadius": "5px",
+                  }
+                }
+              >
+                <ForwardRef(ButtonBase)
+                  aria-label="ecogesture_profile.equipments.accessible_label"
+                  centerRipple={true}
+                  className="MuiIconButton-root checkbox-equipment"
+                  classes={
+                    Object {
+                      "disabled": "Mui-disabled",
+                      "focusVisible": "Mui-focusVisible",
+                      "root": "MuiButtonBase-root",
+                    }
+                  }
+                  disabled={false}
+                  focusRipple={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "borderRadius": "5px",
+                    }
+                  }
+                >
+                  <button
+                    aria-label="ecogesture_profile.equipments.accessible_label"
+                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onDragLeave={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchMove={[Function]}
+                    onTouchStart={[Function]}
+                    style={
+                      Object {
+                        "borderRadius": "5px",
+                      }
+                    }
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <span
+                      className="MuiIconButton-label"
+                    >
+                      <mock-equipment-icon
+                        equipment="REFREGIRATOR"
+                        isChecked={false}
+                      />
+                    </span>
+                    <WithStyles(memo)
+                      center={true}
+                    >
+                      <ForwardRef(TouchRipple)
+                        center={true}
+                        classes={
+                          Object {
+                            "child": "MuiTouchRipple-child",
+                            "childLeaving": "MuiTouchRipple-childLeaving",
+                            "childPulsate": "MuiTouchRipple-childPulsate",
+                            "ripple": "MuiTouchRipple-ripple",
+                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                            "rippleVisible": "MuiTouchRipple-rippleVisible",
+                            "root": "MuiTouchRipple-root",
+                          }
+                        }
+                      >
+                        <span
+                          className="MuiTouchRipple-root"
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            component={null}
+                            exit={true}
+                          />
+                        </span>
+                      </ForwardRef(TouchRipple)>
+                    </WithStyles(memo)>
+                  </button>
+                </ForwardRef(ButtonBase)>
+              </WithStyles(ForwardRef(ButtonBase))>
+            </ForwardRef(IconButton)>
+          </WithStyles(ForwardRef(IconButton))>
+          <WithStyles(ForwardRef(IconButton))
+            aria-label="ecogesture_profile.equipments.accessible_label"
             className="checkbox-equipment"
             key="FAN"
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "5px",
+              }
+            }
           >
-            <input
-              checked={false}
-              className="item-eq"
-              name="FAN"
-              onChange={[Function]}
-              type="checkbox"
-              value="FAN"
-            />
-            <mock-equipment-icon
-              equipment="FAN"
-              isChecked={false}
-            />
-          </label>
-          <label
+            <ForwardRef(IconButton)
+              aria-label="ecogesture_profile.equipments.accessible_label"
+              className="checkbox-equipment"
+              classes={
+                Object {
+                  "colorInherit": "MuiIconButton-colorInherit",
+                  "colorPrimary": "MuiIconButton-colorPrimary",
+                  "colorSecondary": "MuiIconButton-colorSecondary",
+                  "disabled": "Mui-disabled",
+                  "edgeEnd": "MuiIconButton-edgeEnd",
+                  "edgeStart": "MuiIconButton-edgeStart",
+                  "label": "MuiIconButton-label",
+                  "root": "MuiIconButton-root",
+                  "sizeSmall": "MuiIconButton-sizeSmall",
+                }
+              }
+              onClick={[Function]}
+              style={
+                Object {
+                  "borderRadius": "5px",
+                }
+              }
+            >
+              <WithStyles(ForwardRef(ButtonBase))
+                aria-label="ecogesture_profile.equipments.accessible_label"
+                centerRipple={true}
+                className="MuiIconButton-root checkbox-equipment"
+                disabled={false}
+                focusRipple={true}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "borderRadius": "5px",
+                  }
+                }
+              >
+                <ForwardRef(ButtonBase)
+                  aria-label="ecogesture_profile.equipments.accessible_label"
+                  centerRipple={true}
+                  className="MuiIconButton-root checkbox-equipment"
+                  classes={
+                    Object {
+                      "disabled": "Mui-disabled",
+                      "focusVisible": "Mui-focusVisible",
+                      "root": "MuiButtonBase-root",
+                    }
+                  }
+                  disabled={false}
+                  focusRipple={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "borderRadius": "5px",
+                    }
+                  }
+                >
+                  <button
+                    aria-label="ecogesture_profile.equipments.accessible_label"
+                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onDragLeave={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchMove={[Function]}
+                    onTouchStart={[Function]}
+                    style={
+                      Object {
+                        "borderRadius": "5px",
+                      }
+                    }
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <span
+                      className="MuiIconButton-label"
+                    >
+                      <mock-equipment-icon
+                        equipment="FAN"
+                        isChecked={false}
+                      />
+                    </span>
+                    <WithStyles(memo)
+                      center={true}
+                    >
+                      <ForwardRef(TouchRipple)
+                        center={true}
+                        classes={
+                          Object {
+                            "child": "MuiTouchRipple-child",
+                            "childLeaving": "MuiTouchRipple-childLeaving",
+                            "childPulsate": "MuiTouchRipple-childPulsate",
+                            "ripple": "MuiTouchRipple-ripple",
+                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                            "rippleVisible": "MuiTouchRipple-rippleVisible",
+                            "root": "MuiTouchRipple-root",
+                          }
+                        }
+                      >
+                        <span
+                          className="MuiTouchRipple-root"
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            component={null}
+                            exit={true}
+                          />
+                        </span>
+                      </ForwardRef(TouchRipple)>
+                    </WithStyles(memo)>
+                  </button>
+                </ForwardRef(ButtonBase)>
+              </WithStyles(ForwardRef(ButtonBase))>
+            </ForwardRef(IconButton)>
+          </WithStyles(ForwardRef(IconButton))>
+          <WithStyles(ForwardRef(IconButton))
+            aria-label="ecogesture_profile.equipments.accessible_label"
             className="checkbox-equipment"
             key="CURTAIN"
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "5px",
+              }
+            }
           >
-            <input
-              checked={false}
-              className="item-eq"
-              name="CURTAIN"
-              onChange={[Function]}
-              type="checkbox"
-              value="CURTAIN"
-            />
-            <mock-equipment-icon
-              equipment="CURTAIN"
-              isChecked={false}
-            />
-          </label>
-          <label
+            <ForwardRef(IconButton)
+              aria-label="ecogesture_profile.equipments.accessible_label"
+              className="checkbox-equipment"
+              classes={
+                Object {
+                  "colorInherit": "MuiIconButton-colorInherit",
+                  "colorPrimary": "MuiIconButton-colorPrimary",
+                  "colorSecondary": "MuiIconButton-colorSecondary",
+                  "disabled": "Mui-disabled",
+                  "edgeEnd": "MuiIconButton-edgeEnd",
+                  "edgeStart": "MuiIconButton-edgeStart",
+                  "label": "MuiIconButton-label",
+                  "root": "MuiIconButton-root",
+                  "sizeSmall": "MuiIconButton-sizeSmall",
+                }
+              }
+              onClick={[Function]}
+              style={
+                Object {
+                  "borderRadius": "5px",
+                }
+              }
+            >
+              <WithStyles(ForwardRef(ButtonBase))
+                aria-label="ecogesture_profile.equipments.accessible_label"
+                centerRipple={true}
+                className="MuiIconButton-root checkbox-equipment"
+                disabled={false}
+                focusRipple={true}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "borderRadius": "5px",
+                  }
+                }
+              >
+                <ForwardRef(ButtonBase)
+                  aria-label="ecogesture_profile.equipments.accessible_label"
+                  centerRipple={true}
+                  className="MuiIconButton-root checkbox-equipment"
+                  classes={
+                    Object {
+                      "disabled": "Mui-disabled",
+                      "focusVisible": "Mui-focusVisible",
+                      "root": "MuiButtonBase-root",
+                    }
+                  }
+                  disabled={false}
+                  focusRipple={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "borderRadius": "5px",
+                    }
+                  }
+                >
+                  <button
+                    aria-label="ecogesture_profile.equipments.accessible_label"
+                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onDragLeave={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchMove={[Function]}
+                    onTouchStart={[Function]}
+                    style={
+                      Object {
+                        "borderRadius": "5px",
+                      }
+                    }
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <span
+                      className="MuiIconButton-label"
+                    >
+                      <mock-equipment-icon
+                        equipment="CURTAIN"
+                        isChecked={false}
+                      />
+                    </span>
+                    <WithStyles(memo)
+                      center={true}
+                    >
+                      <ForwardRef(TouchRipple)
+                        center={true}
+                        classes={
+                          Object {
+                            "child": "MuiTouchRipple-child",
+                            "childLeaving": "MuiTouchRipple-childLeaving",
+                            "childPulsate": "MuiTouchRipple-childPulsate",
+                            "ripple": "MuiTouchRipple-ripple",
+                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                            "rippleVisible": "MuiTouchRipple-rippleVisible",
+                            "root": "MuiTouchRipple-root",
+                          }
+                        }
+                      >
+                        <span
+                          className="MuiTouchRipple-root"
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            component={null}
+                            exit={true}
+                          />
+                        </span>
+                      </ForwardRef(TouchRipple)>
+                    </WithStyles(memo)>
+                  </button>
+                </ForwardRef(ButtonBase)>
+              </WithStyles(ForwardRef(ButtonBase))>
+            </ForwardRef(IconButton)>
+          </WithStyles(ForwardRef(IconButton))>
+          <WithStyles(ForwardRef(IconButton))
+            aria-label="ecogesture_profile.equipments.accessible_label"
             className="checkbox-equipment"
             key="INTERNET_BOX"
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "5px",
+              }
+            }
           >
-            <input
-              checked={false}
-              className="item-eq"
-              name="INTERNET_BOX"
-              onChange={[Function]}
-              type="checkbox"
-              value="INTERNET_BOX"
-            />
-            <mock-equipment-icon
-              equipment="INTERNET_BOX"
-              isChecked={false}
-            />
-          </label>
-          <label
+            <ForwardRef(IconButton)
+              aria-label="ecogesture_profile.equipments.accessible_label"
+              className="checkbox-equipment"
+              classes={
+                Object {
+                  "colorInherit": "MuiIconButton-colorInherit",
+                  "colorPrimary": "MuiIconButton-colorPrimary",
+                  "colorSecondary": "MuiIconButton-colorSecondary",
+                  "disabled": "Mui-disabled",
+                  "edgeEnd": "MuiIconButton-edgeEnd",
+                  "edgeStart": "MuiIconButton-edgeStart",
+                  "label": "MuiIconButton-label",
+                  "root": "MuiIconButton-root",
+                  "sizeSmall": "MuiIconButton-sizeSmall",
+                }
+              }
+              onClick={[Function]}
+              style={
+                Object {
+                  "borderRadius": "5px",
+                }
+              }
+            >
+              <WithStyles(ForwardRef(ButtonBase))
+                aria-label="ecogesture_profile.equipments.accessible_label"
+                centerRipple={true}
+                className="MuiIconButton-root checkbox-equipment"
+                disabled={false}
+                focusRipple={true}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "borderRadius": "5px",
+                  }
+                }
+              >
+                <ForwardRef(ButtonBase)
+                  aria-label="ecogesture_profile.equipments.accessible_label"
+                  centerRipple={true}
+                  className="MuiIconButton-root checkbox-equipment"
+                  classes={
+                    Object {
+                      "disabled": "Mui-disabled",
+                      "focusVisible": "Mui-focusVisible",
+                      "root": "MuiButtonBase-root",
+                    }
+                  }
+                  disabled={false}
+                  focusRipple={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "borderRadius": "5px",
+                    }
+                  }
+                >
+                  <button
+                    aria-label="ecogesture_profile.equipments.accessible_label"
+                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onDragLeave={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchMove={[Function]}
+                    onTouchStart={[Function]}
+                    style={
+                      Object {
+                        "borderRadius": "5px",
+                      }
+                    }
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <span
+                      className="MuiIconButton-label"
+                    >
+                      <mock-equipment-icon
+                        equipment="INTERNET_BOX"
+                        isChecked={false}
+                      />
+                    </span>
+                    <WithStyles(memo)
+                      center={true}
+                    >
+                      <ForwardRef(TouchRipple)
+                        center={true}
+                        classes={
+                          Object {
+                            "child": "MuiTouchRipple-child",
+                            "childLeaving": "MuiTouchRipple-childLeaving",
+                            "childPulsate": "MuiTouchRipple-childPulsate",
+                            "ripple": "MuiTouchRipple-ripple",
+                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                            "rippleVisible": "MuiTouchRipple-rippleVisible",
+                            "root": "MuiTouchRipple-root",
+                          }
+                        }
+                      >
+                        <span
+                          className="MuiTouchRipple-root"
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            component={null}
+                            exit={true}
+                          />
+                        </span>
+                      </ForwardRef(TouchRipple)>
+                    </WithStyles(memo)>
+                  </button>
+                </ForwardRef(ButtonBase)>
+              </WithStyles(ForwardRef(ButtonBase))>
+            </ForwardRef(IconButton)>
+          </WithStyles(ForwardRef(IconButton))>
+          <WithStyles(ForwardRef(IconButton))
+            aria-label="ecogesture_profile.equipments.accessible_label"
             className="checkbox-equipment"
             key="VENTILATION"
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "5px",
+              }
+            }
           >
-            <input
-              checked={false}
-              className="item-eq"
-              name="VENTILATION"
-              onChange={[Function]}
-              type="checkbox"
-              value="VENTILATION"
-            />
-            <mock-equipment-icon
-              equipment="VENTILATION"
-              isChecked={false}
-            />
-          </label>
-          <label
+            <ForwardRef(IconButton)
+              aria-label="ecogesture_profile.equipments.accessible_label"
+              className="checkbox-equipment"
+              classes={
+                Object {
+                  "colorInherit": "MuiIconButton-colorInherit",
+                  "colorPrimary": "MuiIconButton-colorPrimary",
+                  "colorSecondary": "MuiIconButton-colorSecondary",
+                  "disabled": "Mui-disabled",
+                  "edgeEnd": "MuiIconButton-edgeEnd",
+                  "edgeStart": "MuiIconButton-edgeStart",
+                  "label": "MuiIconButton-label",
+                  "root": "MuiIconButton-root",
+                  "sizeSmall": "MuiIconButton-sizeSmall",
+                }
+              }
+              onClick={[Function]}
+              style={
+                Object {
+                  "borderRadius": "5px",
+                }
+              }
+            >
+              <WithStyles(ForwardRef(ButtonBase))
+                aria-label="ecogesture_profile.equipments.accessible_label"
+                centerRipple={true}
+                className="MuiIconButton-root checkbox-equipment"
+                disabled={false}
+                focusRipple={true}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "borderRadius": "5px",
+                  }
+                }
+              >
+                <ForwardRef(ButtonBase)
+                  aria-label="ecogesture_profile.equipments.accessible_label"
+                  centerRipple={true}
+                  className="MuiIconButton-root checkbox-equipment"
+                  classes={
+                    Object {
+                      "disabled": "Mui-disabled",
+                      "focusVisible": "Mui-focusVisible",
+                      "root": "MuiButtonBase-root",
+                    }
+                  }
+                  disabled={false}
+                  focusRipple={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "borderRadius": "5px",
+                    }
+                  }
+                >
+                  <button
+                    aria-label="ecogesture_profile.equipments.accessible_label"
+                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onDragLeave={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchMove={[Function]}
+                    onTouchStart={[Function]}
+                    style={
+                      Object {
+                        "borderRadius": "5px",
+                      }
+                    }
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <span
+                      className="MuiIconButton-label"
+                    >
+                      <mock-equipment-icon
+                        equipment="VENTILATION"
+                        isChecked={false}
+                      />
+                    </span>
+                    <WithStyles(memo)
+                      center={true}
+                    >
+                      <ForwardRef(TouchRipple)
+                        center={true}
+                        classes={
+                          Object {
+                            "child": "MuiTouchRipple-child",
+                            "childLeaving": "MuiTouchRipple-childLeaving",
+                            "childPulsate": "MuiTouchRipple-childPulsate",
+                            "ripple": "MuiTouchRipple-ripple",
+                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                            "rippleVisible": "MuiTouchRipple-rippleVisible",
+                            "root": "MuiTouchRipple-root",
+                          }
+                        }
+                      >
+                        <span
+                          className="MuiTouchRipple-root"
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            component={null}
+                            exit={true}
+                          />
+                        </span>
+                      </ForwardRef(TouchRipple)>
+                    </WithStyles(memo)>
+                  </button>
+                </ForwardRef(ButtonBase)>
+              </WithStyles(ForwardRef(ButtonBase))>
+            </ForwardRef(IconButton)>
+          </WithStyles(ForwardRef(IconButton))>
+          <WithStyles(ForwardRef(IconButton))
+            aria-label="ecogesture_profile.equipments.accessible_label"
             className="checkbox-equipment"
             key="FREEZER"
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "5px",
+              }
+            }
           >
-            <input
-              checked={false}
-              className="item-eq"
-              name="FREEZER"
-              onChange={[Function]}
-              type="checkbox"
-              value="FREEZER"
-            />
-            <mock-equipment-icon
-              equipment="FREEZER"
-              isChecked={false}
-            />
-          </label>
-          <label
+            <ForwardRef(IconButton)
+              aria-label="ecogesture_profile.equipments.accessible_label"
+              className="checkbox-equipment"
+              classes={
+                Object {
+                  "colorInherit": "MuiIconButton-colorInherit",
+                  "colorPrimary": "MuiIconButton-colorPrimary",
+                  "colorSecondary": "MuiIconButton-colorSecondary",
+                  "disabled": "Mui-disabled",
+                  "edgeEnd": "MuiIconButton-edgeEnd",
+                  "edgeStart": "MuiIconButton-edgeStart",
+                  "label": "MuiIconButton-label",
+                  "root": "MuiIconButton-root",
+                  "sizeSmall": "MuiIconButton-sizeSmall",
+                }
+              }
+              onClick={[Function]}
+              style={
+                Object {
+                  "borderRadius": "5px",
+                }
+              }
+            >
+              <WithStyles(ForwardRef(ButtonBase))
+                aria-label="ecogesture_profile.equipments.accessible_label"
+                centerRipple={true}
+                className="MuiIconButton-root checkbox-equipment"
+                disabled={false}
+                focusRipple={true}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "borderRadius": "5px",
+                  }
+                }
+              >
+                <ForwardRef(ButtonBase)
+                  aria-label="ecogesture_profile.equipments.accessible_label"
+                  centerRipple={true}
+                  className="MuiIconButton-root checkbox-equipment"
+                  classes={
+                    Object {
+                      "disabled": "Mui-disabled",
+                      "focusVisible": "Mui-focusVisible",
+                      "root": "MuiButtonBase-root",
+                    }
+                  }
+                  disabled={false}
+                  focusRipple={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "borderRadius": "5px",
+                    }
+                  }
+                >
+                  <button
+                    aria-label="ecogesture_profile.equipments.accessible_label"
+                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onDragLeave={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchMove={[Function]}
+                    onTouchStart={[Function]}
+                    style={
+                      Object {
+                        "borderRadius": "5px",
+                      }
+                    }
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <span
+                      className="MuiIconButton-label"
+                    >
+                      <mock-equipment-icon
+                        equipment="FREEZER"
+                        isChecked={false}
+                      />
+                    </span>
+                    <WithStyles(memo)
+                      center={true}
+                    >
+                      <ForwardRef(TouchRipple)
+                        center={true}
+                        classes={
+                          Object {
+                            "child": "MuiTouchRipple-child",
+                            "childLeaving": "MuiTouchRipple-childLeaving",
+                            "childPulsate": "MuiTouchRipple-childPulsate",
+                            "ripple": "MuiTouchRipple-ripple",
+                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                            "rippleVisible": "MuiTouchRipple-rippleVisible",
+                            "root": "MuiTouchRipple-root",
+                          }
+                        }
+                      >
+                        <span
+                          className="MuiTouchRipple-root"
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            component={null}
+                            exit={true}
+                          />
+                        </span>
+                      </ForwardRef(TouchRipple)>
+                    </WithStyles(memo)>
+                  </button>
+                </ForwardRef(ButtonBase)>
+              </WithStyles(ForwardRef(ButtonBase))>
+            </ForwardRef(IconButton)>
+          </WithStyles(ForwardRef(IconButton))>
+          <WithStyles(ForwardRef(IconButton))
+            aria-label="ecogesture_profile.equipments.accessible_label"
             className="checkbox-equipment"
             key="BOILER"
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "5px",
+              }
+            }
           >
-            <input
-              checked={false}
-              className="item-eq"
-              name="BOILER"
-              onChange={[Function]}
-              type="checkbox"
-              value="BOILER"
-            />
-            <mock-equipment-icon
-              equipment="BOILER"
-              isChecked={false}
-            />
-          </label>
-          <label
+            <ForwardRef(IconButton)
+              aria-label="ecogesture_profile.equipments.accessible_label"
+              className="checkbox-equipment"
+              classes={
+                Object {
+                  "colorInherit": "MuiIconButton-colorInherit",
+                  "colorPrimary": "MuiIconButton-colorPrimary",
+                  "colorSecondary": "MuiIconButton-colorSecondary",
+                  "disabled": "Mui-disabled",
+                  "edgeEnd": "MuiIconButton-edgeEnd",
+                  "edgeStart": "MuiIconButton-edgeStart",
+                  "label": "MuiIconButton-label",
+                  "root": "MuiIconButton-root",
+                  "sizeSmall": "MuiIconButton-sizeSmall",
+                }
+              }
+              onClick={[Function]}
+              style={
+                Object {
+                  "borderRadius": "5px",
+                }
+              }
+            >
+              <WithStyles(ForwardRef(ButtonBase))
+                aria-label="ecogesture_profile.equipments.accessible_label"
+                centerRipple={true}
+                className="MuiIconButton-root checkbox-equipment"
+                disabled={false}
+                focusRipple={true}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "borderRadius": "5px",
+                  }
+                }
+              >
+                <ForwardRef(ButtonBase)
+                  aria-label="ecogesture_profile.equipments.accessible_label"
+                  centerRipple={true}
+                  className="MuiIconButton-root checkbox-equipment"
+                  classes={
+                    Object {
+                      "disabled": "Mui-disabled",
+                      "focusVisible": "Mui-focusVisible",
+                      "root": "MuiButtonBase-root",
+                    }
+                  }
+                  disabled={false}
+                  focusRipple={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "borderRadius": "5px",
+                    }
+                  }
+                >
+                  <button
+                    aria-label="ecogesture_profile.equipments.accessible_label"
+                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onDragLeave={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchMove={[Function]}
+                    onTouchStart={[Function]}
+                    style={
+                      Object {
+                        "borderRadius": "5px",
+                      }
+                    }
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <span
+                      className="MuiIconButton-label"
+                    >
+                      <mock-equipment-icon
+                        equipment="BOILER"
+                        isChecked={false}
+                      />
+                    </span>
+                    <WithStyles(memo)
+                      center={true}
+                    >
+                      <ForwardRef(TouchRipple)
+                        center={true}
+                        classes={
+                          Object {
+                            "child": "MuiTouchRipple-child",
+                            "childLeaving": "MuiTouchRipple-childLeaving",
+                            "childPulsate": "MuiTouchRipple-childPulsate",
+                            "ripple": "MuiTouchRipple-ripple",
+                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                            "rippleVisible": "MuiTouchRipple-rippleVisible",
+                            "root": "MuiTouchRipple-root",
+                          }
+                        }
+                      >
+                        <span
+                          className="MuiTouchRipple-root"
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            component={null}
+                            exit={true}
+                          />
+                        </span>
+                      </ForwardRef(TouchRipple)>
+                    </WithStyles(memo)>
+                  </button>
+                </ForwardRef(ButtonBase)>
+              </WithStyles(ForwardRef(ButtonBase))>
+            </ForwardRef(IconButton)>
+          </WithStyles(ForwardRef(IconButton))>
+          <WithStyles(ForwardRef(IconButton))
+            aria-label="ecogesture_profile.equipments.accessible_label"
             className="checkbox-equipment"
             key="HYDRAULIC_HEATING"
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "5px",
+              }
+            }
           >
-            <input
-              checked={false}
-              className="item-eq"
-              name="HYDRAULIC_HEATING"
-              onChange={[Function]}
-              type="checkbox"
-              value="HYDRAULIC_HEATING"
-            />
-            <mock-equipment-icon
-              equipment="HYDRAULIC_HEATING"
-              isChecked={false}
-            />
-          </label>
+            <ForwardRef(IconButton)
+              aria-label="ecogesture_profile.equipments.accessible_label"
+              className="checkbox-equipment"
+              classes={
+                Object {
+                  "colorInherit": "MuiIconButton-colorInherit",
+                  "colorPrimary": "MuiIconButton-colorPrimary",
+                  "colorSecondary": "MuiIconButton-colorSecondary",
+                  "disabled": "Mui-disabled",
+                  "edgeEnd": "MuiIconButton-edgeEnd",
+                  "edgeStart": "MuiIconButton-edgeStart",
+                  "label": "MuiIconButton-label",
+                  "root": "MuiIconButton-root",
+                  "sizeSmall": "MuiIconButton-sizeSmall",
+                }
+              }
+              onClick={[Function]}
+              style={
+                Object {
+                  "borderRadius": "5px",
+                }
+              }
+            >
+              <WithStyles(ForwardRef(ButtonBase))
+                aria-label="ecogesture_profile.equipments.accessible_label"
+                centerRipple={true}
+                className="MuiIconButton-root checkbox-equipment"
+                disabled={false}
+                focusRipple={true}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "borderRadius": "5px",
+                  }
+                }
+              >
+                <ForwardRef(ButtonBase)
+                  aria-label="ecogesture_profile.equipments.accessible_label"
+                  centerRipple={true}
+                  className="MuiIconButton-root checkbox-equipment"
+                  classes={
+                    Object {
+                      "disabled": "Mui-disabled",
+                      "focusVisible": "Mui-focusVisible",
+                      "root": "MuiButtonBase-root",
+                    }
+                  }
+                  disabled={false}
+                  focusRipple={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "borderRadius": "5px",
+                    }
+                  }
+                >
+                  <button
+                    aria-label="ecogesture_profile.equipments.accessible_label"
+                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onDragLeave={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchMove={[Function]}
+                    onTouchStart={[Function]}
+                    style={
+                      Object {
+                        "borderRadius": "5px",
+                      }
+                    }
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <span
+                      className="MuiIconButton-label"
+                    >
+                      <mock-equipment-icon
+                        equipment="HYDRAULIC_HEATING"
+                        isChecked={false}
+                      />
+                    </span>
+                    <WithStyles(memo)
+                      center={true}
+                    >
+                      <ForwardRef(TouchRipple)
+                        center={true}
+                        classes={
+                          Object {
+                            "child": "MuiTouchRipple-child",
+                            "childLeaving": "MuiTouchRipple-childLeaving",
+                            "childPulsate": "MuiTouchRipple-childPulsate",
+                            "ripple": "MuiTouchRipple-ripple",
+                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                            "rippleVisible": "MuiTouchRipple-rippleVisible",
+                            "root": "MuiTouchRipple-root",
+                          }
+                        }
+                      >
+                        <span
+                          className="MuiTouchRipple-root"
+                        >
+                          <TransitionGroup
+                            childFactory={[Function]}
+                            component={null}
+                            exit={true}
+                          />
+                        </span>
+                      </ForwardRef(TouchRipple)>
+                    </WithStyles(memo)>
+                  </button>
+                </ForwardRef(ButtonBase)>
+              </WithStyles(ForwardRef(ButtonBase))>
+            </ForwardRef(IconButton)>
+          </WithStyles(ForwardRef(IconButton))>
         </div>
       </div>
     </div>
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/ecogestureFormEquipment.scss b/src/components/EcogestureForm/EcogestureFormEquipment/ecogestureFormEquipment.scss
index be3e7257d2ffe9ba87153d315305cb90aba38294..be756fd5072c36683d560841f2512b7a17165b51 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/ecogestureFormEquipment.scss
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/ecogestureFormEquipment.scss
@@ -19,28 +19,21 @@
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(5, 1fr);
-    grid-column-gap: 32px;
-    grid-row-gap: 32px;
+    gap: 1rem;
     max-width: 400px;
     margin: 1.5rem auto 3rem auto;
     .checkbox-equipment {
-      cursor: pointer;
-      max-width: 80px;
-      text-align: center;
-      margin: 0 auto;
-      .text {
-        margin-top: 0.5rem;
-        text-align: center;
+      span {
+        border-radius: 5px;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
       }
     }
-    input.item-eq {
-      display: none;
-    }
     .equipment-icon-container {
       display: flex;
       transition: all 200ms ease;
       box-sizing: border-box;
-      flex-direction: column;
       width: 80px;
       height: 80px;
       border-radius: 5px;
diff --git a/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.tsx b/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.tsx
index e01d242adb824194b6249d775d88fe1d39039c40..56dc1a35b33e229c35992cc3bb8ea8f627265a9e 100644
--- a/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.tsx
+++ b/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.tsx
@@ -25,15 +25,10 @@ const EquipmentIcon = ({ equipment, isChecked }: EquipmentIconProps) => {
       subscribed = false
     }
   }, [equipment])
+
   return (
     <>
-      <div
-        className={
-          isChecked
-            ? 'equipment-icon-container checked'
-            : ' equipment-icon-container'
-        }
-      >
+      <div className={`equipment-icon-container ${isChecked ? 'checked' : ''}`}>
         <Icon icon={icon} size={40} className="equipmentIcon " />
       </div>
       <div className="text text-14-normal">
diff --git a/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap b/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap
index 8909ac3fb08ea93c2135fee9ae4789885bf69701..e5aad8d5b7684e4a75598a6dcfcb42816eb8b15c 100644
--- a/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap
+++ b/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
   isChecked={false}
 >
   <div
-    className=" equipment-icon-container"
+    className="equipment-icon-container "
   >
     <Icon
       className="equipmentIcon "
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index 4c3f73954fe1fffcacc64cafa8a3dcdfb7a84e0d..17845f2450995f2b49ccd9d93865dab45673475a 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -143,11 +143,11 @@ const FluidChart = ({ fluidType, setActive }: FluidChartProps) => {
 
   const LastDataValid = fluidType !== FluidType.MULTIFLUID && (
     <div className="lastValidData">
-      <span className="text-16-bold date" onClick={moveToDate}>
+      <Button className="btnText" onClick={moveToDate}>
         {t('consumption_visualizer.last_valid_data', {
           date: currentFluidStatus?.lastDataDate?.toFormat('dd/MM/yy') || '-',
         })}
-      </span>
+      </Button>
       <p>{t('auth.warningOfflineData')}</p>
       <Button className="btnSecondary" onClick={toggleModalConnection}>
         {t(`auth.${getKonnectorSlug(fluidType)}.connect`)}
@@ -174,14 +174,13 @@ const FluidChart = ({ fluidType, setActive }: FluidChartProps) => {
       )}
       <TimeStepSelector fluidType={fluidType} />
       {currentTimeStep !== TimeStep.YEAR && (
-        <div className="fluidchart-footer" onClick={handleChangeSwitch}>
+        <div className="fluidchart-footer">
           <div className="fluidchart-footer-compare text-15-normal">
             <StyledSwitch
               fluidType={fluidType}
               checked={showCompare}
-              inputProps={{
-                'aria-label': t('consumption.accessibility.checkbox_compare'),
-              }}
+              aria-label={t('consumption.accessibility.checkbox_compare')}
+              onClick={handleChangeSwitch}
             />
             <span className="fluidchart-footer-label graph-switch-text">
               {t(`timestep.${lowercaseTimeStep}.comparelabel`)}
diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
index a225a87f6a8f735dd4458e0e794bf64679e5258a..06bdfd8b036b573d83baf595b0e9a71f28e12e98 100644
--- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
+++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
@@ -88,7 +88,15 @@ const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => {
                   step === currentTimeStep ? 'active circle' : 'circle'
                 }
                 onClick={() => handleChangeTimeStep(step)}
+                onKeyDown={event => {
+                  if (event.key === ' ') {
+                    event.preventDefault()
+                    handleChangeTimeStep(step)
+                  }
+                }}
                 id={TimeStep[step].toLowerCase()}
+                tabIndex={0}
+                role="menuitem"
               >
                 <span className="clickable-area" />
                 <span className="text text-14-normal">
diff --git a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
index 1fe111a22ede1a6c3542a89879b64f9c2ecca888..1ab4cc18035281f2f939e45c009c1f4d334db722 100644
--- a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
+++ b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
@@ -157,6 +157,9 @@ exports[`TimeStepSelector component should render component properly with 4 time
             className="circle"
             id="week"
             onClick={[Function]}
+            onKeyDown={[Function]}
+            role="menuitem"
+            tabIndex={0}
           >
             <span
               className="clickable-area"
@@ -174,6 +177,9 @@ exports[`TimeStepSelector component should render component properly with 4 time
             className="active circle"
             id="day"
             onClick={[Function]}
+            onKeyDown={[Function]}
+            role="menuitem"
+            tabIndex={0}
           >
             <span
               className="clickable-area"
@@ -191,6 +197,9 @@ exports[`TimeStepSelector component should render component properly with 4 time
             className="circle"
             id="month"
             onClick={[Function]}
+            onKeyDown={[Function]}
+            role="menuitem"
+            tabIndex={0}
           >
             <span
               className="clickable-area"
@@ -208,6 +217,9 @@ exports[`TimeStepSelector component should render component properly with 4 time
             className="circle"
             id="year"
             onClick={[Function]}
+            onKeyDown={[Function]}
+            role="menuitem"
+            tabIndex={0}
           >
             <span
               className="clickable-area"
diff --git a/src/components/FluidChart/fluidChart.scss b/src/components/FluidChart/fluidChart.scss
index 138f86bbf547ef2b0a749e7904e67bda31de4694..4e60257669f5bd9fba1928bffc96bd384db84b31 100644
--- a/src/components/FluidChart/fluidChart.scss
+++ b/src/components/FluidChart/fluidChart.scss
@@ -79,9 +79,6 @@
     text-decoration: underline;
   }
   button {
-    margin-top: 0rem !important;
-    width: 70% !important;
-    height: 40px !important;
     max-width: 22.5rem;
   }
 }
diff --git a/src/components/Konnector/KonnectorModal.tsx b/src/components/Konnector/KonnectorModal.tsx
index 51dd8219c247bf02e2f69028a7248e39b84905c6..9817b2864295223d368ff67baa6611b879e6c72f 100644
--- a/src/components/Konnector/KonnectorModal.tsx
+++ b/src/components/Konnector/KonnectorModal.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import EnedisIcon from 'assets/icons/ico/consent-outdated-enedis.svg'
 import errorIcon from 'assets/icons/visu/data-nok.svg'
@@ -199,12 +200,12 @@ const KonnectorModal = ({
                       {fluidType === FluidType.ELECTRICITY && (
                         <>
                           {!showCommonErrors && (
-                            <span
-                              className="commonErrors"
+                            <Button
+                              className="btnText commonErrors"
                               onClick={() => setShowCommonErrors(true)}
                             >
                               {t('konnector_modal.show_common_error')}
-                            </span>
+                            </Button>
                           )}
                           {showCommonErrors && (
                             <div
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 36095b762ece775ced72e22cd8ce94c45b7ea965..aadb0016f83be044278a7ef2fd14277b7c7445f1 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -50,25 +50,24 @@ const Navbar = () => {
     <aside className="o-sidebar">
       <nav role="navigation" aria-label="navigation">
         <ul className="c-nav">
-          <li
-            className="c-nav-item"
-            onClick={() => emitNavEvent('consumption')}
-          >
+          <li className="c-nav-item">
             <Link
               component={NavLink}
               to="/consumption"
               className={`c-nav-link ${isActive('/consumption')}`}
+              onClick={() => emitNavEvent('consumption')}
             >
               <StyledIcon className="c-nav-icon off" icon={ConsoIconOff} />
               <StyledIcon className="c-nav-icon on" icon={ConsoIconOn} />
               {t('navigation.consumption')}
             </Link>
           </li>
-          <li className="c-nav-item" onClick={() => emitNavEvent('challenges')}>
+          <li className="c-nav-item">
             <Link
               component={NavLink}
               to="/challenges"
               className={`c-nav-link ${isActive('/challenges')}`}
+              onClick={() => emitNavEvent('challenges')}
             >
               {(challengeExplorationNotification ||
                 challengeActionNotification ||
@@ -78,27 +77,24 @@ const Navbar = () => {
               {t('navigation.challenges')}
             </Link>
           </li>
-          <li
-            className="c-nav-item"
-            onClick={() => emitNavEvent('ecogestures')}
-          >
+          <li className="c-nav-item">
             <Link
               component={NavLink}
               to="/ecogestures"
               className={`c-nav-link ${isActive('/ecogesture')}`}
+              onClick={() => emitNavEvent('ecogestures')}
             >
               <StyledIcon className="c-nav-icon off" icon={BulbIconOff} />
               <StyledIcon className="c-nav-icon on" icon={BulbIconOn} />
               {t('navigation.ecogestures')}
             </Link>
           </li>
-          <li className="c-nav-item" onClick={() => emitNavEvent('analysis')}>
+          <li className="c-nav-item">
             <Link
               component={NavLink}
               to="/analysis"
-              className={`c-nav-link ${
-                pathname === '/analysis' ? 'is-active' : ''
-              }`}
+              className={`c-nav-link ${isActive('/analysis')}`}
+              onClick={() => emitNavEvent('analysis')}
             >
               {analysisNotification && <div className="nb-notif">1</div>}
               <StyledIcon className="c-nav-icon off" icon={AnalysisIconOff} />
@@ -106,11 +102,12 @@ const Navbar = () => {
               {t('navigation.analysis')}
             </Link>
           </li>
-          <li className="c-nav-item" onClick={() => emitNavEvent('options')}>
+          <li className="c-nav-item">
             <Link
               component={NavLink}
               to="/options"
               className={`c-nav-link ${isActive('/options')}`}
+              onClick={() => emitNavEvent('options')}
             >
               <StyledIcon className="c-nav-icon off" icon={ParameterIconOff} />
               <StyledIcon className="c-nav-icon on" icon={ParameterIconOn} />
diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
index cd21a63b3ae607fc2c94b797eadbc88115acf10a..9a0cb334d2c4bb37164207370ed45415f74a9a34 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
@@ -412,31 +412,29 @@ exports[`exportDoneModal component should be rendered correctly 1`] = `
                       <div
                         class="modal-done-root"
                       >
-                        <div>
-                          <button
-                            aria-label="export.button_close"
-                            class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                            tabindex="0"
-                            type="button"
+                        <button
+                          aria-label="export.button_close"
+                          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label"
                           >
-                            <span
-                              class="MuiIconButton-label"
+                            <svg
+                              class="styles__icon___23x3R"
+                              height="18"
+                              width="18"
                             >
-                              <svg
-                                class="styles__icon___23x3R"
-                                height="18"
-                                width="18"
-                              >
-                                <use
-                                  xlink:href="#test-file-stub"
-                                />
-                              </svg>
-                            </span>
-                            <span
-                              class="MuiTouchRipple-root"
-                            />
-                          </button>
-                        </div>
+                              <use
+                                xlink:href="#test-file-stub"
+                              />
+                            </svg>
+                          </span>
+                          <span
+                            class="MuiTouchRipple-root"
+                          />
+                        </button>
                         <div
                           class="content"
                         >
@@ -693,135 +691,131 @@ exports[`exportDoneModal component should be rendered correctly 1`] = `
                             <div
                               className="modal-done-root"
                             >
-                              <div
+                              <WithStyles(ForwardRef(IconButton))
+                                aria-label="export.button_close"
+                                className="modal-paper-close-button"
                                 onClick={[MockFunction]}
                               >
-                                <WithStyles(ForwardRef(IconButton))
+                                <ForwardRef(IconButton)
                                   aria-label="export.button_close"
                                   className="modal-paper-close-button"
+                                  classes={
+                                    Object {
+                                      "colorInherit": "MuiIconButton-colorInherit",
+                                      "colorPrimary": "MuiIconButton-colorPrimary",
+                                      "colorSecondary": "MuiIconButton-colorSecondary",
+                                      "disabled": "Mui-disabled",
+                                      "edgeEnd": "MuiIconButton-edgeEnd",
+                                      "edgeStart": "MuiIconButton-edgeStart",
+                                      "label": "MuiIconButton-label",
+                                      "root": "MuiIconButton-root",
+                                      "sizeSmall": "MuiIconButton-sizeSmall",
+                                    }
+                                  }
                                   onClick={[MockFunction]}
                                 >
-                                  <ForwardRef(IconButton)
+                                  <WithStyles(ForwardRef(ButtonBase))
                                     aria-label="export.button_close"
-                                    className="modal-paper-close-button"
-                                    classes={
-                                      Object {
-                                        "colorInherit": "MuiIconButton-colorInherit",
-                                        "colorPrimary": "MuiIconButton-colorPrimary",
-                                        "colorSecondary": "MuiIconButton-colorSecondary",
-                                        "disabled": "Mui-disabled",
-                                        "edgeEnd": "MuiIconButton-edgeEnd",
-                                        "edgeStart": "MuiIconButton-edgeStart",
-                                        "label": "MuiIconButton-label",
-                                        "root": "MuiIconButton-root",
-                                        "sizeSmall": "MuiIconButton-sizeSmall",
-                                      }
-                                    }
+                                    centerRipple={true}
+                                    className="MuiIconButton-root modal-paper-close-button"
+                                    disabled={false}
+                                    focusRipple={true}
                                     onClick={[MockFunction]}
                                   >
-                                    <WithStyles(ForwardRef(ButtonBase))
+                                    <ForwardRef(ButtonBase)
                                       aria-label="export.button_close"
                                       centerRipple={true}
                                       className="MuiIconButton-root modal-paper-close-button"
+                                      classes={
+                                        Object {
+                                          "disabled": "Mui-disabled",
+                                          "focusVisible": "Mui-focusVisible",
+                                          "root": "MuiButtonBase-root",
+                                        }
+                                      }
                                       disabled={false}
                                       focusRipple={true}
                                       onClick={[MockFunction]}
                                     >
-                                      <ForwardRef(ButtonBase)
+                                      <button
                                         aria-label="export.button_close"
-                                        centerRipple={true}
-                                        className="MuiIconButton-root modal-paper-close-button"
-                                        classes={
-                                          Object {
-                                            "disabled": "Mui-disabled",
-                                            "focusVisible": "Mui-focusVisible",
-                                            "root": "MuiButtonBase-root",
-                                          }
-                                        }
+                                        className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
                                         disabled={false}
-                                        focusRipple={true}
+                                        onBlur={[Function]}
                                         onClick={[MockFunction]}
+                                        onDragLeave={[Function]}
+                                        onFocus={[Function]}
+                                        onKeyDown={[Function]}
+                                        onKeyUp={[Function]}
+                                        onMouseDown={[Function]}
+                                        onMouseLeave={[Function]}
+                                        onMouseUp={[Function]}
+                                        onTouchEnd={[Function]}
+                                        onTouchMove={[Function]}
+                                        onTouchStart={[Function]}
+                                        tabIndex={0}
+                                        type="button"
                                       >
-                                        <button
-                                          aria-label="export.button_close"
-                                          className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                                          disabled={false}
-                                          onBlur={[Function]}
-                                          onClick={[MockFunction]}
-                                          onDragLeave={[Function]}
-                                          onFocus={[Function]}
-                                          onKeyDown={[Function]}
-                                          onKeyUp={[Function]}
-                                          onMouseDown={[Function]}
-                                          onMouseLeave={[Function]}
-                                          onMouseUp={[Function]}
-                                          onTouchEnd={[Function]}
-                                          onTouchMove={[Function]}
-                                          onTouchStart={[Function]}
-                                          tabIndex={0}
-                                          type="button"
+                                        <span
+                                          className="MuiIconButton-label"
                                         >
-                                          <span
-                                            className="MuiIconButton-label"
+                                          <Icon
+                                            icon="test-file-stub"
+                                            size={18}
+                                            spin={false}
                                           >
-                                            <Icon
-                                              icon="test-file-stub"
-                                              size={18}
-                                              spin={false}
+                                            <Component
+                                              className="styles__icon___23x3R"
+                                              height={18}
+                                              style={Object {}}
+                                              width={18}
                                             >
-                                              <Component
+                                              <svg
                                                 className="styles__icon___23x3R"
                                                 height={18}
                                                 style={Object {}}
                                                 width={18}
                                               >
-                                                <svg
-                                                  className="styles__icon___23x3R"
-                                                  height={18}
-                                                  style={Object {}}
-                                                  width={18}
-                                                >
-                                                  <use
-                                                    xlinkHref="#test-file-stub"
-                                                  />
-                                                </svg>
-                                              </Component>
-                                            </Icon>
-                                          </span>
-                                          <WithStyles(memo)
+                                                <use
+                                                  xlinkHref="#test-file-stub"
+                                                />
+                                              </svg>
+                                            </Component>
+                                          </Icon>
+                                        </span>
+                                        <WithStyles(memo)
+                                          center={true}
+                                        >
+                                          <ForwardRef(TouchRipple)
                                             center={true}
-                                          >
-                                            <ForwardRef(TouchRipple)
-                                              center={true}
-                                              classes={
-                                                Object {
-                                                  "child": "MuiTouchRipple-child",
-                                                  "childLeaving": "MuiTouchRipple-childLeaving",
-                                                  "childPulsate": "MuiTouchRipple-childPulsate",
-                                                  "ripple": "MuiTouchRipple-ripple",
-                                                  "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                  "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                  "root": "MuiTouchRipple-root",
-                                                }
+                                            classes={
+                                              Object {
+                                                "child": "MuiTouchRipple-child",
+                                                "childLeaving": "MuiTouchRipple-childLeaving",
+                                                "childPulsate": "MuiTouchRipple-childPulsate",
+                                                "ripple": "MuiTouchRipple-ripple",
+                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
+                                                "root": "MuiTouchRipple-root",
                                               }
+                                            }
+                                          >
+                                            <span
+                                              className="MuiTouchRipple-root"
                                             >
-                                              <span
-                                                className="MuiTouchRipple-root"
-                                              >
-                                                <TransitionGroup
-                                                  childFactory={[Function]}
-                                                  component={null}
-                                                  exit={true}
-                                                />
-                                              </span>
-                                            </ForwardRef(TouchRipple)>
-                                          </WithStyles(memo)>
-                                        </button>
-                                      </ForwardRef(ButtonBase)>
-                                    </WithStyles(ForwardRef(ButtonBase))>
-                                  </ForwardRef(IconButton)>
-                                </WithStyles(ForwardRef(IconButton))>
-                              </div>
+                                              <TransitionGroup
+                                                childFactory={[Function]}
+                                                component={null}
+                                                exit={true}
+                                              />
+                                            </span>
+                                          </ForwardRef(TouchRipple)>
+                                        </WithStyles(memo)>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
                               <div
                                 className="content"
                               >
@@ -1422,31 +1416,29 @@ exports[`exportDoneModal component should display error message 1`] = `
                       <div
                         class="modal-done-root"
                       >
-                        <div>
-                          <button
-                            aria-label="export.button_close"
-                            class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                            tabindex="0"
-                            type="button"
+                        <button
+                          aria-label="export.button_close"
+                          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label"
                           >
-                            <span
-                              class="MuiIconButton-label"
+                            <svg
+                              class="styles__icon___23x3R"
+                              height="18"
+                              width="18"
                             >
-                              <svg
-                                class="styles__icon___23x3R"
-                                height="18"
-                                width="18"
-                              >
-                                <use
-                                  xlink:href="#test-file-stub"
-                                />
-                              </svg>
-                            </span>
-                            <span
-                              class="MuiTouchRipple-root"
-                            />
-                          </button>
-                        </div>
+                              <use
+                                xlink:href="#test-file-stub"
+                              />
+                            </svg>
+                          </span>
+                          <span
+                            class="MuiTouchRipple-root"
+                          />
+                        </button>
                         <div
                           class="content"
                         >
@@ -1528,31 +1520,29 @@ exports[`exportDoneModal component should display error message 1`] = `
                       <div
                         class="modal-done-root"
                       >
-                        <div>
-                          <button
-                            aria-label="export.button_close"
-                            class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                            tabindex="0"
-                            type="button"
+                        <button
+                          aria-label="export.button_close"
+                          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label"
                           >
-                            <span
-                              class="MuiIconButton-label"
+                            <svg
+                              class="styles__icon___23x3R"
+                              height="18"
+                              width="18"
                             >
-                              <svg
-                                class="styles__icon___23x3R"
-                                height="18"
-                                width="18"
-                              >
-                                <use
-                                  xlink:href="#test-file-stub"
-                                />
-                              </svg>
-                            </span>
-                            <span
-                              class="MuiTouchRipple-root"
-                            />
-                          </button>
-                        </div>
+                              <use
+                                xlink:href="#test-file-stub"
+                              />
+                            </svg>
+                          </span>
+                          <span
+                            class="MuiTouchRipple-root"
+                          />
+                        </button>
                         <div
                           class="content"
                         >
@@ -1811,135 +1801,131 @@ exports[`exportDoneModal component should display error message 1`] = `
                             <div
                               className="modal-done-root"
                             >
-                              <div
+                              <WithStyles(ForwardRef(IconButton))
+                                aria-label="export.button_close"
+                                className="modal-paper-close-button"
                                 onClick={[MockFunction]}
                               >
-                                <WithStyles(ForwardRef(IconButton))
+                                <ForwardRef(IconButton)
                                   aria-label="export.button_close"
                                   className="modal-paper-close-button"
+                                  classes={
+                                    Object {
+                                      "colorInherit": "MuiIconButton-colorInherit",
+                                      "colorPrimary": "MuiIconButton-colorPrimary",
+                                      "colorSecondary": "MuiIconButton-colorSecondary",
+                                      "disabled": "Mui-disabled",
+                                      "edgeEnd": "MuiIconButton-edgeEnd",
+                                      "edgeStart": "MuiIconButton-edgeStart",
+                                      "label": "MuiIconButton-label",
+                                      "root": "MuiIconButton-root",
+                                      "sizeSmall": "MuiIconButton-sizeSmall",
+                                    }
+                                  }
                                   onClick={[MockFunction]}
                                 >
-                                  <ForwardRef(IconButton)
+                                  <WithStyles(ForwardRef(ButtonBase))
                                     aria-label="export.button_close"
-                                    className="modal-paper-close-button"
-                                    classes={
-                                      Object {
-                                        "colorInherit": "MuiIconButton-colorInherit",
-                                        "colorPrimary": "MuiIconButton-colorPrimary",
-                                        "colorSecondary": "MuiIconButton-colorSecondary",
-                                        "disabled": "Mui-disabled",
-                                        "edgeEnd": "MuiIconButton-edgeEnd",
-                                        "edgeStart": "MuiIconButton-edgeStart",
-                                        "label": "MuiIconButton-label",
-                                        "root": "MuiIconButton-root",
-                                        "sizeSmall": "MuiIconButton-sizeSmall",
-                                      }
-                                    }
+                                    centerRipple={true}
+                                    className="MuiIconButton-root modal-paper-close-button"
+                                    disabled={false}
+                                    focusRipple={true}
                                     onClick={[MockFunction]}
                                   >
-                                    <WithStyles(ForwardRef(ButtonBase))
+                                    <ForwardRef(ButtonBase)
                                       aria-label="export.button_close"
                                       centerRipple={true}
                                       className="MuiIconButton-root modal-paper-close-button"
+                                      classes={
+                                        Object {
+                                          "disabled": "Mui-disabled",
+                                          "focusVisible": "Mui-focusVisible",
+                                          "root": "MuiButtonBase-root",
+                                        }
+                                      }
                                       disabled={false}
                                       focusRipple={true}
                                       onClick={[MockFunction]}
                                     >
-                                      <ForwardRef(ButtonBase)
+                                      <button
                                         aria-label="export.button_close"
-                                        centerRipple={true}
-                                        className="MuiIconButton-root modal-paper-close-button"
-                                        classes={
-                                          Object {
-                                            "disabled": "Mui-disabled",
-                                            "focusVisible": "Mui-focusVisible",
-                                            "root": "MuiButtonBase-root",
-                                          }
-                                        }
+                                        className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
                                         disabled={false}
-                                        focusRipple={true}
+                                        onBlur={[Function]}
                                         onClick={[MockFunction]}
+                                        onDragLeave={[Function]}
+                                        onFocus={[Function]}
+                                        onKeyDown={[Function]}
+                                        onKeyUp={[Function]}
+                                        onMouseDown={[Function]}
+                                        onMouseLeave={[Function]}
+                                        onMouseUp={[Function]}
+                                        onTouchEnd={[Function]}
+                                        onTouchMove={[Function]}
+                                        onTouchStart={[Function]}
+                                        tabIndex={0}
+                                        type="button"
                                       >
-                                        <button
-                                          aria-label="export.button_close"
-                                          className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                                          disabled={false}
-                                          onBlur={[Function]}
-                                          onClick={[MockFunction]}
-                                          onDragLeave={[Function]}
-                                          onFocus={[Function]}
-                                          onKeyDown={[Function]}
-                                          onKeyUp={[Function]}
-                                          onMouseDown={[Function]}
-                                          onMouseLeave={[Function]}
-                                          onMouseUp={[Function]}
-                                          onTouchEnd={[Function]}
-                                          onTouchMove={[Function]}
-                                          onTouchStart={[Function]}
-                                          tabIndex={0}
-                                          type="button"
+                                        <span
+                                          className="MuiIconButton-label"
                                         >
-                                          <span
-                                            className="MuiIconButton-label"
+                                          <Icon
+                                            icon="test-file-stub"
+                                            size={18}
+                                            spin={false}
                                           >
-                                            <Icon
-                                              icon="test-file-stub"
-                                              size={18}
-                                              spin={false}
+                                            <Component
+                                              className="styles__icon___23x3R"
+                                              height={18}
+                                              style={Object {}}
+                                              width={18}
                                             >
-                                              <Component
+                                              <svg
                                                 className="styles__icon___23x3R"
                                                 height={18}
                                                 style={Object {}}
                                                 width={18}
                                               >
-                                                <svg
-                                                  className="styles__icon___23x3R"
-                                                  height={18}
-                                                  style={Object {}}
-                                                  width={18}
-                                                >
-                                                  <use
-                                                    xlinkHref="#test-file-stub"
-                                                  />
-                                                </svg>
-                                              </Component>
-                                            </Icon>
-                                          </span>
-                                          <WithStyles(memo)
+                                                <use
+                                                  xlinkHref="#test-file-stub"
+                                                />
+                                              </svg>
+                                            </Component>
+                                          </Icon>
+                                        </span>
+                                        <WithStyles(memo)
+                                          center={true}
+                                        >
+                                          <ForwardRef(TouchRipple)
                                             center={true}
-                                          >
-                                            <ForwardRef(TouchRipple)
-                                              center={true}
-                                              classes={
-                                                Object {
-                                                  "child": "MuiTouchRipple-child",
-                                                  "childLeaving": "MuiTouchRipple-childLeaving",
-                                                  "childPulsate": "MuiTouchRipple-childPulsate",
-                                                  "ripple": "MuiTouchRipple-ripple",
-                                                  "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                  "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                  "root": "MuiTouchRipple-root",
-                                                }
+                                            classes={
+                                              Object {
+                                                "child": "MuiTouchRipple-child",
+                                                "childLeaving": "MuiTouchRipple-childLeaving",
+                                                "childPulsate": "MuiTouchRipple-childPulsate",
+                                                "ripple": "MuiTouchRipple-ripple",
+                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
+                                                "root": "MuiTouchRipple-root",
                                               }
+                                            }
+                                          >
+                                            <span
+                                              className="MuiTouchRipple-root"
                                             >
-                                              <span
-                                                className="MuiTouchRipple-root"
-                                              >
-                                                <TransitionGroup
-                                                  childFactory={[Function]}
-                                                  component={null}
-                                                  exit={true}
-                                                />
-                                              </span>
-                                            </ForwardRef(TouchRipple)>
-                                          </WithStyles(memo)>
-                                        </button>
-                                      </ForwardRef(ButtonBase)>
-                                    </WithStyles(ForwardRef(ButtonBase))>
-                                  </ForwardRef(IconButton)>
-                                </WithStyles(ForwardRef(IconButton))>
-                              </div>
+                                              <TransitionGroup
+                                                childFactory={[Function]}
+                                                component={null}
+                                                exit={true}
+                                              />
+                                            </span>
+                                          </ForwardRef(TouchRipple)>
+                                        </WithStyles(memo)>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
                               <div
                                 className="content"
                               >
diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
index e39a1f1ebe6c60db5ae88d87c07deb43c297ae1a..6ed914e558cc3f4a59792cad6cc277138dae81f4 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
@@ -419,31 +419,29 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
                       <div
                         class="modal-loading-root"
                       >
-                        <div>
-                          <button
-                            aria-label="export.button_close"
-                            class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                            tabindex="0"
-                            type="button"
+                        <button
+                          aria-label="export.button_close"
+                          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label"
                           >
-                            <span
-                              class="MuiIconButton-label"
+                            <svg
+                              class="styles__icon___23x3R"
+                              height="18"
+                              width="18"
                             >
-                              <svg
-                                class="styles__icon___23x3R"
-                                height="18"
-                                width="18"
-                              >
-                                <use
-                                  xlink:href="#test-file-stub"
-                                />
-                              </svg>
-                            </span>
-                            <span
-                              class="MuiTouchRipple-root"
-                            />
-                          </button>
-                        </div>
+                              <use
+                                xlink:href="#test-file-stub"
+                              />
+                            </svg>
+                          </span>
+                          <span
+                            class="MuiTouchRipple-root"
+                          />
+                        </button>
                         <div
                           class="content"
                         >
@@ -712,135 +710,131 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
                             <div
                               className="modal-loading-root"
                             >
-                              <div
+                              <WithStyles(ForwardRef(IconButton))
+                                aria-label="export.button_close"
+                                className="modal-paper-close-button"
                                 onClick={[MockFunction]}
                               >
-                                <WithStyles(ForwardRef(IconButton))
+                                <ForwardRef(IconButton)
                                   aria-label="export.button_close"
                                   className="modal-paper-close-button"
+                                  classes={
+                                    Object {
+                                      "colorInherit": "MuiIconButton-colorInherit",
+                                      "colorPrimary": "MuiIconButton-colorPrimary",
+                                      "colorSecondary": "MuiIconButton-colorSecondary",
+                                      "disabled": "Mui-disabled",
+                                      "edgeEnd": "MuiIconButton-edgeEnd",
+                                      "edgeStart": "MuiIconButton-edgeStart",
+                                      "label": "MuiIconButton-label",
+                                      "root": "MuiIconButton-root",
+                                      "sizeSmall": "MuiIconButton-sizeSmall",
+                                    }
+                                  }
                                   onClick={[MockFunction]}
                                 >
-                                  <ForwardRef(IconButton)
+                                  <WithStyles(ForwardRef(ButtonBase))
                                     aria-label="export.button_close"
-                                    className="modal-paper-close-button"
-                                    classes={
-                                      Object {
-                                        "colorInherit": "MuiIconButton-colorInherit",
-                                        "colorPrimary": "MuiIconButton-colorPrimary",
-                                        "colorSecondary": "MuiIconButton-colorSecondary",
-                                        "disabled": "Mui-disabled",
-                                        "edgeEnd": "MuiIconButton-edgeEnd",
-                                        "edgeStart": "MuiIconButton-edgeStart",
-                                        "label": "MuiIconButton-label",
-                                        "root": "MuiIconButton-root",
-                                        "sizeSmall": "MuiIconButton-sizeSmall",
-                                      }
-                                    }
+                                    centerRipple={true}
+                                    className="MuiIconButton-root modal-paper-close-button"
+                                    disabled={false}
+                                    focusRipple={true}
                                     onClick={[MockFunction]}
                                   >
-                                    <WithStyles(ForwardRef(ButtonBase))
+                                    <ForwardRef(ButtonBase)
                                       aria-label="export.button_close"
                                       centerRipple={true}
                                       className="MuiIconButton-root modal-paper-close-button"
+                                      classes={
+                                        Object {
+                                          "disabled": "Mui-disabled",
+                                          "focusVisible": "Mui-focusVisible",
+                                          "root": "MuiButtonBase-root",
+                                        }
+                                      }
                                       disabled={false}
                                       focusRipple={true}
                                       onClick={[MockFunction]}
                                     >
-                                      <ForwardRef(ButtonBase)
+                                      <button
                                         aria-label="export.button_close"
-                                        centerRipple={true}
-                                        className="MuiIconButton-root modal-paper-close-button"
-                                        classes={
-                                          Object {
-                                            "disabled": "Mui-disabled",
-                                            "focusVisible": "Mui-focusVisible",
-                                            "root": "MuiButtonBase-root",
-                                          }
-                                        }
+                                        className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
                                         disabled={false}
-                                        focusRipple={true}
+                                        onBlur={[Function]}
                                         onClick={[MockFunction]}
+                                        onDragLeave={[Function]}
+                                        onFocus={[Function]}
+                                        onKeyDown={[Function]}
+                                        onKeyUp={[Function]}
+                                        onMouseDown={[Function]}
+                                        onMouseLeave={[Function]}
+                                        onMouseUp={[Function]}
+                                        onTouchEnd={[Function]}
+                                        onTouchMove={[Function]}
+                                        onTouchStart={[Function]}
+                                        tabIndex={0}
+                                        type="button"
                                       >
-                                        <button
-                                          aria-label="export.button_close"
-                                          className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                                          disabled={false}
-                                          onBlur={[Function]}
-                                          onClick={[MockFunction]}
-                                          onDragLeave={[Function]}
-                                          onFocus={[Function]}
-                                          onKeyDown={[Function]}
-                                          onKeyUp={[Function]}
-                                          onMouseDown={[Function]}
-                                          onMouseLeave={[Function]}
-                                          onMouseUp={[Function]}
-                                          onTouchEnd={[Function]}
-                                          onTouchMove={[Function]}
-                                          onTouchStart={[Function]}
-                                          tabIndex={0}
-                                          type="button"
+                                        <span
+                                          className="MuiIconButton-label"
                                         >
-                                          <span
-                                            className="MuiIconButton-label"
+                                          <Icon
+                                            icon="test-file-stub"
+                                            size={18}
+                                            spin={false}
                                           >
-                                            <Icon
-                                              icon="test-file-stub"
-                                              size={18}
-                                              spin={false}
+                                            <Component
+                                              className="styles__icon___23x3R"
+                                              height={18}
+                                              style={Object {}}
+                                              width={18}
                                             >
-                                              <Component
+                                              <svg
                                                 className="styles__icon___23x3R"
                                                 height={18}
                                                 style={Object {}}
                                                 width={18}
                                               >
-                                                <svg
-                                                  className="styles__icon___23x3R"
-                                                  height={18}
-                                                  style={Object {}}
-                                                  width={18}
-                                                >
-                                                  <use
-                                                    xlinkHref="#test-file-stub"
-                                                  />
-                                                </svg>
-                                              </Component>
-                                            </Icon>
-                                          </span>
-                                          <WithStyles(memo)
+                                                <use
+                                                  xlinkHref="#test-file-stub"
+                                                />
+                                              </svg>
+                                            </Component>
+                                          </Icon>
+                                        </span>
+                                        <WithStyles(memo)
+                                          center={true}
+                                        >
+                                          <ForwardRef(TouchRipple)
                                             center={true}
-                                          >
-                                            <ForwardRef(TouchRipple)
-                                              center={true}
-                                              classes={
-                                                Object {
-                                                  "child": "MuiTouchRipple-child",
-                                                  "childLeaving": "MuiTouchRipple-childLeaving",
-                                                  "childPulsate": "MuiTouchRipple-childPulsate",
-                                                  "ripple": "MuiTouchRipple-ripple",
-                                                  "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                  "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                  "root": "MuiTouchRipple-root",
-                                                }
+                                            classes={
+                                              Object {
+                                                "child": "MuiTouchRipple-child",
+                                                "childLeaving": "MuiTouchRipple-childLeaving",
+                                                "childPulsate": "MuiTouchRipple-childPulsate",
+                                                "ripple": "MuiTouchRipple-ripple",
+                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
+                                                "root": "MuiTouchRipple-root",
                                               }
+                                            }
+                                          >
+                                            <span
+                                              className="MuiTouchRipple-root"
                                             >
-                                              <span
-                                                className="MuiTouchRipple-root"
-                                              >
-                                                <TransitionGroup
-                                                  childFactory={[Function]}
-                                                  component={null}
-                                                  exit={true}
-                                                />
-                                              </span>
-                                            </ForwardRef(TouchRipple)>
-                                          </WithStyles(memo)>
-                                        </button>
-                                      </ForwardRef(ButtonBase)>
-                                    </WithStyles(ForwardRef(ButtonBase))>
-                                  </ForwardRef(IconButton)>
-                                </WithStyles(ForwardRef(IconButton))>
-                              </div>
+                                              <TransitionGroup
+                                                childFactory={[Function]}
+                                                component={null}
+                                                exit={true}
+                                              />
+                                            </span>
+                                          </ForwardRef(TouchRipple)>
+                                        </WithStyles(memo)>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
                               <div
                                 className="content"
                               >
diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
index 9c42b78a33f9b7581b2c93147cd97d81dfe7fc76..2e7737e981edb15bad7fb38e68a1fccad9476ca5 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
@@ -412,31 +412,29 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
                       <div
                         class="modal-start-root"
                       >
-                        <div>
-                          <button
-                            aria-label="export.button_close"
-                            class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                            tabindex="0"
-                            type="button"
+                        <button
+                          aria-label="export.button_close"
+                          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label"
                           >
-                            <span
-                              class="MuiIconButton-label"
+                            <svg
+                              class="styles__icon___23x3R"
+                              height="18"
+                              width="18"
                             >
-                              <svg
-                                class="styles__icon___23x3R"
-                                height="18"
-                                width="18"
-                              >
-                                <use
-                                  xlink:href="#test-file-stub"
-                                />
-                              </svg>
-                            </span>
-                            <span
-                              class="MuiTouchRipple-root"
-                            />
-                          </button>
-                        </div>
+                              <use
+                                xlink:href="#test-file-stub"
+                              />
+                            </svg>
+                          </span>
+                          <span
+                            class="MuiTouchRipple-root"
+                          />
+                        </button>
                         <div
                           class="content"
                         >
@@ -714,135 +712,131 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
                             <div
                               className="modal-start-root"
                             >
-                              <div
+                              <WithStyles(ForwardRef(IconButton))
+                                aria-label="export.button_close"
+                                className="modal-paper-close-button"
                                 onClick={[MockFunction]}
                               >
-                                <WithStyles(ForwardRef(IconButton))
+                                <ForwardRef(IconButton)
                                   aria-label="export.button_close"
                                   className="modal-paper-close-button"
+                                  classes={
+                                    Object {
+                                      "colorInherit": "MuiIconButton-colorInherit",
+                                      "colorPrimary": "MuiIconButton-colorPrimary",
+                                      "colorSecondary": "MuiIconButton-colorSecondary",
+                                      "disabled": "Mui-disabled",
+                                      "edgeEnd": "MuiIconButton-edgeEnd",
+                                      "edgeStart": "MuiIconButton-edgeStart",
+                                      "label": "MuiIconButton-label",
+                                      "root": "MuiIconButton-root",
+                                      "sizeSmall": "MuiIconButton-sizeSmall",
+                                    }
+                                  }
                                   onClick={[MockFunction]}
                                 >
-                                  <ForwardRef(IconButton)
+                                  <WithStyles(ForwardRef(ButtonBase))
                                     aria-label="export.button_close"
-                                    className="modal-paper-close-button"
-                                    classes={
-                                      Object {
-                                        "colorInherit": "MuiIconButton-colorInherit",
-                                        "colorPrimary": "MuiIconButton-colorPrimary",
-                                        "colorSecondary": "MuiIconButton-colorSecondary",
-                                        "disabled": "Mui-disabled",
-                                        "edgeEnd": "MuiIconButton-edgeEnd",
-                                        "edgeStart": "MuiIconButton-edgeStart",
-                                        "label": "MuiIconButton-label",
-                                        "root": "MuiIconButton-root",
-                                        "sizeSmall": "MuiIconButton-sizeSmall",
-                                      }
-                                    }
+                                    centerRipple={true}
+                                    className="MuiIconButton-root modal-paper-close-button"
+                                    disabled={false}
+                                    focusRipple={true}
                                     onClick={[MockFunction]}
                                   >
-                                    <WithStyles(ForwardRef(ButtonBase))
+                                    <ForwardRef(ButtonBase)
                                       aria-label="export.button_close"
                                       centerRipple={true}
                                       className="MuiIconButton-root modal-paper-close-button"
+                                      classes={
+                                        Object {
+                                          "disabled": "Mui-disabled",
+                                          "focusVisible": "Mui-focusVisible",
+                                          "root": "MuiButtonBase-root",
+                                        }
+                                      }
                                       disabled={false}
                                       focusRipple={true}
                                       onClick={[MockFunction]}
                                     >
-                                      <ForwardRef(ButtonBase)
+                                      <button
                                         aria-label="export.button_close"
-                                        centerRipple={true}
-                                        className="MuiIconButton-root modal-paper-close-button"
-                                        classes={
-                                          Object {
-                                            "disabled": "Mui-disabled",
-                                            "focusVisible": "Mui-focusVisible",
-                                            "root": "MuiButtonBase-root",
-                                          }
-                                        }
+                                        className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
                                         disabled={false}
-                                        focusRipple={true}
+                                        onBlur={[Function]}
                                         onClick={[MockFunction]}
+                                        onDragLeave={[Function]}
+                                        onFocus={[Function]}
+                                        onKeyDown={[Function]}
+                                        onKeyUp={[Function]}
+                                        onMouseDown={[Function]}
+                                        onMouseLeave={[Function]}
+                                        onMouseUp={[Function]}
+                                        onTouchEnd={[Function]}
+                                        onTouchMove={[Function]}
+                                        onTouchStart={[Function]}
+                                        tabIndex={0}
+                                        type="button"
                                       >
-                                        <button
-                                          aria-label="export.button_close"
-                                          className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                                          disabled={false}
-                                          onBlur={[Function]}
-                                          onClick={[MockFunction]}
-                                          onDragLeave={[Function]}
-                                          onFocus={[Function]}
-                                          onKeyDown={[Function]}
-                                          onKeyUp={[Function]}
-                                          onMouseDown={[Function]}
-                                          onMouseLeave={[Function]}
-                                          onMouseUp={[Function]}
-                                          onTouchEnd={[Function]}
-                                          onTouchMove={[Function]}
-                                          onTouchStart={[Function]}
-                                          tabIndex={0}
-                                          type="button"
+                                        <span
+                                          className="MuiIconButton-label"
                                         >
-                                          <span
-                                            className="MuiIconButton-label"
+                                          <Icon
+                                            icon="test-file-stub"
+                                            size={18}
+                                            spin={false}
                                           >
-                                            <Icon
-                                              icon="test-file-stub"
-                                              size={18}
-                                              spin={false}
+                                            <Component
+                                              className="styles__icon___23x3R"
+                                              height={18}
+                                              style={Object {}}
+                                              width={18}
                                             >
-                                              <Component
+                                              <svg
                                                 className="styles__icon___23x3R"
                                                 height={18}
                                                 style={Object {}}
                                                 width={18}
                                               >
-                                                <svg
-                                                  className="styles__icon___23x3R"
-                                                  height={18}
-                                                  style={Object {}}
-                                                  width={18}
-                                                >
-                                                  <use
-                                                    xlinkHref="#test-file-stub"
-                                                  />
-                                                </svg>
-                                              </Component>
-                                            </Icon>
-                                          </span>
-                                          <WithStyles(memo)
+                                                <use
+                                                  xlinkHref="#test-file-stub"
+                                                />
+                                              </svg>
+                                            </Component>
+                                          </Icon>
+                                        </span>
+                                        <WithStyles(memo)
+                                          center={true}
+                                        >
+                                          <ForwardRef(TouchRipple)
                                             center={true}
-                                          >
-                                            <ForwardRef(TouchRipple)
-                                              center={true}
-                                              classes={
-                                                Object {
-                                                  "child": "MuiTouchRipple-child",
-                                                  "childLeaving": "MuiTouchRipple-childLeaving",
-                                                  "childPulsate": "MuiTouchRipple-childPulsate",
-                                                  "ripple": "MuiTouchRipple-ripple",
-                                                  "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                  "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                  "root": "MuiTouchRipple-root",
-                                                }
+                                            classes={
+                                              Object {
+                                                "child": "MuiTouchRipple-child",
+                                                "childLeaving": "MuiTouchRipple-childLeaving",
+                                                "childPulsate": "MuiTouchRipple-childPulsate",
+                                                "ripple": "MuiTouchRipple-ripple",
+                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
+                                                "root": "MuiTouchRipple-root",
                                               }
+                                            }
+                                          >
+                                            <span
+                                              className="MuiTouchRipple-root"
                                             >
-                                              <span
-                                                className="MuiTouchRipple-root"
-                                              >
-                                                <TransitionGroup
-                                                  childFactory={[Function]}
-                                                  component={null}
-                                                  exit={true}
-                                                />
-                                              </span>
-                                            </ForwardRef(TouchRipple)>
-                                          </WithStyles(memo)>
-                                        </button>
-                                      </ForwardRef(ButtonBase)>
-                                    </WithStyles(ForwardRef(ButtonBase))>
-                                  </ForwardRef(IconButton)>
-                                </WithStyles(ForwardRef(IconButton))>
-                              </div>
+                                              <TransitionGroup
+                                                childFactory={[Function]}
+                                                component={null}
+                                                exit={true}
+                                              />
+                                            </span>
+                                          </ForwardRef(TouchRipple)>
+                                        </WithStyles(memo)>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
                               <div
                                 className="content"
                               >
diff --git a/src/components/Options/ExportData/Modals/exportDoneModal.tsx b/src/components/Options/ExportData/Modals/exportDoneModal.tsx
index c8cdaae1e40a4bec3d209d4c2f977ef9ca1c4437..79d7a24dbe5881b54bc0fe3c14e7bc7a375fb9dc 100644
--- a/src/components/Options/ExportData/Modals/exportDoneModal.tsx
+++ b/src/components/Options/ExportData/Modals/exportDoneModal.tsx
@@ -36,15 +36,13 @@ const ExportDoneModal = ({
       </div>
 
       <div className="modal-done-root">
-        <div onClick={handleCloseClick}>
-          <IconButton
-            aria-label={t('export.button_close')}
-            className="modal-paper-close-button"
-            onClick={handleCloseClick}
-          >
-            <Icon icon={CloseIcon} size={18} />
-          </IconButton>
-        </div>
+        <IconButton
+          aria-label={t('export.button_close')}
+          className="modal-paper-close-button"
+          onClick={handleCloseClick}
+        >
+          <Icon icon={CloseIcon} size={18} />
+        </IconButton>
 
         <div className="content">
           <div className="icon-main">
diff --git a/src/components/Options/ExportData/Modals/exportLoadingModal.tsx b/src/components/Options/ExportData/Modals/exportLoadingModal.tsx
index 55b8d064023973701d5d858be70c8cdf6ae65da2..35772077fc0e3b9c28fa0aed3dcff189fb839bc6 100644
--- a/src/components/Options/ExportData/Modals/exportLoadingModal.tsx
+++ b/src/components/Options/ExportData/Modals/exportLoadingModal.tsx
@@ -193,15 +193,13 @@ const ExportLoadingModal = ({
       </div>
 
       <div className="modal-loading-root">
-        <div onClick={handleCloseClick}>
-          <IconButton
-            aria-label={t('export.button_close')}
-            className="modal-paper-close-button"
-            onClick={handleCloseClick}
-          >
-            <Icon icon={CloseIcon} size={18} />
-          </IconButton>
-        </div>
+        <IconButton
+          aria-label={t('export.button_close')}
+          className="modal-paper-close-button"
+          onClick={handleCloseClick}
+        >
+          <Icon icon={CloseIcon} size={18} />
+        </IconButton>
         <div className="content">
           <div className="icon-main">
             <Loader color="gold" />
diff --git a/src/components/Options/ExportData/Modals/exportStartModal.tsx b/src/components/Options/ExportData/Modals/exportStartModal.tsx
index 9d7837eb4ccc712d26b5cd365b2d37b6e66d2fcd..42c9e48666cd4c446aaded19923adb9ee63b50af 100644
--- a/src/components/Options/ExportData/Modals/exportStartModal.tsx
+++ b/src/components/Options/ExportData/Modals/exportStartModal.tsx
@@ -34,15 +34,13 @@ const ExportStartModal = ({
         {t('export.modal_start.accessibility_title')}
       </div>
       <div className="modal-start-root">
-        <div onClick={handleCloseClick}>
-          <IconButton
-            aria-label={t('export.button_close')}
-            className="modal-paper-close-button"
-            onClick={handleCloseClick}
-          >
-            <Icon icon={CloseIcon} size={18} />
-          </IconButton>
-        </div>
+        <IconButton
+          aria-label={t('export.button_close')}
+          className="modal-paper-close-button"
+          onClick={handleCloseClick}
+        >
+          <Icon icon={CloseIcon} size={18} />
+        </IconButton>
         <div className="content">
           <div className="icon-main">
             <Icon icon={download} size={48} />
diff --git a/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap b/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap
index 26d285f3a894f7ff305b6ffab7497acc474afac3..49b15ee33b6b39a4226d4cfd01a401224b2bca70 100644
--- a/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap
+++ b/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap
@@ -21,11 +21,11 @@ exports[`LegalNoticeLink component should be rendered correctly 1`] = `
           "render": [Function],
         }
       }
+      onClick={[Function]}
       to="/options/legalnotice"
     >
       <div
         className="card"
-        onClick={[Function]}
       >
         <div
           className="legal-notice-card"
diff --git a/src/components/Options/HelpLink/HelpLink.tsx b/src/components/Options/HelpLink/HelpLink.tsx
index f028ff73c847d54f6fca47eb1db04b159989ee75..4702a64fac00f1f6c8d99aa4daac80313101200c 100644
--- a/src/components/Options/HelpLink/HelpLink.tsx
+++ b/src/components/Options/HelpLink/HelpLink.tsx
@@ -12,15 +12,15 @@ const HelpLink = () => {
   const dispatch = useAppDispatch()
 
   return (
-    <div
-      className="help-root"
-      onClick={() => dispatch(openFeedbackModal(true))}
-    >
+    <div className="help-root">
       <div className="help-content">
         <div className="help-header text-16-normal-uppercase">
           {t('help.title_help')}
         </div>
-        <Link className="help-card-link">
+        <Link
+          className="help-card-link"
+          onClick={() => dispatch(openFeedbackModal(true))}
+        >
           <div className="card">
             <div className="help-card">
               <div className="help-card-content">
diff --git a/src/components/Options/LegalNotice/LegalNoticeLink.tsx b/src/components/Options/LegalNotice/LegalNoticeLink.tsx
index 418a4c19daa3f98e5c95b17566c44202b2cdf8e0..5786982a77f766c14451781f04c19d17806bb0a6 100644
--- a/src/components/Options/LegalNotice/LegalNoticeLink.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeLink.tsx
@@ -28,8 +28,9 @@ const LegalNoticeLink = () => {
           className="legal-notice-card-link"
           component={RouterLink}
           to="/options/legalnotice"
+          onClick={emitNavEvent}
         >
-          <div className="card" onClick={emitNavEvent}>
+          <div className="card">
             <div className="legal-notice-card">
               <div className="legal-notice-card-content">
                 <StyledIcon
diff --git a/src/components/Options/MatomoOptOut/MatomoOptOut.tsx b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
index 5ddd959112782634293eb4dc6c742254b649a7b6..3589de6222a5a385bedd1af0332222aed9a5308b 100644
--- a/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
+++ b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
@@ -15,6 +15,7 @@ const MatomoOptOut = () => {
           {t('matomo.matomo_title')}
         </div>
         <iframe
+          title="opt-out"
           style={{ height: '250px' }}
           src={`${baseUrl}index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif`}
         />
diff --git a/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap b/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
index 599b28c0a472fe9b02fd1b93dc448c2b6e597659..1ac1911b5acecdc56d7ca24fb7272c7db81a3360 100644
--- a/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
+++ b/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
@@ -19,6 +19,7 @@ exports[`MatomoOptOut component should be rendered correctly 1`] = `
           "height": "250px",
         }
       }
+      title="opt-out"
     />
   </div>
 </div>
diff --git a/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx b/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
index b0c920043d4675b97d63dcd0ef2eb2d531e27fdb..918be75c334d086c3efd1485cd588e02c399133d 100644
--- a/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-autofocus */
 import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
 import FormProgress from 'components/CommonKit/FormProgress/FormProgress'
 import 'components/ProfileType/profileTypeForm.scss'
diff --git a/src/components/Terms/TermsView.spec.tsx b/src/components/Terms/TermsView.spec.tsx
index 349fb9d0d9f8596aeb533c1ac6b2c28804711540..970a43b475a84c35eea3d0473010e62ccc73649f 100644
--- a/src/components/Terms/TermsView.spec.tsx
+++ b/src/components/Terms/TermsView.spec.tsx
@@ -1,4 +1,5 @@
-import { Button } from '@material-ui/core'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { mount } from 'enzyme'
 import toJson from 'enzyme-to-json'
 import React from 'react'
@@ -9,11 +10,10 @@ import { mockUpToDateTerm } from 'tests/__mocks__/termsData.mock'
 import TermsView from './TermsView'
 
 const mockCreateTerm = jest.fn()
-const mockGetTermsVersionType = jest.fn()
 jest.mock('services/terms.service', () => {
   return jest.fn(() => ({
     createTerm: mockCreateTerm,
-    getTermsVersionType: mockGetTermsVersionType,
+    getTermsVersionType: jest.fn(),
   }))
 })
 
@@ -41,39 +41,23 @@ describe('TermsView component', () => {
     )
     expect(toJson(component)).toMatchSnapshot()
   })
-  it('should valid checkboxes and valid consent', () => {
+  it('should be unable to click "validate" button first then enable checkboxes and valid consent', async () => {
     mockCreateTerm.mockResolvedValueOnce(mockUpToDateTerm)
-    const wrapper = mount(
+    render(
       <Provider store={store}>
         <TermsView />
       </Provider>
     )
 
-    wrapper
-      .find('input')
-      .at(0)
-      .simulate('change', { target: { checked: true } })
-    expect(wrapper.find('input').at(0).props().checked).toEqual(true)
-    wrapper
-      .find('input')
-      .at(1)
-      .simulate('change', { target: { checked: true } })
-    expect(wrapper.find('input').at(1).props().checked).toEqual(true)
-    expect(wrapper.find(Button).first().prop('disabled')).toBeFalsy()
-    wrapper.find(Button).first().simulate('click')
-    expect(mockAppDispatch).toHaveBeenCalledTimes(3)
-  })
+    const acceptButton = screen.getAllByRole('button')[2]
+    expect(acceptButton).toBeDisabled()
+    expect(mockUpdateProfile).toHaveBeenCalledTimes(0)
 
-  it('should be unable to valid consent', async () => {
-    mockCreateTerm.mockResolvedValueOnce(mockUpToDateTerm)
-    const wrapper = mount(
-      <Provider store={store}>
-        <TermsView />
-      </Provider>
-    )
-    wrapper.find(Button).first().simulate('click')
+    const [boxGCU, boxLegal] = screen.getAllByRole('checkbox')
+    await userEvent.click(boxGCU)
+    await userEvent.click(boxLegal)
+    await userEvent.click(acceptButton)
 
-    expect(wrapper.find(Button).first().prop('disabled')).toBeTruthy()
-    expect(mockUpdateProfile).toHaveBeenCalledTimes(0)
+    expect(mockAppDispatch).toHaveBeenCalledTimes(3)
   })
 })
diff --git a/src/components/Terms/TermsView.tsx b/src/components/Terms/TermsView.tsx
index 24553351b5d7ff5abe534e53ef0943552a14ea03..60c43630fc15d3c3c86ad8bd93c39da0da48ad09 100644
--- a/src/components/Terms/TermsView.tsx
+++ b/src/components/Terms/TermsView.tsx
@@ -73,6 +73,7 @@ const TermsView = () => {
             </label>
             <label className="inline">
               <input
+                id="gcu"
                 type="checkbox"
                 name="GCU-validation"
                 className="inputCheckbox"
@@ -80,22 +81,24 @@ const TermsView = () => {
                 checked={GCUValidation}
               />
               <div>
-                <span
-                  onClick={e => {
-                    e.preventDefault()
-                    toggleCGUModal()
-                  }}
-                  dangerouslySetInnerHTML={{ __html: t('dataShare.validCGU') }}
-                />
-                <span
-                  onClick={e => {
-                    e.preventDefault()
-                    toggleLegalNoticeModal()
-                  }}
-                  dangerouslySetInnerHTML={{
-                    __html: t('dataShare.validLegal'),
-                  }}
-                />
+                <span>{t('dataShare.validCGU')}</span>
+                <Button
+                  size="small"
+                  className="btnText"
+                  onClick={toggleCGUModal}
+                >
+                  {t('dataShare.validCGU_button')}
+                </Button>
+
+                <span>{t('dataShare.validLegal')}</span>
+                <Button
+                  size="small"
+                  className="btnText"
+                  onClick={toggleLegalNoticeModal}
+                >
+                  {t('dataShare.validLegal_button')}
+                </Button>
+                <span>{t('dataShare.validLegal2')}</span>
               </div>
             </label>
           </div>
diff --git a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
index 180b38490a8c347a22988f89e64f8356e9f531df..c1e2539f86aeec44e6f24388888dd839bda6c962 100644
--- a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
@@ -135,27 +135,269 @@ exports[`TermsView component should be rendered correctly 1`] = `
           <input
             checked={false}
             className="inputCheckbox"
+            id="gcu"
             name="GCU-validation"
             onChange={[Function]}
             type="checkbox"
           />
           <div>
-            <span
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "dataShare.validCGU",
-                }
-              }
+            <span>
+              dataShare.validCGU
+            </span>
+            <WithStyles(ForwardRef(Button))
+              className="btnText"
               onClick={[Function]}
-            />
-            <span
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "dataShare.validLegal",
+              size="small"
+            >
+              <ForwardRef(Button)
+                className="btnText"
+                classes={
+                  Object {
+                    "colorInherit": "MuiButton-colorInherit",
+                    "contained": "MuiButton-contained",
+                    "containedPrimary": "MuiButton-containedPrimary",
+                    "containedSecondary": "MuiButton-containedSecondary",
+                    "containedSizeLarge": "MuiButton-containedSizeLarge",
+                    "containedSizeSmall": "MuiButton-containedSizeSmall",
+                    "disableElevation": "MuiButton-disableElevation",
+                    "disabled": "Mui-disabled",
+                    "endIcon": "MuiButton-endIcon",
+                    "focusVisible": "Mui-focusVisible",
+                    "fullWidth": "MuiButton-fullWidth",
+                    "iconSizeLarge": "MuiButton-iconSizeLarge",
+                    "iconSizeMedium": "MuiButton-iconSizeMedium",
+                    "iconSizeSmall": "MuiButton-iconSizeSmall",
+                    "label": "MuiButton-label",
+                    "outlined": "MuiButton-outlined",
+                    "outlinedPrimary": "MuiButton-outlinedPrimary",
+                    "outlinedSecondary": "MuiButton-outlinedSecondary",
+                    "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+                    "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+                    "root": "MuiButton-root",
+                    "sizeLarge": "MuiButton-sizeLarge",
+                    "sizeSmall": "MuiButton-sizeSmall",
+                    "startIcon": "MuiButton-startIcon",
+                    "text": "MuiButton-text",
+                    "textPrimary": "MuiButton-textPrimary",
+                    "textSecondary": "MuiButton-textSecondary",
+                    "textSizeLarge": "MuiButton-textSizeLarge",
+                    "textSizeSmall": "MuiButton-textSizeSmall",
+                  }
                 }
-              }
+                onClick={[Function]}
+                size="small"
+              >
+                <WithStyles(ForwardRef(ButtonBase))
+                  className="MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall"
+                  component="button"
+                  disabled={false}
+                  focusRipple={true}
+                  focusVisibleClassName="Mui-focusVisible"
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <ForwardRef(ButtonBase)
+                    className="MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall"
+                    classes={
+                      Object {
+                        "disabled": "Mui-disabled",
+                        "focusVisible": "Mui-focusVisible",
+                        "root": "MuiButtonBase-root",
+                      }
+                    }
+                    component="button"
+                    disabled={false}
+                    focusRipple={true}
+                    focusVisibleClassName="Mui-focusVisible"
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <button
+                      className="MuiButtonBase-root MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall"
+                      disabled={false}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onDragLeave={[Function]}
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      onKeyUp={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseUp={[Function]}
+                      onTouchEnd={[Function]}
+                      onTouchMove={[Function]}
+                      onTouchStart={[Function]}
+                      tabIndex={0}
+                      type="button"
+                    >
+                      <span
+                        className="MuiButton-label"
+                      >
+                        dataShare.validCGU_button
+                      </span>
+                      <WithStyles(memo)
+                        center={false}
+                      >
+                        <ForwardRef(TouchRipple)
+                          center={false}
+                          classes={
+                            Object {
+                              "child": "MuiTouchRipple-child",
+                              "childLeaving": "MuiTouchRipple-childLeaving",
+                              "childPulsate": "MuiTouchRipple-childPulsate",
+                              "ripple": "MuiTouchRipple-ripple",
+                              "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                              "rippleVisible": "MuiTouchRipple-rippleVisible",
+                              "root": "MuiTouchRipple-root",
+                            }
+                          }
+                        >
+                          <span
+                            className="MuiTouchRipple-root"
+                          >
+                            <TransitionGroup
+                              childFactory={[Function]}
+                              component={null}
+                              exit={true}
+                            />
+                          </span>
+                        </ForwardRef(TouchRipple)>
+                      </WithStyles(memo)>
+                    </button>
+                  </ForwardRef(ButtonBase)>
+                </WithStyles(ForwardRef(ButtonBase))>
+              </ForwardRef(Button)>
+            </WithStyles(ForwardRef(Button))>
+            <span>
+              dataShare.validLegal
+            </span>
+            <WithStyles(ForwardRef(Button))
+              className="btnText"
               onClick={[Function]}
-            />
+              size="small"
+            >
+              <ForwardRef(Button)
+                className="btnText"
+                classes={
+                  Object {
+                    "colorInherit": "MuiButton-colorInherit",
+                    "contained": "MuiButton-contained",
+                    "containedPrimary": "MuiButton-containedPrimary",
+                    "containedSecondary": "MuiButton-containedSecondary",
+                    "containedSizeLarge": "MuiButton-containedSizeLarge",
+                    "containedSizeSmall": "MuiButton-containedSizeSmall",
+                    "disableElevation": "MuiButton-disableElevation",
+                    "disabled": "Mui-disabled",
+                    "endIcon": "MuiButton-endIcon",
+                    "focusVisible": "Mui-focusVisible",
+                    "fullWidth": "MuiButton-fullWidth",
+                    "iconSizeLarge": "MuiButton-iconSizeLarge",
+                    "iconSizeMedium": "MuiButton-iconSizeMedium",
+                    "iconSizeSmall": "MuiButton-iconSizeSmall",
+                    "label": "MuiButton-label",
+                    "outlined": "MuiButton-outlined",
+                    "outlinedPrimary": "MuiButton-outlinedPrimary",
+                    "outlinedSecondary": "MuiButton-outlinedSecondary",
+                    "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+                    "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+                    "root": "MuiButton-root",
+                    "sizeLarge": "MuiButton-sizeLarge",
+                    "sizeSmall": "MuiButton-sizeSmall",
+                    "startIcon": "MuiButton-startIcon",
+                    "text": "MuiButton-text",
+                    "textPrimary": "MuiButton-textPrimary",
+                    "textSecondary": "MuiButton-textSecondary",
+                    "textSizeLarge": "MuiButton-textSizeLarge",
+                    "textSizeSmall": "MuiButton-textSizeSmall",
+                  }
+                }
+                onClick={[Function]}
+                size="small"
+              >
+                <WithStyles(ForwardRef(ButtonBase))
+                  className="MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall"
+                  component="button"
+                  disabled={false}
+                  focusRipple={true}
+                  focusVisibleClassName="Mui-focusVisible"
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <ForwardRef(ButtonBase)
+                    className="MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall"
+                    classes={
+                      Object {
+                        "disabled": "Mui-disabled",
+                        "focusVisible": "Mui-focusVisible",
+                        "root": "MuiButtonBase-root",
+                      }
+                    }
+                    component="button"
+                    disabled={false}
+                    focusRipple={true}
+                    focusVisibleClassName="Mui-focusVisible"
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <button
+                      className="MuiButtonBase-root MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall"
+                      disabled={false}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onDragLeave={[Function]}
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      onKeyUp={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseUp={[Function]}
+                      onTouchEnd={[Function]}
+                      onTouchMove={[Function]}
+                      onTouchStart={[Function]}
+                      tabIndex={0}
+                      type="button"
+                    >
+                      <span
+                        className="MuiButton-label"
+                      >
+                        dataShare.validLegal_button
+                      </span>
+                      <WithStyles(memo)
+                        center={false}
+                      >
+                        <ForwardRef(TouchRipple)
+                          center={false}
+                          classes={
+                            Object {
+                              "child": "MuiTouchRipple-child",
+                              "childLeaving": "MuiTouchRipple-childLeaving",
+                              "childPulsate": "MuiTouchRipple-childPulsate",
+                              "ripple": "MuiTouchRipple-ripple",
+                              "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                              "rippleVisible": "MuiTouchRipple-rippleVisible",
+                              "root": "MuiTouchRipple-root",
+                            }
+                          }
+                        >
+                          <span
+                            className="MuiTouchRipple-root"
+                          >
+                            <TransitionGroup
+                              childFactory={[Function]}
+                              component={null}
+                              exit={true}
+                            />
+                          </span>
+                        </ForwardRef(TouchRipple)>
+                      </WithStyles(memo)>
+                    </button>
+                  </ForwardRef(ButtonBase)>
+                </WithStyles(ForwardRef(ButtonBase))>
+              </ForwardRef(Button)>
+            </WithStyles(ForwardRef(Button))>
+            <span>
+              dataShare.validLegal2
+            </span>
           </div>
         </label>
       </div>
diff --git a/src/components/Terms/termsView.scss b/src/components/Terms/termsView.scss
index bf6c77243623a8e8fe8f8b067a3c0e3317167d9b..4c4c64281fae0cf2874a67ebdbf9314c2b9be681 100644
--- a/src/components/Terms/termsView.scss
+++ b/src/components/Terms/termsView.scss
@@ -31,6 +31,13 @@
     gap: 0.5rem;
     align-items: center;
   }
+
+  button {
+    color: $gold-shadow;
+    span {
+      color: $gold-shadow;
+    }
+  }
 }
 .dataShare-content-wrapper,
 .dataShare-content-root {
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 409eb54ad34be172d8f161de7ac2163033b3f404..b6a938424143fc0fd7ae798617313a5b93c8d8de 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -565,7 +565,8 @@
       "ventilation": "VMC",
       "freezer": "Congélateur",
       "boiler": "Chaudière",
-      "hydraulic_heating": "Chauffage hydraulique"
+      "hydraulic_heating": "Chauffage hydraulique",
+      "accessible_label": "Sélection d'équipement"
     }
   },
   "ecogesture_selection": {
@@ -655,8 +656,11 @@
     "part10": "ou en ligne, au moyen du formulaire disponible à l'adresse suivante\u00a0: ",
     "link1": "<a href=\"https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/\">https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/</a>",
     "validDataConsent": "Je consens au traitement de mes données tel que décrit ci-dessus.",
-    "validCGU": "Je valide les <span class=\"action\">Conditions Générales d’Utilisation</span> ",
-    "validLegal": " du service et ai pris connaissance des <span class=\"action\">Mentions Légales</span> de celui-ci.",
+    "validCGU": "Je valide les ",
+    "validCGU_button": "Conditions Générales d’Utilisation",
+    "validLegal": " du service et ai pris connaissance des ",
+    "validLegal_button": "Mentions Légales",
+    "validLegal2": "de celui-ci.",
     "button_accept": "C'est parti !",
     "accessibility": {
       "button_accept": "Accepter les conditions générales d'utilisation"
diff --git a/yarn.lock b/yarn.lock
index c2abfe9e335b9dcbe58522d3f3d3b659d559b268..26a9cd54951874e33da9145762c5564230895411 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1519,6 +1519,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
+  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.7.6":
   version "7.20.13"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.13.tgz#7055ab8a7cff2b8f6058bf6ae45ff84ad2aded4b"
@@ -3819,7 +3826,7 @@ aria-query@5.1.3:
   dependencies:
     deep-equal "^2.0.5"
 
-aria-query@^5.0.0:
+aria-query@^5.0.0, aria-query@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
   integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
@@ -3886,6 +3893,17 @@ array-includes@^3.1.6:
     get-intrinsic "^1.1.3"
     is-string "^1.0.7"
 
+array-includes@^3.1.7:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.7.tgz#8cd2e01b26f7a3086cbc87271593fe921c62abda"
+  integrity sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    get-intrinsic "^1.2.1"
+    is-string "^1.0.7"
+
 array-union@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
@@ -3939,6 +3957,16 @@ array.prototype.flat@^1.2.3:
     es-abstract "^1.19.2"
     es-shim-unscopables "^1.0.0"
 
+array.prototype.flat@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18"
+  integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    es-shim-unscopables "^1.0.0"
+
 array.prototype.flatmap@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz#1aae7903c2100433cb8261cd4ed310aab5c4a183"
@@ -3949,6 +3977,16 @@ array.prototype.flatmap@^1.3.1:
     es-abstract "^1.20.4"
     es-shim-unscopables "^1.0.0"
 
+array.prototype.flatmap@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz#c9a7c6831db8e719d6ce639190146c24bbd3e527"
+  integrity sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    es-shim-unscopables "^1.0.0"
+
 array.prototype.foreach@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array.prototype.foreach/-/array.prototype.foreach-1.0.2.tgz#592b177c8d6abb84e14de1649eb6e7cc5eb9c9ae"
@@ -4036,6 +4074,11 @@ assign-symbols@^1.0.0:
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
   integrity sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==
 
+ast-types-flow@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.8.tgz#0a85e1c92695769ac13a428bb653e7538bea27d6"
+  integrity sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==
+
 astral-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
@@ -4133,6 +4176,11 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
+axe-core@=4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.0.tgz#34ba5a48a8b564f67e103f0aa5768d76e15bbbbf"
+  integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
+
 axios@^0.21.1:
   version "0.21.4"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
@@ -4149,6 +4197,13 @@ axios@^1.3.0:
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
+axobject-query@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.2.1.tgz#39c378a6e3b06ca679f29138151e45b2b32da62a"
+  integrity sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==
+  dependencies:
+    dequal "^2.0.3"
+
 babel-core@7.0.0-bridge.0:
   version "7.0.0-bridge.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
@@ -6830,6 +6885,11 @@ d3@^6.0.0:
     d3-transition "2"
     d3-zoom "2"
 
+damerau-levenshtein@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
+  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
+
 dargs@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/dargs/-/dargs-7.0.0.tgz#04015c41de0bcb69ec84050f3d9be0caf8d6d5cc"
@@ -7781,7 +7841,7 @@ es-get-iterator@^1.1.3:
     isarray "^2.0.5"
     stop-iteration-iterator "^1.0.0"
 
-es-iterator-helpers@^1.0.12:
+es-iterator-helpers@^1.0.12, es-iterator-helpers@^1.0.15:
   version "1.0.15"
   resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.15.tgz#bd81d275ac766431d19305923707c3efd9f1ae40"
   integrity sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==
@@ -7947,6 +8007,28 @@ eslint-plugin-jsdoc@^46.8.2:
     semver "^7.5.4"
     spdx-expression-parse "^3.0.1"
 
+eslint-plugin-jsx-a11y@^6.8.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.8.0.tgz#2fa9c701d44fcd722b7c771ec322432857fcbad2"
+  integrity sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+    aria-query "^5.3.0"
+    array-includes "^3.1.7"
+    array.prototype.flatmap "^1.3.2"
+    ast-types-flow "^0.0.8"
+    axe-core "=4.7.0"
+    axobject-query "^3.2.1"
+    damerau-levenshtein "^1.0.8"
+    emoji-regex "^9.2.2"
+    es-iterator-helpers "^1.0.15"
+    hasown "^2.0.0"
+    jsx-ast-utils "^3.3.5"
+    language-tags "^1.0.9"
+    minimatch "^3.1.2"
+    object.entries "^1.1.7"
+    object.fromentries "^2.0.7"
+
 eslint-plugin-prettier@3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.2.tgz#432e5a667666ab84ce72f945c72f77d996a5c9ba"
@@ -11578,6 +11660,16 @@ jsx-ast-utils@^2.1.0, jsx-ast-utils@^2.2.3:
     array-includes "^3.1.5"
     object.assign "^4.1.2"
 
+jsx-ast-utils@^3.3.5:
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
+  integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
+  dependencies:
+    array-includes "^3.1.6"
+    array.prototype.flat "^1.3.1"
+    object.assign "^4.1.4"
+    object.values "^1.1.6"
+
 juice@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/juice/-/juice-7.0.0.tgz#509bed6adbb6e4bbaa7fbfadac4e2e83e8c89ba3"
@@ -11628,6 +11720,18 @@ kleur@^3.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
+language-subtag-registry@^0.3.20:
+  version "0.3.22"
+  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
+  integrity sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==
+
+language-tags@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.9.tgz#1ffdcd0ec0fafb4b1be7f8b11f306ad0f9c08777"
+  integrity sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==
+  dependencies:
+    language-subtag-registry "^0.3.20"
+
 lcid@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
@@ -13294,6 +13398,15 @@ object.entries@^1.1.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
+object.entries@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.7.tgz#2b47760e2a2e3a752f39dd874655c61a7f03c131"
+  integrity sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+
 object.fromentries@^2.0.0, object.fromentries@^2.0.2:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.5.tgz#7b37b205109c21e741e605727fe8b0ad5fa08251"
@@ -13303,7 +13416,7 @@ object.fromentries@^2.0.0, object.fromentries@^2.0.2:
     define-properties "^1.1.3"
     es-abstract "^1.19.1"
 
-object.fromentries@^2.0.5:
+object.fromentries@^2.0.5, object.fromentries@^2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.7.tgz#71e95f441e9a0ea6baf682ecaaf37fa2a8d7e616"
   integrity sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==
@@ -15245,6 +15358,11 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
+  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+
 regenerator-transform@^0.15.0:
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537"