diff --git a/src/components/Analysis/MonthlyAnalysis.tsx b/src/components/Analysis/MonthlyAnalysis.tsx
index 6977bf48b3b884c4f77cdcc28837cb748262ad76..d41a7ee44685f030a4edc6f6e5958b60a9d1de7e 100644
--- a/src/components/Analysis/MonthlyAnalysis.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.tsx
@@ -164,7 +164,7 @@ const MonthlyAnalysis: React.FC = () => {
</div>
</div>
) : (
- <div className="analysis-container-spinner">
+ <div className="analysis-container-spinner" aria-busy="true">
<StyledSpinner size="5em" fluidType={FluidType.MULTIFLUID} />
</div>
)}
diff --git a/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap
index 90ce564537f99d07b21b98922cc07a36e84d0da6..f654ebe5783ac204580355712f00667bc2604a56 100644
--- a/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap
+++ b/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap
@@ -3,6 +3,7 @@
exports[`MonthlyAnalysis component should be rendered correctly 1`] = `
<React.Fragment>
<div
+ aria-busy="true"
className="analysis-container-spinner"
>
<StyledSpinner
diff --git a/src/components/CommonKit/Icon/StyledIcon.tsx b/src/components/CommonKit/Icon/StyledIcon.tsx
index cfdd7fe98ba06775d81d01236874ad1d868e7b5a..663e1b926f0b919e9fa73d8a268eab63d3523466 100644
--- a/src/components/CommonKit/Icon/StyledIcon.tsx
+++ b/src/components/CommonKit/Icon/StyledIcon.tsx
@@ -11,23 +11,12 @@ interface StyledIconProps {
}
const StyledIcon: React.ComponentType<StyledIconProps> = ({
- className = '',
icon,
ariaHidden = true,
size = 16,
- role = '',
- title = '',
+ ...props
}: StyledIconProps) => {
- return (
- <Icon
- role={role}
- title={title}
- aria-hidden={ariaHidden}
- className={className}
- icon={icon}
- size={size}
- />
- )
+ return <Icon aria-hidden={ariaHidden} icon={icon} size={size} {...props} />
}
export default StyledIcon
diff --git a/src/components/CommonKit/Spinner/Spinner.spec.tsx b/src/components/CommonKit/Spinner/Spinner.spec.tsx
index 868a8370ca545d8d192e37d1b1571c796e0a478c..ff1327a0d2a4de39ce9adf447cb383808841a78b 100644
--- a/src/components/CommonKit/Spinner/Spinner.spec.tsx
+++ b/src/components/CommonKit/Spinner/Spinner.spec.tsx
@@ -2,6 +2,16 @@ import React from 'react'
import { mount } from 'enzyme'
import Spinner from './Spinner'
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
describe('Spinner component test ', () => {
const mockProps = {
size: 14,
diff --git a/src/components/CommonKit/Spinner/Spinner.tsx b/src/components/CommonKit/Spinner/Spinner.tsx
index a2de9d37caa517e6243b31090d7e4b38c9a5978f..6c9ab1f66946f964deab153a9a3ffe131a6d88c0 100644
--- a/src/components/CommonKit/Spinner/Spinner.tsx
+++ b/src/components/CommonKit/Spinner/Spinner.tsx
@@ -1,12 +1,20 @@
import React from 'react'
import CircularProgress from '@material-ui/core/CircularProgress'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
interface SpinnerProps {
size: number | string
}
const Spinner: React.FC<SpinnerProps> = ({ size }: SpinnerProps) => {
- return <CircularProgress size={size} />
+ const { t } = useI18n()
+ return (
+ <CircularProgress
+ size={size}
+ aria-label={t('common.accessibility.loading')}
+ title={t('common.accessibility.loading')}
+ />
+ )
}
export default Spinner
diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
index dd6c18f36ff7f7f4ad2406ae69ba64156c4a5119..8eb2a37b427a17a97477911312d798f171d49ca7 100644
--- a/src/components/Ecogesture/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -135,6 +135,7 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
}}
aria-controls="simple-menu"
aria-haspopup="true"
+ aria-label={t(`ecogesture.${activeFilter}`)}
onClick={toggleMenu}
variant="contained"
>
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index 0e89e99fc4d04bd7300ffb24ccca096bbe5a8be0..9ff72d3d195c2d6dad2c5a4358f60ad5e07a0c6d 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -134,7 +134,15 @@ const FluidChart: React.FC<FluidChartProps> = ({
currentTimeStep !== TimeStep.YEAR ? (
<div className="fluidchart-footer" onClick={handleChangeSwitch}>
<div className="fluidchart-footer-compare text-15-normal">
- <Switch fluidType={fluidType} checked={showCompare} />
+ <Switch
+ fluidType={fluidType}
+ checked={showCompare}
+ inputProps={{
+ 'aria-label': t(
+ 'consumption.accessibility.checkbox_compare'
+ ),
+ }}
+ />
<span
className={
showCompare
diff --git a/src/components/FluidChart/FluidChartSlide.tsx b/src/components/FluidChart/FluidChartSlide.tsx
index 0f1d252b6862725cb81ab7b39955fe565d7edcf0..b3be150767908664337895347cdf5e264cb46d41 100644
--- a/src/components/FluidChart/FluidChartSlide.tsx
+++ b/src/components/FluidChart/FluidChartSlide.tsx
@@ -113,7 +113,7 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
}, [dispatch, index, currentIndex, chartData])
return (
- <div className={'fluidchartslide-root'}>
+ <div className={'fluidchartslide-root'} aria-busy={!isDataLoaded}>
{!isDataLoaded ? (
<StyledSpinner size="5em" fluidType={fluidType} />
) : (
diff --git a/src/components/Home/HomeView.tsx b/src/components/Home/HomeView.tsx
index 0bbf434d64b0ac9ae60ba60bc65a41fea9dc8cd5..6994ba59fdd27c6d3f71a5b1a30e59a92ee51c91 100644
--- a/src/components/Home/HomeView.tsx
+++ b/src/components/Home/HomeView.tsx
@@ -49,7 +49,7 @@ const HomeView: React.FC = () => {
</Header>
<Content height={headerHeight}>
{loading && (
- <div className={'homeview-loading'}>
+ <div className={'homeview-loading'} aria-busy="true">
<StyledSpinner size="5em" fluidType={FluidType.MULTIFLUID} />
</div>
)}
diff --git a/src/components/Quiz/QuizCustomQuestionContent.tsx b/src/components/Quiz/QuizCustomQuestionContent.tsx
index df46b6da0709f592ffd58e1012bf0596511eada0..47fd14f4b42baffe4bc2fb1460b603a32a4be306 100644
--- a/src/components/Quiz/QuizCustomQuestionContent.tsx
+++ b/src/components/Quiz/QuizCustomQuestionContent.tsx
@@ -88,7 +88,7 @@ const QuizCustomQuestionContent: React.FC<QuizCustomQuestionContent> = ({
</p>
{isLoading ? (
- <div className={'question-loading'}>
+ <div className={'question-loading'} aria-busy="true">
<StyledSpinner />
</div>
) : (
diff --git a/src/components/SingleFluid/SingleFluidView.tsx b/src/components/SingleFluid/SingleFluidView.tsx
index c83dcdb7d6fd0f1c4b5ec4083aee2f670e9e756d..c592309232987e688fd6f878e74bfdfe0d377dcb 100644
--- a/src/components/SingleFluid/SingleFluidView.tsx
+++ b/src/components/SingleFluid/SingleFluidView.tsx
@@ -61,7 +61,7 @@ const SingleFluidView: React.FC<SingleFluidViewProps> = ({
</Header>
<Content height={headerHeight}>
{loading && (
- <div className={'singlefluidview-loading'}>
+ <div className={'singlefluidview-loading'} aria-busy="true">
<StyledSpinner size="5em" fluidType={fluidType} />
</div>
)}
diff --git a/src/components/Splash/SplashScreen.tsx b/src/components/Splash/SplashScreen.tsx
index 9112e1f67cf726d7f5f2452e7532c074f16605b3..44b1ba189703c769c897ccfd47d2886209f5c0c8 100644
--- a/src/components/Splash/SplashScreen.tsx
+++ b/src/components/Splash/SplashScreen.tsx
@@ -23,7 +23,6 @@ const SplashScreen: React.FC = () => {
<img src={logos} alt="ensemble de logos" />
</div>
</div>
- <div className="splash-footer"></div>
</>
)
}
diff --git a/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap b/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap
index 63adaa7e3d71d00321d1174452614596568137ae..e3a7b52b0fb5109218496e037c447d3853e77d0a 100644
--- a/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap
+++ b/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap
@@ -4231,8 +4231,5 @@ exports[`SplashScreen component should be rendered correctly 1`] = `
/>
</div>
</div>
- <div
- className="splash-footer"
- />
</React.Fragment>
`;
diff --git a/src/locales/fr.json b/src/locales/fr.json
index fe05a247ede68feacc00bf0e8854cc0a51b02990..a51565027431dc7ae12a7dfac668009147c65232 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -10,7 +10,10 @@
"title_options": "Options",
"title_profiletype": "Ajuster mon profil",
"title_faq": "FAQ",
- "title_legal_notice": "Mentions légales"
+ "title_legal_notice": "Mentions légales",
+ "accessibility": {
+ "loading": "Chargement"
+ }
},
"FLUID": {
"ELECTRICITY": {
@@ -207,7 +210,8 @@
"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",
- "button_next_value": "Sélectionner la valeur suivante"
+ "button_next_value": "Sélectionner la valeur suivante",
+ "checkbox_compare": "Afficher ou cacher la comparaison"
}
},
"consumption_details": {