diff --git a/src/components/Action/ActionModal/ActionModal.tsx b/src/components/Action/ActionModal/ActionModal.tsx
index 8cd832e88df0deb8dbaf0598c1f83e2fbe282f69..a83e38729b8f5e59aea7609ef84905e16e5abfa0 100644
--- a/src/components/Action/ActionModal/ActionModal.tsx
+++ b/src/components/Action/ActionModal/ActionModal.tsx
@@ -1,9 +1,9 @@
import Button from '@material-ui/core/Button'
import Dialog from '@material-ui/core/Dialog'
import chronoMini from 'assets/icons/visu/action/chrono-mini.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import { UserChallengeUpdateFlag } from 'enums'
import { Ecogesture, UserChallenge } from 'models'
import React, { useCallback } from 'react'
@@ -54,7 +54,7 @@ const ActionModal = ({
{t('action_modal.accessibility.window_title')}
</div>
<div className="action-modal">
- <Icon icon={chronoMini} size={75} />
+ <StyledIcon icon={chronoMini} size={75} />
<div className="action-title text-16-normal">
{t('action.duration', {
smartCount: action.actionDuration,
diff --git a/src/components/Action/ActionModal/__snapshots__/ActionModal.spec.tsx.snap b/src/components/Action/ActionModal/__snapshots__/ActionModal.spec.tsx.snap
index 2825edc3a9a03ccf4537cc5e822eafeab09ec7d3..fb6e52597e2479213b713a43fa9883b8e8f7719c 100644
--- a/src/components/Action/ActionModal/__snapshots__/ActionModal.spec.tsx.snap
+++ b/src/components/Action/ActionModal/__snapshots__/ActionModal.spec.tsx.snap
@@ -41,6 +41,7 @@ exports[`ActionModal component should render correctly 1`] = `
class="action-modal"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="75"
width="75"
diff --git a/src/components/Analysis/Comparison/TemperatureComparisonModal/TemperatureComparisonModal.tsx b/src/components/Analysis/Comparison/TemperatureComparisonModal/TemperatureComparisonModal.tsx
index b165c9936433fcd09c2a469195455cd29b56b0cb..8af212cf8247cdd7e075f114971c999eae0d6659 100644
--- a/src/components/Analysis/Comparison/TemperatureComparisonModal/TemperatureComparisonModal.tsx
+++ b/src/components/Analysis/Comparison/TemperatureComparisonModal/TemperatureComparisonModal.tsx
@@ -1,8 +1,8 @@
import { IconButton } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.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 { useAppSelector } from 'store/hooks'
import './temperatureComparisonModal.scss'
@@ -35,7 +35,7 @@ const TemperatureComparisonModal = ({
className="modal-paper-close-button"
onClick={handleCloseClick}
>
- <Icon icon={CloseIcon} size={18} />
+ <StyledIcon icon={CloseIcon} size={18} />
</IconButton>
<div className="content">
<div className="text-20-bold subtitle">
diff --git a/src/components/Analysis/Comparison/TemperatureComparisonModal/__snapshots__/TemperatureComparisonModal.spec.tsx.snap b/src/components/Analysis/Comparison/TemperatureComparisonModal/__snapshots__/TemperatureComparisonModal.spec.tsx.snap
index 19f0c60c854b994a7206326d40398cf10636f3bd..ae38608769b3585d68ab1cbec8cc1f5769fcbafb 100644
--- a/src/components/Analysis/Comparison/TemperatureComparisonModal/__snapshots__/TemperatureComparisonModal.spec.tsx.snap
+++ b/src/components/Analysis/Comparison/TemperatureComparisonModal/__snapshots__/TemperatureComparisonModal.spec.tsx.snap
@@ -45,6 +45,7 @@ exports[`TemperatureComparisonModal component should be rendered correctly 1`] =
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="18"
width="18"
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
index a7ee2e698aca2fb1a4d95601ccd9bd5da5993c85..df794055777db3ac100a5c6b6a4b95419a20f492 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
@@ -5,10 +5,10 @@ import MaxPowerIcon from 'assets/icons/ico/maxPower.svg'
import MinIcon from 'assets/icons/ico/minimum.svg'
import OffPeakHourIcon from 'assets/icons/ico/offPeakHour.svg'
import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import { FluidType, TimeStep } from 'enums'
import {
AggregatedEnedisMonthlyDataloads,
@@ -152,7 +152,7 @@ const ElecHalfHourMonthlyAnalysis = ({
return (
<div className="special-elec-container">
- <Icon
+ <StyledIcon
className="elec-icon"
icon={getNavPicto(FluidType.ELECTRICITY, true, true)}
size={42}
@@ -171,7 +171,7 @@ const ElecHalfHourMonthlyAnalysis = ({
onClick={() => setIsWeekend(prev => !prev)}
className="arrow-prev"
>
- <Icon icon={LeftArrowIcon} size={24} />
+ <StyledIcon icon={LeftArrowIcon} size={24} />
</IconButton>
<div className="average text-18-normal">
<div className="text-1">{t('special_elec.average')}</div>
@@ -189,7 +189,7 @@ const ElecHalfHourMonthlyAnalysis = ({
onClick={() => setIsWeekend(prev => !prev)}
className="arrow-next"
>
- <Icon icon={RightArrowIcon} size={24} />
+ <StyledIcon icon={RightArrowIcon} size={24} />
</IconButton>
</div>
{isLoading && <Loader color="elec" />}
@@ -199,7 +199,11 @@ const ElecHalfHourMonthlyAnalysis = ({
{enedisAnalysisValues && isDataFullyComplete(monthDataloads) && (
<div className="min-max">
<div className="container">
- <Icon icon={MaxPowerIcon} size={40} className="minIcon" />
+ <StyledIcon
+ icon={MaxPowerIcon}
+ size={40}
+ className="minIcon"
+ />
<div className="text">
<div className="min text-18-normal">
{t('special_elec.maxPower')}
@@ -219,7 +223,7 @@ const ElecHalfHourMonthlyAnalysis = ({
</div>
{enedisAnalysisValues?.offPeakHoursRatio != null && (
<div className="container">
- <Icon
+ <StyledIcon
icon={OffPeakHourIcon}
size={40}
className="minIcon"
@@ -240,7 +244,7 @@ const ElecHalfHourMonthlyAnalysis = ({
</div>
)}
<div className="container consomin">
- <Icon icon={MinIcon} size={40} className="minIcon" />
+ <StyledIcon icon={MinIcon} size={40} className="minIcon" />
<div className="text text-18-normal">
<div>{t('special_elec.min')}</div>
<div>{t('special_elec.percentage')}</div>
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.tsx
index f755d44ae425545eb0761e878cf378e08c022956..aacab412de73445d79691f9a7537753249bedeba 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.tsx
@@ -1,8 +1,8 @@
import { IconButton } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.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 {
OffPeakHours,
@@ -46,7 +46,7 @@ const ElecInfoModal = ({
className="modal-paper-close-button"
onClick={handleCloseClick}
>
- <Icon icon={CloseIcon} size={16} />
+ <StyledIcon icon={CloseIcon} />
</IconButton>
<div className="elecInfoModal">
<div className="title text-18-bold">
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
index 6e75e12edacb1b00e73a65b3de0d3f7be8b0684e..fdd25bb41103a0e031ea62934c9f3501a7623401 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
@@ -6,6 +6,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
class="special-elec-container"
>
<svg
+ aria-hidden="true"
class="elec-icon styles__icon___23x3R"
height="42"
width="42"
@@ -34,6 +35,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
class="special-elec-container"
>
<svg
+ aria-hidden="true"
class="elec-icon styles__icon___23x3R"
height="42"
width="42"
@@ -60,6 +62,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="24"
width="24"
@@ -100,6 +103,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="24"
width="24"
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
index 940eea0eba67e229302d406768073180e0ad6356..8de384b77ddb9029ac0b808979db62710bbf9887 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`ElecInfoModal component should be rendered correctly with off-peak hour
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="16"
width="16"
@@ -150,6 +151,7 @@ exports[`ElecInfoModal component should be rendered correctly without off-peak h
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="16"
width="16"
diff --git a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx
index 9e2888a8f34279e83dc0c89c0f551fa99772af18..7f6c5ac988272b1a8b89dae18f8824efe27e3bd8 100644
--- a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx
+++ b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx
@@ -9,7 +9,6 @@ import { useChartResize } from 'components/Hooks/useChartResize'
import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import { DataloadSectionType, FluidType, TimeStep } from 'enums'
import { Datachart, Dataload, TimePeriod } from 'models'
import React, { useEffect, useRef, useState } from 'react'
@@ -108,7 +107,7 @@ const MaxConsumptionCard = ({
className="arrow-prev"
disabled={fluidsWithData.length <= 1}
>
- <Icon icon={LeftArrowIcon} size={24} />
+ <StyledIcon icon={LeftArrowIcon} size={24} />
</IconButton>
)
@@ -119,7 +118,7 @@ const MaxConsumptionCard = ({
className="arrow-next"
disabled={fluidsWithData.length <= 1}
>
- <Icon icon={RightArrowIcon} size={24} />
+ <StyledIcon icon={RightArrowIcon} size={24} />
</IconButton>
)
diff --git a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
index 91030a58f917c22d05e9efbdecb62d6fb6013d9d..149368eae983d04f78500600f02677a6077d6968 100644
--- a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
+++ b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
@@ -33,6 +33,7 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="24"
width="24"
@@ -61,6 +62,7 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="24"
width="24"
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparator.tsx b/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
index 7d47de9357fff633118e6f44709511dcd3e4ec8e..aced331fa856ba0eb65f9131dbd911e916bab940 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
+++ b/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
@@ -12,7 +12,6 @@ import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import { FluidType } from 'enums'
import { MonthlyForecast, PerformanceIndicator } from 'models'
import React, { useCallback, useEffect, useState } from 'react'
@@ -145,12 +144,7 @@ const ProfileComparator = ({
>
{t('analysis.accessibility.button_go_to_profil')}
</Button>
- <Icon
- icon={PlaceHolderIcon}
- width="100%"
- height="60%"
- alt="pas de profil remplis"
- />
+ <StyledIcon icon={PlaceHolderIcon} width="100%" height="60%" />
</div>
)
@@ -216,7 +210,7 @@ const ProfileComparator = ({
'profile_type.accessibility.button_toggle_average_home'
)}
expandIcon={
- <Icon icon={chevronDown} size={16} className="accordion-icon" />
+ <StyledIcon icon={chevronDown} className="accordion-icon" />
}
classes={{
root: 'expansion-panel-summary',
diff --git a/src/components/Analysis/ProfileComparator/__snapshots__/ProfileComparator.spec.tsx.snap b/src/components/Analysis/ProfileComparator/__snapshots__/ProfileComparator.spec.tsx.snap
index d8f55b5d76daba303eb8ad7431f5b22168d4eab0..ec5c29db91c2ef279614c9ceef7838977dbdb46a 100644
--- a/src/components/Analysis/ProfileComparator/__snapshots__/ProfileComparator.spec.tsx.snap
+++ b/src/components/Analysis/ProfileComparator/__snapshots__/ProfileComparator.spec.tsx.snap
@@ -48,7 +48,7 @@ exports[`AnalysisConsumption component should be rendered correctly with profile
/>
</button>
<svg
- alt="pas de profil remplis"
+ aria-hidden="true"
class="styles__icon___23x3R"
height="60%"
width="100%"
@@ -186,6 +186,7 @@ exports[`AnalysisConsumption component should be rendered correctly with profile
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="accordion-icon styles__icon___23x3R"
height="16"
width="16"
diff --git a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
index f50fee73138e27b1b7d7e6892ff928add7a50ee3..806862bd4985d13ef36d17deda7441a1bdd11121 100644
--- a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
+++ b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
@@ -1,9 +1,9 @@
import { Button } from '@material-ui/core'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import EstimatedConsumptionModal from 'components/ConsumptionVisualizer/EstimatedConsumptionModal'
import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import { FluidType, TimeStep } from 'enums'
import { DataloadValueDetail, TimePeriod } from 'models'
import React, { useEffect, useState } from 'react'
@@ -121,15 +121,19 @@ const TotalAnalysisChart = ({
handleCloseClick={() => setOpenEstimationModal(false)}
/>
{dataLoadValueDetailArray && fluidsWithData.length > 1 && (
- <div className="total-card-container">
+ <div
+ role="list"
+ aria-label={t('analysis_pie.details')}
+ className="total-card-container"
+ >
{dataLoadValueDetailArray.map((dataload, index) => (
- <div key={index} className="total-card">
+ <div key={index} role="listitem" className="total-card">
<div className="text-18-bold fluidconso">
{dataload.value !== -1
? `${formatNumberValues(dataload.value)} €`
: '--- €'}
</div>
- <Icon
+ <StyledIcon
className="euro-fluid-icon"
icon={getNavPicto(index, true, true)}
size={38}
diff --git a/src/components/CommonKit/Icon/StyledIcon.tsx b/src/components/CommonKit/Icon/StyledIcon.tsx
index d555270c0ca2f6ee2283e07f741a8788927edcad..13833b2ebdbf09d22bbf4fbf5432038ee7fccbc5 100644
--- a/src/components/CommonKit/Icon/StyledIcon.tsx
+++ b/src/components/CommonKit/Icon/StyledIcon.tsx
@@ -8,6 +8,8 @@ interface StyledIconProps {
size?: number
role?: string
title?: string
+ width?: string
+ height?: string
}
const StyledIcon = ({
diff --git a/src/components/Connection/EPGLConnect/EpglConnectModal/EpglConnectModal.tsx b/src/components/Connection/EPGLConnect/EpglConnectModal/EpglConnectModal.tsx
index 3638cc07d8486793bf1d00b9054ed67a6b7ba377..24c1d3ea9f7fcd3f5dcaa02fbcf10c61be2baffb 100644
--- a/src/components/Connection/EPGLConnect/EpglConnectModal/EpglConnectModal.tsx
+++ b/src/components/Connection/EPGLConnect/EpglConnectModal/EpglConnectModal.tsx
@@ -1,7 +1,7 @@
import { Button, Dialog, IconButton } from '@material-ui/core'
import CloseIcon from 'assets/icons/ico/close.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 { FluidType } from 'enums'
import React, { useState } from 'react'
import { useAppSelector } from 'store/hooks'
@@ -109,7 +109,7 @@ const EpglConnectModal = ({
className="modal-paper-close-button"
onClick={handleCloseModal}
>
- <Icon icon={CloseIcon} size={16} />
+ <StyledIcon icon={CloseIcon} />
</IconButton>
<div className="partners-connection-step-content">
{steps[currentStep].content}
diff --git a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx
index 577a4932ce4f5f05cf82611e0f7622d8e6992f49..9752a993660269c93b1bf0507f6bae1ff42b5fc3 100644
--- a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx
+++ b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx
@@ -3,8 +3,8 @@ import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.svg'
import EnedisIcon from 'assets/icons/ico/consent-outdated-enedis.svg'
import GrdfIcon from 'assets/icons/ico/consent-outdated-grdf.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 { FluidType } from 'enums'
import { AccountSgeData } from 'models'
import React, { useCallback } from 'react'
@@ -74,18 +74,18 @@ const ExpiredConsentModal = ({
}}
>
<div id="accessibility-title">
- {t('consumption_visualizer.modal.window_title')}
+ {t('consent_outdated.accessibility.window_title')}
</div>
<IconButton
- aria-label={t('consumption_visualizer.modal.close')}
+ aria-label={t('consent_outdated.accessibility.button_close')}
className="modal-paper-close-button"
onClick={toggleModal}
>
- <Icon icon={CloseIcon} size={16} />
+ <StyledIcon icon={CloseIcon} />
</IconButton>
<div className="expired-consent-modal">
<div className="icon-main">
- <Icon
+ <StyledIcon
icon={fluidType === FluidType.ELECTRICITY ? EnedisIcon : GrdfIcon}
size={135}
/>
diff --git a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
index bc66bb1e283bd4a9e6c9812c6648c9ebed507686..83702bba20fe80bfae05ce21739775e02cce36fc 100644
--- a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
+++ b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
@@ -35,10 +35,10 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
<div
id="accessibility-title"
>
- consumption_visualizer.modal.window_title
+ consent_outdated.accessibility.window_title
</div>
<button
- aria-label="consumption_visualizer.modal.close"
+ aria-label="consent_outdated.accessibility.button_close"
class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
@@ -47,6 +47,7 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="16"
width="16"
@@ -67,6 +68,7 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
class="icon-main"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="135"
width="135"
diff --git a/src/components/Connection/GRDFConnect/GrdfModalHint.tsx b/src/components/Connection/GRDFConnect/GrdfModalHint.tsx
index c015a99bd03ed0331699bd7cd8a0b081d72b72c8..1c92e3150532261ae0598777ec5bc5bb32046ec1 100644
--- a/src/components/Connection/GRDFConnect/GrdfModalHint.tsx
+++ b/src/components/Connection/GRDFConnect/GrdfModalHint.tsx
@@ -3,8 +3,8 @@ import Button from '@material-ui/core/Button'
import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.svg'
import GasBill from 'assets/icons/visu/onboarding/gas_bill.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'
const GrdfModalHint = ({
@@ -35,7 +35,7 @@ const GrdfModalHint = ({
className="modal-paper-close-button"
onClick={handleCloseClick}
>
- <Icon icon={CloseIcon} size={16} />
+ <StyledIcon icon={CloseIcon} />
</IconButton>
<div className="hintModal">
<h1 className="text-20-bold">
@@ -43,7 +43,7 @@ const GrdfModalHint = ({
</h1>
<div className="content">
<div className="bill grdf">
- <Icon icon={GasBill} alt="Facture" className="bill" size={180} />
+ <StyledIcon icon={GasBill} className="bill" size={180} />
</div>
<p
className="grdfText"
diff --git a/src/components/Connection/SGEConnect/SgeModalHint.tsx b/src/components/Connection/SGEConnect/SgeModalHint.tsx
index 5b68e0d94d2b0298ed34a3e4ecb23348568b8daa..9ccb96aa5d3d55b45d4ea76538702b2d926b2f33 100644
--- a/src/components/Connection/SGEConnect/SgeModalHint.tsx
+++ b/src/components/Connection/SGEConnect/SgeModalHint.tsx
@@ -4,8 +4,8 @@ import Dialog from '@material-ui/core/Dialog'
import Bill from 'assets/icons/ico/bill.svg'
import CloseIcon from 'assets/icons/ico/close.svg'
import Prm from 'assets/icons/ico/prm.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'
interface SgeModalHintProps {
@@ -35,7 +35,7 @@ const SgeModalHint = ({ open, handleCloseClick }: SgeModalHintProps) => {
className="modal-paper-close-button"
onClick={handleCloseClick}
>
- <Icon icon={CloseIcon} size={16} />
+ <StyledIcon icon={CloseIcon} />
</IconButton>
<div className="hintModal">
<h1 className="text-20-bold">
@@ -45,15 +45,16 @@ const SgeModalHint = ({ open, handleCloseClick }: SgeModalHintProps) => {
<p>{t('auth.enedissgegrandlyon.pdlModal.txt1')}</p>
<p>{t('auth.enedissgegrandlyon.pdlModal.txt2')}</p>
<div className="bill">
- <Icon icon={Bill} alt="" size={52} />
+ <StyledIcon icon={Bill} size={52} />
<p className="text-16-bold">
{t('auth.enedissgegrandlyon.pdlModal.txt3')}
</p>
</div>
<p>{t('auth.enedissgegrandlyon.pdlModal.txt4')}</p>
- <Icon
+ <StyledIcon
icon={Prm}
- alt={t('auth.enedissgegrandlyon.pdlModal.prm_accessibility')}
+ ariaHidden={false}
+ aria-label={t('auth.enedissgegrandlyon.pdlModal.prm_accessibility')}
className="prm"
/>
<Button
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index c85b19e81cf96446df12945e56aa0af47befa3f5..b21dc1e1f42942e57305eb2fab89e2e348c72bf3 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -33,6 +33,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="40"
width="40"
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
index b9ab5c3f9dc4a7569fdc89d10fdbddcf246c804b..45adc444c765eeb371a0d11a51c3f8dbcf0be75d 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`SgeModalHint component should be rendered correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="16"
width="16"
@@ -81,7 +82,7 @@ exports[`SgeModalHint component should be rendered correctly 1`] = `
class="bill"
>
<svg
- alt=""
+ aria-hidden="true"
class="styles__icon___23x3R"
height="52"
width="52"
@@ -100,7 +101,8 @@ exports[`SgeModalHint component should be rendered correctly 1`] = `
auth.enedissgegrandlyon.pdlModal.txt4
</p>
<svg
- alt="auth.enedissgegrandlyon.pdlModal.prm_accessibility"
+ aria-hidden="false"
+ aria-label="auth.enedissgegrandlyon.pdlModal.prm_accessibility"
class="prm styles__icon___23x3R"
height="16"
width="16"
diff --git a/src/components/Consumption/FluidButtons/FluidButton.tsx b/src/components/Consumption/FluidButtons/FluidButton.tsx
index cd08a99446f0f896133baeb5191830565b1f7c07..54706835c22e88f05bb42a386bef59dda704c527 100644
--- a/src/components/Consumption/FluidButtons/FluidButton.tsx
+++ b/src/components/Consumption/FluidButtons/FluidButton.tsx
@@ -56,7 +56,11 @@ const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
}, [fluidStatus, fluidType, isConnected, isErrored, isMulti])
return (
- <IconButton className="fluid-title fluid-button" onClick={goToFluid}>
+ <IconButton
+ role="tab"
+ className="fluid-title fluid-button"
+ onClick={goToFluid}
+ >
<StyledIcon
className="fluid-icon"
icon={iconType}
diff --git a/src/components/Consumption/FluidButtons/FluidButtons.tsx b/src/components/Consumption/FluidButtons/FluidButtons.tsx
index 09ec44d26b5e6364eb28d3d8ab7de5ae5aa38d18..3e96dfd190a367ec8a9d59848473c29bbdc29040 100644
--- a/src/components/Consumption/FluidButtons/FluidButtons.tsx
+++ b/src/components/Consumption/FluidButtons/FluidButtons.tsx
@@ -1,9 +1,12 @@
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidType } from 'enums'
import React from 'react'
import FluidButton from './FluidButton'
import './fluidButtons.scss'
const FluidButtons = ({ activeFluid }: { activeFluid: FluidType }) => {
+ const { t } = useI18n()
+
const orderedFluids = [
FluidType.MULTIFLUID,
FluidType.ELECTRICITY,
@@ -12,7 +15,11 @@ const FluidButtons = ({ activeFluid }: { activeFluid: FluidType }) => {
]
return (
- <div className="fluid-buttons">
+ <div
+ role="tablist"
+ aria-label={t('consumption.accessibility.fluid_menu')}
+ className="fluid-buttons"
+ >
<div className="content">
{orderedFluids.map(fluid => (
<FluidButton
diff --git a/src/components/Consumption/FluidButtons/__snapshots__/FluidButton.spec.tsx.snap b/src/components/Consumption/FluidButtons/__snapshots__/FluidButton.spec.tsx.snap
index 8c24c5c5e4a9ee60a15420631cef7af09d6dfdd7..e4ba36dde0be8b2b2e7604548c42f6d7f1359c81 100644
--- a/src/components/Consumption/FluidButtons/__snapshots__/FluidButton.spec.tsx.snap
+++ b/src/components/Consumption/FluidButtons/__snapshots__/FluidButton.spec.tsx.snap
@@ -4,6 +4,7 @@ exports[`FluidButton component should be rendered correctly 1`] = `
<div>
<button
class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button"
+ role="tab"
tabindex="0"
type="button"
>
diff --git a/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap b/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap
index 271a057e4ab171d41a738c46816f606037038603..0a7e3429f9c88c29f61fd0f25fd686b7e63bc566 100644
--- a/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap
+++ b/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap
@@ -3,13 +3,16 @@
exports[`FluidButtons component should be rendered correctly 1`] = `
<div>
<div
+ aria-label="consumption.accessibility.fluid_menu"
class="fluid-buttons"
+ role="tablist"
>
<div
class="content"
>
<button
class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button"
+ role="tab"
tabindex="0"
type="button"
>
@@ -38,6 +41,7 @@ exports[`FluidButtons component should be rendered correctly 1`] = `
</button>
<button
class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button"
+ role="tab"
tabindex="0"
type="button"
>
@@ -66,6 +70,7 @@ exports[`FluidButtons component should be rendered correctly 1`] = `
</button>
<button
class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button"
+ role="tab"
tabindex="0"
type="button"
>
@@ -94,6 +99,7 @@ exports[`FluidButtons component should be rendered correctly 1`] = `
</button>
<button
class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button"
+ role="tab"
tabindex="0"
type="button"
>
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
index b16a11c999c779d482b909339e28b9ca433f5b92..5b09024b1f76464f68645f25f8df2de51fb0e07c 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
@@ -1,6 +1,6 @@
import classNames from 'classnames'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import { DataloadSectionType, DataloadState, FluidType } from 'enums'
import { Dataload } from 'models'
import React from 'react'
@@ -53,7 +53,7 @@ const DataloadSectionDetail = ({
if (isMulti && isCompare && dataload.valueDetail) {
return (
- <div className="dataloadvisualizer-euro text-16-normal">
+ <div role="group" className="dataloadvisualizer-euro text-16-normal">
{dataload.valueDetail.map((value, index) => {
const isValid = value.state === DataloadState.VALID
const isUpcoming = value.state === DataloadState.UPCOMING
@@ -64,6 +64,7 @@ const DataloadSectionDetail = ({
return (
<NavLink
key={FluidType[index]}
+ aria-label={t(`consumption_visualizer.cost_per_fluid.${index}`)}
to={`/consumption/${FluidType[index].toLowerCase()}`}
className="dataloadvisualizer-euro-link"
>
@@ -74,7 +75,7 @@ const DataloadSectionDetail = ({
error: isMissing,
})}
>
- <Icon
+ <StyledIcon
className="dataloadvisualizer-euro-fluid-icon"
icon={getNavPicto(index, true, true)}
size={22}
@@ -103,7 +104,7 @@ const DataloadSectionDetail = ({
<div
className={`dataloadvisualizer-euro-fluid ${getFluidName(fluidType)}`}
>
- <Icon
+ <StyledIcon
className="dataloadvisualizer-euro-fluid-icon"
icon={getNavPicto(fluidType, true, true)}
size={22}
diff --git a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
index a2dfa28b7ca4cf69670b7d9a251cce79fb29e23d..2069ea38cf66a53bbfb7bb9d6fa51fe797001a67 100644
--- a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
+++ b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
@@ -1,9 +1,9 @@
import { IconButton } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import { FluidType } from 'enums'
import { DateTime } from 'luxon'
import { FluidPrice } from 'models'
@@ -58,7 +58,7 @@ const EstimatedConsumptionModal = ({
className="modal-paper-close-button"
onClick={handleCloseClick}
>
- <Icon icon={CloseIcon} size={16} />
+ <StyledIcon icon={CloseIcon} />
</IconButton>
<div className="estimation-modal">
<div className="text-20-normal modal-title">
diff --git a/src/components/ConsumptionVisualizer/NoDataModal.tsx b/src/components/ConsumptionVisualizer/NoDataModal.tsx
index 8462aa25dbfde8220f91859007fa9c8b8dc50d33..ecc4ef5c71aae8c5795c9e273f93c39f11255ba5 100644
--- a/src/components/ConsumptionVisualizer/NoDataModal.tsx
+++ b/src/components/ConsumptionVisualizer/NoDataModal.tsx
@@ -2,8 +2,8 @@ import { Button, IconButton } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.svg'
import QuestionIcon from 'assets/icons/ico/questionMark.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 './noDataModal.scss'
@@ -33,11 +33,11 @@ const NoDataModal = ({ open, handleCloseClick }: NoDataModalProps) => {
className="modal-paper-close-button"
onClick={handleCloseClick}
>
- <Icon icon={CloseIcon} size={16} />
+ <StyledIcon icon={CloseIcon} />
</IconButton>
<div className="nodata-modal">
<div className="question-mark">
- <Icon icon={QuestionIcon} size={36} />
+ <StyledIcon icon={QuestionIcon} size={36} />
</div>
<div className="text-20-normal title">
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
index c864e8304fa7049b021cf603cdf0f491e8f1e608..6f79fffa991e5ea667f6ee2a4e58f20c728a0f76 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`EstimatedConsumptionModal component should render correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="16"
width="16"
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
index 971b2e6f4b797334794ace1f0a9db07b5491ff43..753eef53ce87b13759e63d2707cbd7ac01240b67 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`NoDataModal component should render correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="16"
width="16"
@@ -67,6 +68,7 @@ exports[`NoDataModal component should render correctly 1`] = `
class="question-mark"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="36"
width="36"
diff --git a/src/components/CustomPopup/CustomPopupModal.tsx b/src/components/CustomPopup/CustomPopupModal.tsx
index 189e1d290e39dc2775682d56692158f51c020caf..ff68a7c126400c2d4828a13a3b61dae8270f2378 100644
--- a/src/components/CustomPopup/CustomPopupModal.tsx
+++ b/src/components/CustomPopup/CustomPopupModal.tsx
@@ -5,7 +5,6 @@ import CloseIcon from 'assets/icons/ico/close.svg'
import DefaultIcon from 'assets/icons/visu/ecogesture/bullhorn.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 { DateTime } from 'luxon'
import { CustomPopup } from 'models'
import React, { useEffect, useState } from 'react'
@@ -53,7 +52,7 @@ const CustomPopupModal = ({
className="modal-paper-close-button"
onClick={handleCloseClick}
>
- <Icon icon={CloseIcon} size={16} />
+ <StyledIcon icon={CloseIcon} />
</IconButton>
<div className="customPopupModal">
<StyledIcon icon={icon} size={100} role="img" ariaHidden={false} />
diff --git a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
index eaf9112489058b5343173335bd0e8254e9578380..8acb6fa60c9f0515e2a047484a4f323125a61f8a 100644
--- a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
+++ b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`CustomPopupModal component should render correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="16"
width="16"
diff --git a/src/components/DateNavigator/DateNavigator.tsx b/src/components/DateNavigator/DateNavigator.tsx
index b23c9ae51343a0ac6a33044c08da0fb791ecab24..f64619d3771321f5f4440e9fc54bd6bb6d88fc9d 100644
--- a/src/components/DateNavigator/DateNavigator.tsx
+++ b/src/components/DateNavigator/DateNavigator.tsx
@@ -2,9 +2,9 @@ import IconButton from '@material-ui/core/IconButton'
import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
import classNames from 'classnames'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import DateNavigatorFormat from 'components/DateNavigator/DateNavigatorFormat'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import { TimeStep } from 'enums'
import { DateTime } from 'luxon'
import React from 'react'
@@ -32,7 +32,11 @@ const DateNavigator = ({
const { t } = useI18n()
return (
- <div className="date-navigator">
+ <div
+ role="group"
+ aria-label={t('consumption.accessibility.navigation_group')}
+ className="date-navigator"
+ >
<IconButton
disabled={disablePrev}
onClick={handlePrevDate}
@@ -41,7 +45,7 @@ const DateNavigator = ({
})}
aria-label={t('consumption.accessibility.button_previous_value')}
>
- <Icon icon={LeftArrowIcon} size={16} />
+ <StyledIcon icon={LeftArrowIcon} />
</IconButton>
<DateNavigatorFormat
timeStep={timeStep}
@@ -56,7 +60,7 @@ const DateNavigator = ({
})}
aria-label={t('consumption.accessibility.button_next_value')}
>
- <Icon icon={RightArrowIcon} size={16} />
+ <StyledIcon icon={RightArrowIcon} />
</IconButton>
</div>
)
diff --git a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
index aef335f2e5a5c2279374f2c02a5e1c608975850e..c23b70fc7cbef65c5a66bb67a96501e7df84b8a4 100644
--- a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
+++ b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
@@ -3,7 +3,9 @@
exports[`DateNavigator component should be rendered correctly 1`] = `
<div>
<div
+ aria-label="consumption.accessibility.navigation_group"
class="date-navigator"
+ role="group"
>
<button
aria-label="consumption.accessibility.button_previous_value"
@@ -15,6 +17,7 @@ exports[`DateNavigator component should be rendered correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="16"
width="16"
@@ -43,6 +46,7 @@ exports[`DateNavigator component should be rendered correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="16"
width="16"
diff --git a/src/components/Duel/DuelEmptyValueModal/DuelEmptyValueModal.tsx b/src/components/Duel/DuelEmptyValueModal/DuelEmptyValueModal.tsx
index dd86dc0108170aad9557cd376125248668685ba5..a767c6df0d94155dad20179f715de93f273c44bb 100644
--- a/src/components/Duel/DuelEmptyValueModal/DuelEmptyValueModal.tsx
+++ b/src/components/Duel/DuelEmptyValueModal/DuelEmptyValueModal.tsx
@@ -1,8 +1,8 @@
import Button from '@material-ui/core/Button'
import Dialog from '@material-ui/core/Dialog'
import defaultIcon from 'assets/icons/visu/duelResult/default.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, { useEffect, useState } from 'react'
import { importIconById } from 'utils/utils'
import './duelEmptyValueModal.scss'
@@ -42,7 +42,7 @@ const DuelEmptyValueModal = ({
{t('duel_empty_value_modal.accessibility.window_title')}
</div>
<div className="modal-empty-value-root">
- <Icon className="imgResult" icon={emptyIcon} size={208} />
+ <StyledIcon className="imgResult" icon={emptyIcon} size={208} />
<div className="text-28-normal-uppercase modal-empty-value-title">
{t('duel_empty_value_modal.title')}
</div>
diff --git a/src/components/Duel/DuelResultModal/DuelResultModal.tsx b/src/components/Duel/DuelResultModal/DuelResultModal.tsx
index 7b23acb614d1cc6da4d9a060c55dc6fa2c60380b..a9435238da7bf93c255657c5ea5dd34f9c6c09fe 100644
--- a/src/components/Duel/DuelResultModal/DuelResultModal.tsx
+++ b/src/components/Duel/DuelResultModal/DuelResultModal.tsx
@@ -2,8 +2,8 @@ import Button from '@material-ui/core/Button'
import Dialog from '@material-ui/core/Dialog'
import challengeWon from 'assets/icons/visu/duelResult/challengeWon.svg'
import defaultIcon from 'assets/icons/visu/duelResult/default.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 { UserChallenge } from 'models'
import React, { useEffect, useState } from 'react'
import { formatNumberValues, importIconById } from 'utils/utils'
@@ -57,9 +57,13 @@ const DuelResultModal = ({
<div className="duel-result-modal-root">
<div className="imgResultContainer">
{win && (
- <Icon className="challengeWon" icon={challengeWon} size={300} />
+ <StyledIcon
+ className="challengeWon"
+ icon={challengeWon}
+ size={300}
+ />
)}
- <Icon
+ <StyledIcon
className="imgResult"
icon={win ? winIcon : lossIcon}
size={180}
diff --git a/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap b/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap
index aa23ded2d78cd0d202f78d5202ed92f1a4540c17..a310546601d98a120f2865f4685bde452348b1fc 100644
--- a/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap
+++ b/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap
@@ -44,6 +44,7 @@ exports[`DuelResultModal component should render correctly 1`] = `
class="imgResultContainer"
>
<svg
+ aria-hidden="true"
class="challengeWon styles__icon___23x3R"
height="300"
width="300"
@@ -53,6 +54,7 @@ exports[`DuelResultModal component should render correctly 1`] = `
/>
</svg>
<svg
+ aria-hidden="true"
class="imgResult styles__icon___23x3R"
height="180"
width="180"
diff --git a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
index 94080d04db0112ac94524c000602b89c7c440d93..5afe8274478c290b103db35dcbc42a60aa1a349f 100644
--- a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
+++ b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
@@ -49,6 +49,7 @@ exports[`lastDuelModal component should render correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="16"
width="16"
diff --git a/src/components/Duel/LastDuelModal/lastDuelModal.tsx b/src/components/Duel/LastDuelModal/lastDuelModal.tsx
index 2e13dfff83fa585f7aed4b97b0c1bc3cac8b84fd..6c1f64e304d51206949b51b48d18277c5b914856 100644
--- a/src/components/Duel/LastDuelModal/lastDuelModal.tsx
+++ b/src/components/Duel/LastDuelModal/lastDuelModal.tsx
@@ -4,7 +4,6 @@ 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'
@@ -32,7 +31,7 @@ const LastDuelModal = ({ open, handleCloseClick }: LastDuelModalProps) => {
className="modal-paper-close-button"
onClick={handleCloseClick}
>
- <Icon size={16} icon={CloseIcon} />
+ <StyledIcon icon={CloseIcon} />
</IconButton>
<StyledIcon className="icon" icon={star} size={48} />
<h1 className="text-28-bold">{t('last_duel_modal.title')}</h1>
diff --git a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx
index c62517b095dbc4323fcf56e47ac52ca1acdbf5cf..aa01d3e85f7e5679d33a09a2e72f082cbadc7286 100644
--- a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx
+++ b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx
@@ -1,8 +1,8 @@
import { Button, IconButton } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.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 { useNavigate } from 'react-router-dom'
import { useAppDispatch, useAppSelector } from 'store/hooks'
@@ -45,7 +45,7 @@ const EcogestureInitModal = () => {
className="modal-paper-close-button"
onClick={handleCloseEcogestureInitModal}
>
- <Icon icon={CloseIcon} size={16} />
+ <StyledIcon icon={CloseIcon} />
</IconButton>
<div className="eg-init-modal">
<div className="title text-20-bold">
diff --git a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
index e0eb858751c570042ded61b7df0222b2ce2fcb68..fe8934ae72f83779f722b352306d6d3dbee39f09 100644
--- a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="16"
width="16"
diff --git a/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
index ab7b5595c206e7bb4616f34ab170f7847df91e7c..00b2f61e79e9bb193c6b404a47b7b2a8269f3b46 100644
--- a/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
@@ -7,7 +7,6 @@ import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import useExploration from 'components/Hooks/useExploration'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import { Ecogesture } from 'models'
import React, { useEffect, useState } from 'react'
import { useAppSelector } from 'store/hooks'
@@ -71,7 +70,7 @@ const EcogestureModal = ({
className="modal-paper-close-button"
onClick={handleCloseClick}
>
- <Icon icon={CloseIcon} size={16} />
+ <StyledIcon icon={CloseIcon} />
</IconButton>
<div className="em-header text-14-normal-uppercase">
{isAction
diff --git a/src/components/Ecogesture/EcogestureResetModal/EcogestureResetModal.tsx b/src/components/Ecogesture/EcogestureResetModal/EcogestureResetModal.tsx
index afcbde8ffd0460edb97114e56e42aaf89a9d32e2..2ff0e0c33571289d8da4fdebad49984168ea59cf 100644
--- a/src/components/Ecogesture/EcogestureResetModal/EcogestureResetModal.tsx
+++ b/src/components/Ecogesture/EcogestureResetModal/EcogestureResetModal.tsx
@@ -2,8 +2,8 @@ import { Button, IconButton } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.svg'
import warningIcon from 'assets/icons/ico/warn-orange.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 './ecogestureResetModal.scss'
@@ -37,10 +37,10 @@ const EcogestureResetModal = ({
className="modal-paper-close-button"
onClick={closeEcogestureResetModal}
>
- <Icon icon={CloseIcon} size={16} />
+ <StyledIcon icon={CloseIcon} />
</IconButton>
<div className="eg-reset-modal">
- <Icon icon={warningIcon} size={63} />
+ <StyledIcon icon={warningIcon} size={63} />
<div className="title text-20-bold">
{t('ecogesture.resetModal.title_part1')}
<span className="warn-title">
diff --git a/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap b/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap
index caa340983c1c203a1cc98b04429ea1c045f13798..c8abe7ced9189873608f453a0f43e5606ce52035 100644
--- a/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`EcogestureResetModal component should be rendered correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="16"
width="16"
@@ -64,6 +65,7 @@ exports[`EcogestureResetModal component should be rendered correctly 1`] = `
class="eg-reset-modal"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="63"
width="63"
diff --git a/src/components/Ecogesture/SingleEcogestureView.tsx b/src/components/Ecogesture/SingleEcogestureView.tsx
index acfca4da2852650f4c91a9615febc42ba853c501..077faf8d5fec72da43606d17b8c54a9739085be5 100644
--- a/src/components/Ecogesture/SingleEcogestureView.tsx
+++ b/src/components/Ecogesture/SingleEcogestureView.tsx
@@ -15,7 +15,6 @@ import useExploration from 'components/Hooks/useExploration'
import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import { Ecogesture } from 'models'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { useParams } from 'react-router-dom'
@@ -176,7 +175,7 @@ const SingleEcogestureView = () => {
label: 'text-15-normal',
}}
>
- <Icon
+ <StyledIcon
className="status-icon"
icon={
isObjective ? objectiveEnabledIcon : objectiveDisabledIcon
@@ -193,7 +192,7 @@ const SingleEcogestureView = () => {
label: 'text-15-normal',
}}
>
- <Icon
+ <StyledIcon
className="status-icon"
icon={isDoing ? doingEnabledIcon : doingDisabledIcon}
size={40}
diff --git a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
index 77ad870acd7281bfdc6ba3d5eab82475144eed9f..059d02251fb883ddcbd96e53b40abcf77001a063 100644
--- a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
@@ -103,6 +103,7 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
class="MuiIconButton-label text-15-normal"
>
<svg
+ aria-hidden="true"
class="status-icon styles__icon___23x3R"
height="40"
width="40"
@@ -126,6 +127,7 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
class="MuiIconButton-label text-15-normal"
>
<svg
+ aria-hidden="true"
class="status-icon styles__icon___23x3R"
height="40"
width="40"
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
index 2ad4b9d739e95b24815f3f3201351459419d3683..716342473d720cc91fc9ac1f7f7078854e54a14e 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
@@ -34,9 +34,8 @@ describe('EcogestureFormEquipment component', () => {
</Provider>
)
await waitFor(() => null, { container })
- const equipments = screen.getAllByRole('button', {
- name: 'ecogesture_profile.equipments.accessible_label',
- })
+ const equipments = screen.getAllByRole('listitem')
+ console.log(equipments.length)
expect(equipments[0]).not.toBeDisabled()
expect(equipments.length).toBe(Object.keys(EquipmentType).length)
})
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx
index 01a1093e44da5603cbeb41e4b3d401b219801e5a..a2ca77412739be84286e6596712b9c953407e189 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx
@@ -86,14 +86,21 @@ const EcogestureFormEquipment = ({
].toLowerCase()}.hint`
)}
</div>
- <div className="icons-container">
+ <div
+ role="list"
+ aria-label={t('ecogesture_profile.equipments.accessible_label')}
+ className="icons-container"
+ >
{Object.values(EquipmentType).map(equipment => (
<IconButton
key={equipment}
style={{ borderRadius: '5px' }}
onClick={() => handleChange(equipment)}
className="checkbox-equipment"
- aria-label={t('ecogesture_profile.equipments.accessible_label')}
+ role="listitem"
+ aria-label={`${t(
+ `ecogesture_profile.equipments.${equipment.toLocaleLowerCase()}`
+ )}`}
>
<EquipmentIcon
equipment={equipment}
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap b/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
index 69febe91b1c98633b4b08d40e9cecfc9c52df63f..dec8909eb736b2c2810de3dc59dcccb8a9afefe7 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
@@ -19,11 +19,14 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
ecogesture_profile.equipments.hint
</div>
<div
+ aria-label="ecogesture_profile.equipments.accessible_label"
class="icons-container"
+ role="list"
>
<button
- aria-label="ecogesture_profile.equipments.accessible_label"
+ aria-label="ecogesture_profile.equipments.air_conditioning"
class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ role="listitem"
style="border-radius: 5px;"
tabindex="0"
type="button"
@@ -41,8 +44,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
/>
</button>
<button
- aria-label="ecogesture_profile.equipments.accessible_label"
+ aria-label="ecogesture_profile.equipments.computer"
class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ role="listitem"
style="border-radius: 5px;"
tabindex="0"
type="button"
@@ -60,8 +64,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
/>
</button>
<button
- aria-label="ecogesture_profile.equipments.accessible_label"
+ aria-label="ecogesture_profile.equipments.microwave"
class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ role="listitem"
style="border-radius: 5px;"
tabindex="0"
type="button"
@@ -79,8 +84,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
/>
</button>
<button
- aria-label="ecogesture_profile.equipments.accessible_label"
+ aria-label="ecogesture_profile.equipments.washing_machine"
class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ role="listitem"
style="border-radius: 5px;"
tabindex="0"
type="button"
@@ -98,8 +104,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
/>
</button>
<button
- aria-label="ecogesture_profile.equipments.accessible_label"
+ aria-label="ecogesture_profile.equipments.dishwasher"
class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ role="listitem"
style="border-radius: 5px;"
tabindex="0"
type="button"
@@ -117,8 +124,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
/>
</button>
<button
- aria-label="ecogesture_profile.equipments.accessible_label"
+ aria-label="ecogesture_profile.equipments.cooking_plates"
class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ role="listitem"
style="border-radius: 5px;"
tabindex="0"
type="button"
@@ -136,8 +144,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
/>
</button>
<button
- aria-label="ecogesture_profile.equipments.accessible_label"
+ aria-label="ecogesture_profile.equipments.dryer"
class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ role="listitem"
style="border-radius: 5px;"
tabindex="0"
type="button"
@@ -155,8 +164,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
/>
</button>
<button
- aria-label="ecogesture_profile.equipments.accessible_label"
+ aria-label="ecogesture_profile.equipments.refregirator"
class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ role="listitem"
style="border-radius: 5px;"
tabindex="0"
type="button"
@@ -174,8 +184,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
/>
</button>
<button
- aria-label="ecogesture_profile.equipments.accessible_label"
+ aria-label="ecogesture_profile.equipments.fan"
class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ role="listitem"
style="border-radius: 5px;"
tabindex="0"
type="button"
@@ -193,8 +204,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
/>
</button>
<button
- aria-label="ecogesture_profile.equipments.accessible_label"
+ aria-label="ecogesture_profile.equipments.curtain"
class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ role="listitem"
style="border-radius: 5px;"
tabindex="0"
type="button"
@@ -212,8 +224,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
/>
</button>
<button
- aria-label="ecogesture_profile.equipments.accessible_label"
+ aria-label="ecogesture_profile.equipments.internet_box"
class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ role="listitem"
style="border-radius: 5px;"
tabindex="0"
type="button"
@@ -231,8 +244,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
/>
</button>
<button
- aria-label="ecogesture_profile.equipments.accessible_label"
+ aria-label="ecogesture_profile.equipments.ventilation"
class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ role="listitem"
style="border-radius: 5px;"
tabindex="0"
type="button"
@@ -250,8 +264,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
/>
</button>
<button
- aria-label="ecogesture_profile.equipments.accessible_label"
+ aria-label="ecogesture_profile.equipments.freezer"
class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ role="listitem"
style="border-radius: 5px;"
tabindex="0"
type="button"
@@ -269,8 +284,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
/>
</button>
<button
- aria-label="ecogesture_profile.equipments.accessible_label"
+ aria-label="ecogesture_profile.equipments.boiler"
class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ role="listitem"
style="border-radius: 5px;"
tabindex="0"
type="button"
@@ -288,8 +304,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
/>
</button>
<button
- aria-label="ecogesture_profile.equipments.accessible_label"
+ aria-label="ecogesture_profile.equipments.hydraulic_heating"
class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ role="listitem"
style="border-radius: 5px;"
tabindex="0"
type="button"
@@ -307,8 +324,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
/>
</button>
<button
- aria-label="ecogesture_profile.equipments.accessible_label"
+ aria-label="ecogesture_profile.equipments.outside"
class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ role="listitem"
style="border-radius: 5px;"
tabindex="0"
type="button"
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.tsx b/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.tsx
index d9ddbbe6d223a910b9acf6d08a890948ec4131c2..cc4ae8a4b13ad8b38bdb591874f5bb0560d07b7a 100644
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.tsx
+++ b/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.tsx
@@ -1,8 +1,8 @@
import { Button, IconButton } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.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 './ecogestureLaunchFormModal.scss'
@@ -33,7 +33,7 @@ const EcogestureLaunchFormModal = ({
className="modal-paper-close-button"
onClick={handleCloseClick}
>
- <Icon icon={CloseIcon} size={16} />
+ <StyledIcon icon={CloseIcon} />
</IconButton>
<div className="eg-init-modal">
<div className="title text-20-bold">
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap b/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap
index 61719c7d1d9696ac0aaa3919968d039320d3cace..909100f52910a7e0d4c787e5e0dbe44333e35fb8 100644
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap
+++ b/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`EcogestureLaunchFormModal component should be rendered correctly 1`] =
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="16"
width="16"
diff --git a/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.tsx b/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.tsx
index 56dc1a35b33e229c35992cc3bb8ea8f627265a9e..332a188242ed1ecea7f7110d33c3d38405b0ded2 100644
--- a/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.tsx
+++ b/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.tsx
@@ -1,6 +1,6 @@
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import 'components/ProfileType/profileTypeForm.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import React, { useEffect, useState } from 'react'
import { importIconById } from 'utils/utils'
@@ -29,7 +29,7 @@ const EquipmentIcon = ({ equipment, isChecked }: EquipmentIconProps) => {
return (
<>
<div className={`equipment-icon-container ${isChecked ? 'checked' : ''}`}>
- <Icon icon={icon} size={40} className="equipmentIcon " />
+ <StyledIcon icon={icon} size={40} className="equipmentIcon " />
</div>
<div className="text text-14-normal">
{t(`ecogesture_profile.equipments.${equipment.toLocaleLowerCase()}`)}
diff --git a/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap b/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap
index 342bc0c025ce91c3e8d85b98639d66b4aea0bde0..e38e50f3629f8aaa3a02280600add623fefc133a 100644
--- a/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap
+++ b/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap
@@ -6,6 +6,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
class="equipment-icon-container "
>
<svg
+ aria-hidden="true"
class="equipmentIcon styles__icon___23x3R"
height="40"
width="40"
diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx b/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx
index b33c75ebb9b84f275d896bf0fd5cdaa407a47c08..85820ef3e436ed5346d01a3e3fd2df35e8faec9f 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx
@@ -1,8 +1,8 @@
import { Button, IconButton } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.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 './ecogestureSelectionModal.scss'
@@ -35,7 +35,7 @@ const EcogestureSelectionModal = ({
className="modal-paper-close-button"
onClick={handleCloseClick}
>
- <Icon icon={CloseIcon} size={16} />
+ <StyledIcon icon={CloseIcon} />
</IconButton>
<div className="eg-selection-modal">
<div className="title text-20-bold">
diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
index e51d81a0ecf1718cd6adf3bb6b96b7305fde85aa..685a14d59760ca9ce72259c98ea4be0c9d4c6604 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="16"
width="16"
diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
index c849c35f03e5894b5b33276b2374a18b97b603a9..efc91bcba324500f6f48aa5772a60112bd5f9705 100644
--- a/src/components/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -7,7 +7,6 @@ import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import useExploration from 'components/Hooks/useExploration'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import { UserExplorationID } from 'enums'
import React from 'react'
import { useAppDispatch, useAppSelector } from 'store/hooks'
@@ -50,7 +49,7 @@ const FeedbackModal = () => {
className="modal-paper-close-button"
onClick={closeModal}
>
- <Icon icon={CloseIcon} size={16} />
+ <StyledIcon icon={CloseIcon} />
</IconButton>
<div className="fb-root">
<StyledIcon icon={ecolyoIcon} size={80} />
diff --git a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
index 9a26cb883362f15852a5aa683b0a4dab56d83bb9..a567f2b4120332fdf43d845e0edc6482a90cc29c 100644
--- a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
+++ b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`FeedbackModal component should render the component 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="16"
width="16"
diff --git a/src/components/FluidChart/HalfHourNoDataFailure/HalfHourNoDataFailure.tsx b/src/components/FluidChart/HalfHourNoDataFailure/HalfHourNoDataFailure.tsx
index 116c1929971e8942dd38f039343bd255218df7fd..4ef72a3bd88c6cdd5968443e7b08714b9e27d500 100644
--- a/src/components/FluidChart/HalfHourNoDataFailure/HalfHourNoDataFailure.tsx
+++ b/src/components/FluidChart/HalfHourNoDataFailure/HalfHourNoDataFailure.tsx
@@ -1,6 +1,6 @@
import failureIcon from 'assets/icons/visu/duelResult/CHALLENGE0001-0.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 '../HalfHourUpcoming/HalfHourUpcoming.scss'
@@ -9,7 +9,7 @@ const HalfHourNoDataFailure = () => {
return (
<div className="halfHour">
- <Icon className="imgResult" icon={failureIcon} size={180} />
+ <StyledIcon className="imgResult" icon={failureIcon} size={180} />
<h2 className="text-20-bold halfHourFailure">
{t('timestep.half_an_hour.gather_data_failure')}
</h2>
diff --git a/src/components/FluidChart/HalfHourNoDataFailure/__snapshots__/HalfHourNoDataFailure.spec.tsx.snap b/src/components/FluidChart/HalfHourNoDataFailure/__snapshots__/HalfHourNoDataFailure.spec.tsx.snap
index aeeb024a2da8612aa4ee029c46c778c387c4e867..255aa924dc177a4b338b5bc95a320b7e7882dbf7 100644
--- a/src/components/FluidChart/HalfHourNoDataFailure/__snapshots__/HalfHourNoDataFailure.spec.tsx.snap
+++ b/src/components/FluidChart/HalfHourNoDataFailure/__snapshots__/HalfHourNoDataFailure.spec.tsx.snap
@@ -6,6 +6,7 @@ exports[`HalfHourNoDataFailure component should render correctly HalfHourNoDataF
class="halfHour"
>
<svg
+ aria-hidden="true"
class="imgResult styles__icon___23x3R"
height="180"
width="180"
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 3fa45eaec93a3e22dc0fcecb4d36cdb2259e2926..f13a42912049bab5dbfb59213a6cdca56555cf2e 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,8 +1,8 @@
import IconButton from '@material-ui/core/IconButton'
import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
import FeedbackIcon from 'assets/icons/ico/feedback.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 { ScreenType } from 'enums'
import React, { useCallback, useEffect, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
@@ -60,7 +60,7 @@ const Header = ({
className="header-back-button"
onClick={handleClickBack}
>
- <Icon icon={BackArrowIcon} size={16} />
+ <StyledIcon icon={BackArrowIcon} />
</IconButton>
)}
{desktopTitleKey && (
@@ -83,7 +83,7 @@ const Header = ({
className="header-feedbacks-button"
onClick={handleClickFeedbacks}
>
- <Icon icon={FeedbackIcon} size={40} />
+ <StyledIcon icon={FeedbackIcon} size={40} />
</IconButton>
</div>
{children}
diff --git a/src/components/Header/__snapshots__/Header.spec.tsx.snap b/src/components/Header/__snapshots__/Header.spec.tsx.snap
index 4ed477186e477d130db0be4fb2f71da704398736..2b060bac40e27596a9dae81d405bc37b8b3cf350 100644
--- a/src/components/Header/__snapshots__/Header.spec.tsx.snap
+++ b/src/components/Header/__snapshots__/Header.spec.tsx.snap
@@ -29,6 +29,7 @@ exports[`Header component should be rendered correctly on desktop 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="40"
width="40"
@@ -81,6 +82,7 @@ exports[`Header component should be rendered correctly on mobile 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="40"
width="40"
diff --git a/src/components/Konnector/KonnectorModal.tsx b/src/components/Konnector/KonnectorModal.tsx
index df53e6c64396724c7d187e5ee6500f9280165246..9f3f783bdb19ffed59f5dd80c3ead9aa53d775ce 100644
--- a/src/components/Konnector/KonnectorModal.tsx
+++ b/src/components/Konnector/KonnectorModal.tsx
@@ -4,6 +4,7 @@ import EnedisIcon from 'assets/icons/ico/consent-outdated-enedis.svg'
import errorIcon from 'assets/icons/visu/data-nok.svg'
import successIcon from 'assets/icons/visu/data-ok.svg'
import classNames from 'classnames'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Loader from 'components/Loader/Loader'
import connectionWaitingText from 'constants/connectionWaitingText.json'
import firstConnectionWaitingText from 'constants/firstConnectionWaitingText.json'
@@ -12,7 +13,6 @@ import {
SUCCESS_EVENT,
} from 'cozy-harvest-lib/dist/models/flowEvents'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import { FluidType, KonnectorError } from 'enums'
import { shuffle } from 'lodash'
import { Account } from 'models'
@@ -106,7 +106,7 @@ const KonnectorModal = ({
/** Returns connection success contents, depending on the fluid and update status */
const connectionSuccessContent = () => (
<div className="konnector-config">
- <Icon icon={successIcon} size={48} />
+ <StyledIcon icon={successIcon} size={48} />
<div className="headerSuccess text-20-bold">
{t(`konnector_modal.success_${isUpdating ? 'update_' : ''}txt`)}
</div>
@@ -189,7 +189,7 @@ const KonnectorModal = ({
{error === KonnectorError.LOGIN_FAILED && (
// LOGIN FAILED FOR ENEDIS AND EGL
<div className="konnector-config">
- <Icon icon={errorIcon} size={48} />
+ <StyledIcon icon={errorIcon} size={48} />
<div className="headerError text-20-bold">
{t('konnector_modal.error_txt')}
</div>
@@ -236,7 +236,7 @@ const KonnectorModal = ({
fluidType === FluidType.ELECTRICITY && (
// MISMATCH UPDATE ERROR ENEDIS
<div className="headerError konnector-config mismatch">
- <Icon icon={EnedisIcon} width={120} height={80} />
+ <StyledIcon icon={EnedisIcon} width={120} height={80} />
<div className="title text-20-bold">
{t('konnector_modal.mismatch.title')}
</div>
@@ -255,7 +255,7 @@ const KonnectorModal = ({
KonnectorError.USER_ACTION_NEEDED_ACCOUNT_REMOVED &&
fluidType === FluidType.GAS && (
<div className="konnector-config">
- <Icon icon={errorIcon} size={48} />
+ <StyledIcon icon={errorIcon} size={48} />
<div className="headerError text-20-bold">
{t('konnector_modal.error_txt')}
</div>
@@ -274,7 +274,7 @@ const KonnectorModal = ({
KonnectorError.USER_ACTION_NEEDED_ACCOUNT_REMOVED && (
// DEFAULT CASE
<div className="konnector-config">
- <Icon icon={errorIcon} size={48} />
+ <StyledIcon icon={errorIcon} size={48} />
<div className="headerError text-20-bold">
{t('konnector_modal.error_txt')}
</div>
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index fb011aed8836b721a8e74ece7acdafc14839543a..2a3948d7ff4d9f3c31e2056eec66fcc7de16b2ce 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -23,7 +23,6 @@ import {
SUCCESS_EVENT,
} from 'cozy-harvest-lib/dist/models/flowEvents'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import {
FluidSlugType,
FluidState,
@@ -348,7 +347,7 @@ const KonnectorViewerCard = ({
return (
<div className="konnector-icon">
- <Icon
+ <StyledIcon
icon={currentFluidStatus.connection.account ? iconType : OfflinePicto}
size={49}
/>
@@ -487,7 +486,7 @@ const KonnectorViewerCard = ({
`konnector_options.accessibility.button_toggle_detail_${currentFluidName}`
)}
expandIcon={
- <Icon icon={chevronDown} size={16} className="accordion-icon" />
+ <StyledIcon icon={chevronDown} className="accordion-icon" />
}
classes={{
root: 'expansion-panel-summary',
diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
index 152481df0a1011c53ff7b0a76440d155a106fb02..ca43a508d76ed4891b6d6c352ab498f5b0cab14c 100644
--- a/src/components/Konnector/KonnectorViewerList.tsx
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -1,6 +1,6 @@
import StyledCard from 'components/CommonKit/Card/StyledCard'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import { FluidType } from 'enums'
import React from 'react'
import { useNavigate } from 'react-router-dom'
@@ -28,7 +28,10 @@ const KonnectorViewerList = () => {
onClick={() => goToFluid(fluidStatusItem.fluidType)}
fluidType={fluidStatusItem.fluidType}
>
- <Icon icon={getAddPicto(fluidStatusItem.fluidType)} size={36} />
+ <StyledIcon
+ icon={getAddPicto(fluidStatusItem.fluidType)}
+ size={36}
+ />
<div
className={`konnector-title text-18-bold ${getFluidName(
fluidStatusItem.fluidType
diff --git a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
index 102a761bc6b23ce140012667112e749b927d0bd5..55983671a4f8b302b7d61f5222229fb5cbf744f0 100644
--- a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
+++ b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
@@ -17,6 +17,7 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="36"
width="36"
@@ -47,6 +48,7 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="36"
width="36"
@@ -77,6 +79,7 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="36"
width="36"
diff --git a/src/components/Options/ExportData/ExportData.tsx b/src/components/Options/ExportData/ExportData.tsx
index 94365745aab31c7f23204de092724fca3367fb8a..c8fc07003e0b0a8a6bd860901fa99336195132e8 100644
--- a/src/components/Options/ExportData/ExportData.tsx
+++ b/src/components/Options/ExportData/ExportData.tsx
@@ -6,9 +6,9 @@ import {
} from '@material-ui/core'
import chevronDown from 'assets/icons/ico/chevron-down.svg'
import exportIcon from 'assets/icons/ico/export.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import { FluidType, TimeStep } from 'enums'
import { remove } from 'lodash'
import React, { useEffect, useMemo, useState } from 'react'
@@ -100,14 +100,14 @@ const ExportData = () => {
<AccordionSummary
aria-label={t('profile_type.accessibility.button_toggle_export')}
expandIcon={
- <Icon icon={chevronDown} size={16} className="accordion-icon" />
+ <StyledIcon icon={chevronDown} className="accordion-icon" />
}
classes={{
root: 'expansion-panel-summary',
content: 'expansion-panel-content',
}}
>
- <Icon className="export-icon" icon={exportIcon} size={42} />
+ <StyledIcon className="export-icon" icon={exportIcon} size={42} />
<div className="text-16-normal accordion-title">
{t('export.title_export')}
</div>
@@ -126,7 +126,9 @@ const ExportData = () => {
<>
{fluidCheckbox()}
<Button
- aria-label={t('unsubscribe.button_accessibility')}
+ aria-label={t(
+ 'profile_type.accessibility.button_export_data'
+ )}
onClick={() => setShowExportModal('start')}
className="btnSecondary"
disabled={answer.length === 0}
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 565c7d0f4a4835d135788e7179a1b10afe7fb157..a057c53700ae6c9688e271366dff865bc41a1c19 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
@@ -50,6 +50,7 @@ exports[`exportDoneModal component should be rendered correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="18"
width="18"
@@ -70,6 +71,7 @@ exports[`exportDoneModal component should be rendered correctly 1`] = `
class="icon-main"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="44"
width="44"
@@ -164,6 +166,7 @@ exports[`exportDoneModal component should display error message 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="18"
width="18"
@@ -184,6 +187,7 @@ exports[`exportDoneModal component should display error message 1`] = `
class="icon-main"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="44"
width="44"
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 523b4daa57c80aebfcdcdcc360170ee7023689a5..bde82ab420fc03cd8fb898ea247dc39da808e07d 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
@@ -50,6 +50,7 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="18"
width="18"
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 dcd482806bf0e6bf6615d974fcdbbef16d16b656..4641758ad102b717f979122b4cb96454d94cc39e 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
@@ -50,6 +50,7 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="18"
width="18"
@@ -70,6 +71,7 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
class="icon-main"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="48"
width="48"
diff --git a/src/components/Options/ExportData/Modals/exportDoneModal.tsx b/src/components/Options/ExportData/Modals/exportDoneModal.tsx
index 79d7a24dbe5881b54bc0fe3c14e7bc7a375fb9dc..742fcc7775a537f342cc0ceef79d2fa2f4311ec3 100644
--- a/src/components/Options/ExportData/Modals/exportDoneModal.tsx
+++ b/src/components/Options/ExportData/Modals/exportDoneModal.tsx
@@ -3,8 +3,8 @@ import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.svg'
import exportDone from 'assets/icons/ico/exportDone.svg'
import warnCross from 'assets/icons/ico/warn-cross.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 './exportDoneModal.scss'
@@ -41,12 +41,12 @@ const ExportDoneModal = ({
className="modal-paper-close-button"
onClick={handleCloseClick}
>
- <Icon icon={CloseIcon} size={18} />
+ <StyledIcon icon={CloseIcon} size={18} />
</IconButton>
<div className="content">
<div className="icon-main">
- <Icon icon={error ? warnCross : exportDone} size={44} />
+ <StyledIcon icon={error ? warnCross : exportDone} size={44} />
</div>
{!error && (
<>
diff --git a/src/components/Options/ExportData/Modals/exportLoadingModal.tsx b/src/components/Options/ExportData/Modals/exportLoadingModal.tsx
index 17925bfb12490ab521b6e0198ea04e9e40827a07..4dda61aae2e9a2810bc5f41eef19dc5c0d1e066b 100644
--- a/src/components/Options/ExportData/Modals/exportLoadingModal.tsx
+++ b/src/components/Options/ExportData/Modals/exportLoadingModal.tsx
@@ -2,10 +2,10 @@ import { Button, IconButton } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import * as Sentry from '@sentry/react'
import CloseIcon from 'assets/icons/ico/close.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import { FluidType, TimeStep } from 'enums'
import FileSaver from 'file-saver'
import { Dataload, TimePeriod } from 'models'
@@ -194,7 +194,7 @@ const ExportLoadingModal = ({
className="modal-paper-close-button"
onClick={handleCloseClick}
>
- <Icon icon={CloseIcon} size={18} />
+ <StyledIcon icon={CloseIcon} size={18} />
</IconButton>
<div className="content">
<div className="icon-main">
diff --git a/src/components/Options/ExportData/Modals/exportStartModal.tsx b/src/components/Options/ExportData/Modals/exportStartModal.tsx
index 42c9e48666cd4c446aaded19923adb9ee63b50af..2210a5c7feae285e1708c4dddbc0b050cfbe701d 100644
--- a/src/components/Options/ExportData/Modals/exportStartModal.tsx
+++ b/src/components/Options/ExportData/Modals/exportStartModal.tsx
@@ -2,8 +2,8 @@ import { Button, IconButton } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.svg'
import download from 'assets/icons/ico/download.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 './exportStartModal.scss'
@@ -39,11 +39,11 @@ const ExportStartModal = ({
className="modal-paper-close-button"
onClick={handleCloseClick}
>
- <Icon icon={CloseIcon} size={18} />
+ <StyledIcon icon={CloseIcon} size={18} />
</IconButton>
<div className="content">
<div className="icon-main">
- <Icon icon={download} size={48} />
+ <StyledIcon icon={download} size={48} />
</div>
<div className="text-16-bold subtitle">
{t('export.modal_start.text1')}
diff --git a/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap b/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap
index 7bfb4b7882eb8397b07bade0bbd7b63505a5b3ec..186567d961030f0246af7dfe06dd4119c165b1bb 100644
--- a/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap
+++ b/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap
@@ -23,6 +23,7 @@ exports[`exportOptions component should be rendered correctly 1`] = `
class="MuiAccordionSummary-content expansion-panel-content"
>
<svg
+ aria-hidden="true"
class="export-icon styles__icon___23x3R"
height="42"
width="42"
@@ -46,6 +47,7 @@ exports[`exportOptions component should be rendered correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="accordion-icon styles__icon___23x3R"
height="16"
width="16"
diff --git a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
index d9ed1c828754438af9be7f61094272af105ecb4f..922b4e04913026d35f5eb6b74aa75220896e7d0f 100644
--- a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
+++ b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
@@ -10,7 +10,6 @@ import StyledCard from 'components/CommonKit/Card/StyledCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import useExploration from 'components/Hooks/useExploration'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import {
FluidType,
HousingType,
@@ -69,14 +68,18 @@ const ProfileTypeOptions = () => {
'profile_type.accessibility.button_toggle_detail_profile'
)}
expandIcon={
- <Icon icon={chevronDown} size={16} className="accordion-icon" />
+ <StyledIcon icon={chevronDown} className="accordion-icon" />
}
classes={{
root: 'expansion-panel-summary',
content: 'expansion-panel-content',
}}
>
- <Icon className="profile-icon" icon={profileIcon} size={42} />
+ <StyledIcon
+ className="profile-icon"
+ icon={profileIcon}
+ size={42}
+ />
<div className="text-16-normal profile-title">
{t('profile_type.your_profile')}
</div>
diff --git a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
index 6f2c8cedd1c0f04a3be025a71ea7c25d16c3cbf7..a223c49d3c9406ef11ce092034d6df84202ce188 100644
--- a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
+++ b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
@@ -74,6 +74,7 @@ exports[`OptionsView component should be rendered correctly 1`] = `
class="MuiAccordionSummary-content expansion-panel-content"
>
<svg
+ aria-hidden="true"
class="export-icon styles__icon___23x3R"
height="42"
width="42"
@@ -97,6 +98,7 @@ exports[`OptionsView component should be rendered correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="accordion-icon styles__icon___23x3R"
height="16"
width="16"
diff --git a/src/components/PartnerIssue/PartnerIssueModal.tsx b/src/components/PartnerIssue/PartnerIssueModal.tsx
index d6158bd696ecd68900096f8994e68a8d3f8532e3..6d26bd5e935a8870c47c194c355057bf9a0617d6 100644
--- a/src/components/PartnerIssue/PartnerIssueModal.tsx
+++ b/src/components/PartnerIssue/PartnerIssueModal.tsx
@@ -5,7 +5,6 @@ import CloseIcon from 'assets/icons/ico/close.svg'
import OrangeWarn from 'assets/icons/ico/warn-orange.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 { FluidType } from 'enums'
import React from 'react'
import './partnerIssueModal.scss'
@@ -56,7 +55,7 @@ const PartnerIssueModal = ({
className="modal-paper-close-button"
onClick={() => handleCloseClick(issuedFluid)}
>
- <Icon icon={CloseIcon} size={16} />
+ <StyledIcon icon={CloseIcon} />
</IconButton>
<div className="partnerIssueModal">
diff --git a/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap b/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
index a0196786c26b18a6c58302c49e56c65b3c1a024b..2da3a371021ada8c3ae39dce5ca2d9d014b5daf3 100644
--- a/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
+++ b/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`PartnerIssueModal component should render correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="16"
width="16"
diff --git a/src/components/Quiz/QuizExplanationModal/QuizExplanationModal.tsx b/src/components/Quiz/QuizExplanationModal/QuizExplanationModal.tsx
index 2d84331434722f315a25f5fe8489f12bb180e19f..ddf9a182c694430d4dd6966a2919c7ab1583db57 100644
--- a/src/components/Quiz/QuizExplanationModal/QuizExplanationModal.tsx
+++ b/src/components/Quiz/QuizExplanationModal/QuizExplanationModal.tsx
@@ -2,8 +2,8 @@ import Button from '@material-ui/core/Button'
import Dialog from '@material-ui/core/Dialog'
import correctAnswer from 'assets/icons/ico/correctAnswer.svg'
import wrongAnswer from 'assets/icons/ico/wrongAnswer.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 { QuestionEntity } from 'models'
import React from 'react'
import './quizExplanationModal.scss'
@@ -43,12 +43,12 @@ const QuizExplanationModal = ({
<>
{question.answers[answerIndex].isTrue ? (
<div>
- <Icon icon={correctAnswer} size={100} />
+ <StyledIcon icon={correctAnswer} size={100} />
<p className="quiz-modal-answer correct">{t('quiz.correct')}</p>
</div>
) : (
<div>
- <Icon icon={wrongAnswer} size={100} />
+ <StyledIcon icon={wrongAnswer} size={100} />
<p className="quiz-modal-answer wrong">{t('quiz.wrong')}</p>
</div>
)}
diff --git a/src/components/Terms/CGUModal.tsx b/src/components/Terms/CGUModal.tsx
index a5ae234d15802ee66227cec1f37ce71bed6d6084..2b481a416af6537499fa9eb3a95ce1d11348f5d6 100644
--- a/src/components/Terms/CGUModal.tsx
+++ b/src/components/Terms/CGUModal.tsx
@@ -1,9 +1,9 @@
import { Button, IconButton } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import GCUContent from 'components/Options/GCU/GCUContent'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import React from 'react'
import './termsView.scss'
@@ -31,7 +31,7 @@ const CGUModal = ({ open, handleCloseClick }: CGUModalProps) => {
className="modal-paper-close-button"
onClick={handleCloseClick}
>
- <Icon icon={CloseIcon} size={16} />
+ <StyledIcon icon={CloseIcon} />
</IconButton>
<GCUContent />
<Button
diff --git a/src/components/Terms/LegalNoticeModal.tsx b/src/components/Terms/LegalNoticeModal.tsx
index 1dce2e13d0b262d18aacfd5b4e31e2f6a9044425..5b2796b86ebc176369511fdb9001e6d0435cf11f 100644
--- a/src/components/Terms/LegalNoticeModal.tsx
+++ b/src/components/Terms/LegalNoticeModal.tsx
@@ -1,9 +1,9 @@
import { Button, IconButton } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import LegalNoticeContent from 'components/Options/LegalNotice/LegalNoticeContent'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import React from 'react'
import './termsView.scss'
@@ -33,7 +33,7 @@ const LegalNoticeModal = ({
className="modal-paper-close-button"
onClick={handleCloseClick}
>
- <Icon icon={CloseIcon} size={16} />
+ <StyledIcon icon={CloseIcon} />
</IconButton>
<LegalNoticeContent />
<Button
diff --git a/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap b/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
index a2fff83b060e8eb574459d9e44ff77973dadaa83..f69973105e2cbc74de85d13dc090441c4242e447 100644
--- a/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`CGUModal component should be rendered correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="16"
width="16"
diff --git a/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap b/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
index 2f134b674a199fe9c243f1a07083daad1b0f2310..12f39a089ab591baf0fda9b7c671d1807d647f13 100644
--- a/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`LegalNoticeModal component should be rendered correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="16"
width="16"
diff --git a/src/components/WelcomeModal/WelcomeModal.tsx b/src/components/WelcomeModal/WelcomeModal.tsx
index c61135791fcd1117de71f4923c99973b5ab691dd..c9ebab7cbd4da252b6410c158c469cefb3a75e72 100644
--- a/src/components/WelcomeModal/WelcomeModal.tsx
+++ b/src/components/WelcomeModal/WelcomeModal.tsx
@@ -1,10 +1,10 @@
import { Button, Dialog, IconButton } from '@material-ui/core'
import CloseIcon from 'assets/icons/ico/close.svg'
import PartnersConsentIcon from 'assets/icons/visu/onboarding/partners_consent.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import useUserInstanceSettings from 'components/Hooks/useUserInstanceSettings'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import React, { useCallback } from 'react'
import EnvironmentService from 'services/environment.service'
import MailService from 'services/mail.service'
@@ -84,7 +84,7 @@ const WelcomeModal = ({ open }: { open: boolean }) => {
className="modal-paper-close-button"
onClick={setWelcomeModalViewed}
>
- <Icon icon={CloseIcon} size={16} />
+ <StyledIcon icon={CloseIcon} />
</IconButton>
<div className="info">
<h1 className="info-header text-24-bold">
@@ -95,7 +95,7 @@ const WelcomeModal = ({ open }: { open: boolean }) => {
<p>{t('onboarding.welcomeModal.part2')}</p>
</div>
<div className="info-footer">
- <Icon icon={PartnersConsentIcon} size={191} />
+ <StyledIcon icon={PartnersConsentIcon} size={191} />
<Button
aria-label={t('onboarding.welcomeModal.accessibility.button_valid')}
onClick={setWelcomeModalViewed}
diff --git a/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap b/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
index 602c18b25b32ece87df10ab23d9192551e040e3f..7f96a2ea50d0f1b608eef4e5d093391c97902a71 100644
--- a/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
+++ b/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`WelcomeModal component should be rendered correctly 1`] = `
class="MuiIconButton-label"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="16"
width="16"
@@ -84,6 +85,7 @@ exports[`WelcomeModal component should be rendered correctly 1`] = `
class="info-footer"
>
<svg
+ aria-hidden="true"
class="styles__icon___23x3R"
height="191"
width="191"
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 1461baf42e08e0f77dca3a5a0c9435931248d802..49c4b41994d89a7f909d7d770ec532da989138de 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -133,6 +133,7 @@
},
"analysis_pie": {
"total": "Conso totale",
+ "details": "Détail par fluide",
"month": "Au mois\u00a0",
"estimation": "Comment sont estimés<br>les prix\u00a0?"
},
@@ -332,6 +333,8 @@
"consumption": {
"display_last_data": "Voir mes dernières consos",
"accessibility": {
+ "navigation_group": "Choix de la période",
+ "fluid_menu": "Choix du fluide",
"button_previous_period": "Afficher la période précédente",
"button_next_period": "Afficher la période suivante",
"button_previous_value": "Sélectionner la valeur précédente",
@@ -365,6 +368,14 @@
"aie": "Aïe !",
"data_empty": "Vide",
"estimated": "estimés",
+ "cost_per_fluid": {
+ "elec": "Part de l'électricité",
+ "water": "Part de l'eau",
+ "gas": "Part du gaz",
+ "0": "Part de l'électricité",
+ "1": "Part de l'eau",
+ "2": "Part du gaz"
+ },
"dataModal": {
"list_title": "3 raisons possibles :",
"item1": "le lien entre Ecolyo et le fournisseur de données est rompu\u00a0: une mise à jour de ce lien (en bas de la page) peut résoudre ce problème.",
@@ -587,7 +598,7 @@
"freezer": "Congélateur",
"boiler": "Chaudière",
"hydraulic_heating": "Chauffage hydraulique",
- "accessible_label": "Sélection d'équipement"
+ "accessible_label": "Liste des équipements"
}
},
"ecogesture_selection": {
@@ -879,7 +890,11 @@
"later": "Plus tard",
"go": "J'y vais",
"no": "Non",
- "yes": "Oui"
+ "yes": "Oui",
+ "accessibility": {
+ "window_title": "Fenêtre d'erreur, consentement expiré",
+ "button_close": "Fermer la fenêtre"
+ }
},
"legal": {
"read_legal": "Lire les mentions légales",
@@ -1173,7 +1188,8 @@
"button_toggle_detail_profile": "Afficher ou masquer le détail du profil",
"button_toggle_export": "Afficher ou masquer l'export des données'",
"button_toggle_average_home": "Afficher ou masquer les informations sur le comparatif'",
- "button_validate": "Valider"
+ "button_validate": "Valider",
+ "button_export_data": "Télécharger les données"
}
},
"export": {