From 7aab7ee75e0ec92fc76b09a9b6bff36cdafb76ab Mon Sep 17 00:00:00 2001
From: Pierre Ecarlat <pecarlat@grandlyon.com>
Date: Fri, 5 Jul 2024 08:24:37 +0000
Subject: [PATCH] fix(accessibility): alt mentions for images
---
.../Action/ActionModal/ActionModal.tsx | 4 +-
.../__snapshots__/ActionModal.spec.tsx.snap | 1 +
.../TemperatureComparisonModal.tsx | 4 +-
.../TemperatureComparisonModal.spec.tsx.snap | 1 +
.../ElecHalfHourMonthlyAnalysis.tsx | 18 ++++---
.../ElecInfoModal.tsx | 4 +-
.../ElecHalfHourMonthlyAnalysis.spec.tsx.snap | 4 ++
.../__snapshots__/ElecInfoModal.spec.tsx.snap | 2 +
.../MaxConsumptionCard/MaxConsumptionCard.tsx | 5 +-
.../MaxConsumptionCard.spec.tsx.snap | 2 +
.../ProfileComparator/ProfileComparator.tsx | 10 +---
.../ProfileComparator.spec.tsx.snap | 3 +-
.../TotalAnalysisChart/TotalAnalysisChart.tsx | 12 +++--
src/components/CommonKit/Icon/StyledIcon.tsx | 2 +
.../EpglConnectModal/EpglConnectModal.tsx | 4 +-
.../ExpiredConsentModal.tsx | 10 ++--
.../ExpiredConsentModal.spec.tsx.snap | 6 ++-
.../Connection/GRDFConnect/GrdfModalHint.tsx | 6 +--
.../Connection/SGEConnect/SgeModalHint.tsx | 11 ++--
.../SgeConnectView.spec.tsx.snap | 1 +
.../__snapshots__/SgeModalHint.spec.tsx.snap | 6 ++-
.../Consumption/FluidButtons/FluidButton.tsx | 6 ++-
.../Consumption/FluidButtons/FluidButtons.tsx | 9 +++-
.../__snapshots__/FluidButton.spec.tsx.snap | 1 +
.../__snapshots__/FluidButtons.spec.tsx.snap | 6 +++
.../DataloadSectionDetail.tsx | 9 ++--
.../EstimatedConsumptionModal.tsx | 4 +-
.../ConsumptionVisualizer/NoDataModal.tsx | 6 +--
.../EstimatedConsumptionModal.spec.tsx.snap | 1 +
.../__snapshots__/NoDataModal.spec.tsx.snap | 2 +
.../CustomPopup/CustomPopupModal.tsx | 3 +-
.../CustomPopupModal.spec.tsx.snap | 1 +
.../DateNavigator/DateNavigator.tsx | 12 +++--
.../__snapshots__/DateNavigator.spec.tsx.snap | 4 ++
.../DuelEmptyValueModal.tsx | 4 +-
.../Duel/DuelResultModal/DuelResultModal.tsx | 10 ++--
.../DuelResultModal.spec.tsx.snap | 2 +
.../__snapshots__/lastDuelModal.spec.tsx.snap | 1 +
.../Duel/LastDuelModal/lastDuelModal.tsx | 3 +-
.../EcogestureInitModal.tsx | 4 +-
.../EcogestureInitModal.spec.tsx.snap | 1 +
.../EcogestureModal/EcogestureModal.tsx | 3 +-
.../EcogestureResetModal.tsx | 6 +--
.../EcogestureResetModal.spec.tsx.snap | 2 +
.../Ecogesture/SingleEcogestureView.tsx | 5 +-
.../SingleEcogestureView.spec.tsx.snap | 2 +
.../EcogestureFormEquipment.spec.tsx | 5 +-
.../EcogestureFormEquipment.tsx | 11 +++-
.../EcogestureFormEquipment.spec.tsx.snap | 50 +++++++++++++------
.../EcogestureLaunchFormModal.tsx | 4 +-
.../EcogestureLaunchFormModal.spec.tsx.snap | 1 +
.../EquipmentIcon/EquipmentIcon.tsx | 4 +-
.../__snapshots__/EquipmentIcon.spec.tsx.snap | 1 +
.../EcogestureSelectionModal.tsx | 4 +-
.../EcogestureSelectionModal.spec.tsx.snap | 1 +
src/components/Feedback/FeedbackModal.tsx | 3 +-
.../__snapshots__/FeedbackModal.spec.tsx.snap | 1 +
.../HalfHourNoDataFailure.tsx | 4 +-
.../HalfHourNoDataFailure.spec.tsx.snap | 1 +
src/components/Header/Header.tsx | 6 +--
.../Header/__snapshots__/Header.spec.tsx.snap | 2 +
src/components/Konnector/KonnectorModal.tsx | 12 ++---
.../Konnector/KonnectorViewerCard.tsx | 5 +-
.../Konnector/KonnectorViewerList.tsx | 7 ++-
.../KonnectorViewerList.spec.tsx.snap | 3 ++
.../Options/ExportData/ExportData.tsx | 10 ++--
.../exportDoneModal.spec.tsx.snap | 4 ++
.../exportLoadingModal.spec.tsx.snap | 1 +
.../exportStartModal.spec.tsx.snap | 2 +
.../ExportData/Modals/exportDoneModal.tsx | 6 +--
.../ExportData/Modals/exportLoadingModal.tsx | 4 +-
.../ExportData/Modals/exportStartModal.tsx | 6 +--
.../__snapshots__/ExportData.spec.tsx.snap | 2 +
.../ProfileTypeOptions/ProfileTypeOptions.tsx | 9 ++--
.../__snapshots__/OptionsView.spec.tsx.snap | 2 +
.../PartnerIssue/PartnerIssueModal.tsx | 3 +-
.../PartnerIssueModal.spec.tsx.snap | 1 +
.../QuizExplanationModal.tsx | 6 +--
src/components/Terms/CGUModal.tsx | 4 +-
src/components/Terms/LegalNoticeModal.tsx | 4 +-
.../__snapshots__/CGUModal.spec.tsx.snap | 1 +
.../LegalNoticeModal.spec.tsx.snap | 1 +
src/components/WelcomeModal/WelcomeModal.tsx | 6 +--
.../__snapshots__/WelcomeModal.spec.tsx.snap | 2 +
src/locales/fr.json | 22 ++++++--
85 files changed, 287 insertions(+), 157 deletions(-)
diff --git a/src/components/Action/ActionModal/ActionModal.tsx b/src/components/Action/ActionModal/ActionModal.tsx
index 8cd832e88..a83e38729 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 2825edc3a..fb6e52597 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 b165c9936..8af212cf8 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 19f0c60c8..ae3860876 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 a7ee2e698..df7940557 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 f755d44ae..aacab412d 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 6e75e12ed..fdd25bb41 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 940eea0eb..8de384b77 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 9e2888a8f..7f6c5ac98 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 91030a58f..149368eae 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 7d47de935..aced331fa 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 d8f55b5d7..ec5c29db9 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 f50fee731..806862bd4 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 d555270c0..13833b2eb 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 3638cc07d..24c1d3ea9 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 577a4932c..9752a9936 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 bc66bb1e2..83702bba2 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 c015a99bd..1c92e3150 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 5b68e0d94..9ccb96aa5 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 c85b19e81..b21dc1e1f 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 b9ab5c3f9..45adc444c 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 cd08a9944..54706835c 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 09ec44d26..3e96dfd19 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 8c24c5c5e..e4ba36dde 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 271a057e4..0a7e3429f 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 b16a11c99..5b09024b1 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 a2dfa28b7..2069ea38c 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 8462aa25d..ecc4ef5c7 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 c864e8304..6f79fffa9 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 971b2e6f4..753eef53c 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 189e1d290..ff68a7c12 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 eaf911248..8acb6fa60 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 b23c9ae51..f64619d37 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 aef335f2e..c23b70fc7 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 dd86dc010..a767c6df0 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 7b23acb61..a9435238d 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 aa23ded2d..a31054660 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 94080d04d..5afe82744 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 2e13dfff8..6c1f64e30 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 c62517b09..aa01d3e85 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 e0eb85875..fe8934ae7 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 ab7b5595c..00b2f61e7 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 afcbde8ff..2ff0e0c33 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 caa340983..c8abe7ced 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 acfca4da2..077faf8d5 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 77ad870ac..059d02251 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 2ad4b9d73..716342473 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 01a1093e4..a2ca77412 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 69febe91b..dec8909eb 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 d9ddbbe6d..cc4ae8a4b 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 61719c7d1..909100f52 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 56dc1a35b..332a18824 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 342bc0c02..e38e50f36 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 b33c75ebb..85820ef3e 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 e51d81a0e..685a14d59 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 c849c35f0..efc91bcba 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 9a26cb883..a567f2b41 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 116c19299..4ef72a3bd 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 aeeb024a2..255aa924d 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 3fa45eaec..f13a42912 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 4ed477186..2b060bac4 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 df53e6c64..9f3f783bd 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 fb011aed8..2a3948d7f 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 152481df0..ca43a508d 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 102a761bc..55983671a 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 94365745a..c8fc07003 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 565c7d0f4..a057c5370 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 523b4daa5..bde82ab42 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 dcd482806..4641758ad 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 79d7a24db..742fcc777 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 17925bfb1..4dda61aae 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 42c9e4866..2210a5c7f 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 7bfb4b788..186567d96 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 d9ed1c828..922b4e049 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 6f2c8cedd..a223c49d3 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 d6158bd69..6d26bd5e9 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 a0196786c..2da3a3710 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 2d8433143..ddf9a182c 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 a5ae234d1..2b481a416 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 1dce2e13d..5b2796b86 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 a2fff83b0..f69973105 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 2f134b674..12f39a089 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 c61135791..c9ebab7cb 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 602c18b25..7f96a2ea5 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 1461baf42..49c4b4199 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": {
--
GitLab