From ee42e9c2b9a2c56c322565f8ced0a2e70830196c Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Thu, 22 Apr 2021 10:28:40 +0200
Subject: [PATCH] fix: change aria-label by aria-labelledby
---
src/components/Action/ActionModal.tsx | 6 +-
src/components/Action/actionModal.scss | 4 +
.../Analysis/AnalysisErrorModal.tsx | 5 +-
src/components/Analysis/analysisError.scss | 84 +++++-----
.../Challenge/ChallengeNoFluidModal.tsx | 5 +-
.../Challenge/challengeNoFluidModal.scss | 4 +
src/components/Connection/ModalGRDF.tsx | 5 +-
src/components/Connection/modalGRDF.scss | 4 +
src/components/Duel/DuelEmptyValueModal.tsx | 5 +-
src/components/Duel/DuelResultModal.tsx | 5 +-
src/components/Duel/duelEmptyValueModal.scss | 4 +
src/components/Duel/duelResultModal.scss | 4 +
.../Ecogesture/EcogestureInfoModal.tsx | 5 +-
src/components/Ecogesture/EcogestureModal.tsx | 11 +-
.../Ecogesture/ecogestureInfoModal.scss | 4 +
.../Ecogesture/ecogestureModal.scss | 4 +
src/components/Feedback/FeedbackModal.tsx | 9 +-
src/components/Feedback/feedbackModal.scss | 4 +
src/components/Home/OldFluidDataModal.tsx | 5 +-
src/components/Home/oldFluidDataModal.scss | 104 ++++++------
src/components/Konnector/KonnectorModal.tsx | 5 +-
src/components/Konnector/konnectorModal.scss | 158 +++++++++---------
src/components/Quiz/QuizExplanationModal.tsx | 5 +-
src/components/Quiz/quizExplanationModal.scss | 3 +
src/components/Welcome/WelcomeModal.tsx | 5 +-
src/components/Welcome/welcomeModal.scss | 4 +
src/targets/browser/index.tsx | 4 +-
27 files changed, 278 insertions(+), 187 deletions(-)
diff --git a/src/components/Action/ActionModal.tsx b/src/components/Action/ActionModal.tsx
index 078190924..cfc32d6fa 100644
--- a/src/components/Action/ActionModal.tsx
+++ b/src/components/Action/ActionModal.tsx
@@ -45,15 +45,17 @@ const ActionModal: React.FC<ActionModalProps> = ({
<Dialog
open={open}
onClose={handleCloseClick}
- aria-label={t('action_modal.accessibility.window_title')}
+ aria-labelledby={'accessibility-title'}
classes={{
root: 'modal-root',
paper: 'modal-paper',
}}
>
+ <div id={'accessibility-title'}>
+ {t('action_modal.accessibility.window_title')}
+ </div>
<div className="action-modal">
<Icon icon={chronoMini} size={75} />
-
<div className="action-title text-16-normal">
{t('action.duration', {
// eslint-disable-next-line @typescript-eslint/camelcase
diff --git a/src/components/Action/actionModal.scss b/src/components/Action/actionModal.scss
index 837126721..8daa3a4fb 100644
--- a/src/components/Action/actionModal.scss
+++ b/src/components/Action/actionModal.scss
@@ -19,3 +19,7 @@
margin-top: 0.5rem;
}
}
+
+#accessibility-title {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/components/Analysis/AnalysisErrorModal.tsx b/src/components/Analysis/AnalysisErrorModal.tsx
index 1d00e9251..014e6b213 100644
--- a/src/components/Analysis/AnalysisErrorModal.tsx
+++ b/src/components/Analysis/AnalysisErrorModal.tsx
@@ -20,12 +20,15 @@ const AnalysisErrorModal: React.FC = () => {
disableBackdropClick
disableEscapeKeyDown
onClose={goBack}
- aria-label={t('analysis_error_modal.accessibility.window_title')}
+ aria-labelledby={'accessibility-title'}
classes={{
root: 'modal-root',
paper: 'modal-paper',
}}
>
+ <div id={'accessibility-title'}>
+ {t('analysis_error_modal.accessibility.window_title')}
+ </div>
<div className="em-root analyis-error-container">
<div className="em-content">
<div className="analyis-error-title text-20-bold">
diff --git a/src/components/Analysis/analysisError.scss b/src/components/Analysis/analysisError.scss
index 54c073411..f614d1e27 100644
--- a/src/components/Analysis/analysisError.scss
+++ b/src/components/Analysis/analysisError.scss
@@ -1,40 +1,44 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
-
-.analysis-root.black {
- .modal-overlay {
- .modal-close-button {
- display: none;
- }
- }
-}
-
-.analyis-error-container {
- border-radius: 4px;
- padding: 1.5rem 0.75rem;
- margin-bottom: 1rem;
- color: $grey-bright;
- text-align: center;
- .analyis-error-title {
- color: $gold-shadow;
- margin-bottom: 2rem;
- }
- .analyis-error-button {
- display: flex;
- justify-content: space-between;
- margin-top: 2rem;
- button {
- &.btn-highlight,
- &.btn-secondary-positive {
- width: 45%;
- margin-bottom: 0;
- }
- &.btn-secondary-positive {
- padding: 0.5rem 1rem;
- }
- &.btn-highlight {
- padding: 0.25rem 0.5rem;
- }
- }
- }
-}
+@import '../../styles/base/color';
+@import '../../styles/base/breakpoint';
+
+.analysis-root.black {
+ .modal-overlay {
+ .modal-close-button {
+ display: none;
+ }
+ }
+}
+
+.analyis-error-container {
+ border-radius: 4px;
+ padding: 1.5rem 0.75rem;
+ margin-bottom: 1rem;
+ color: $grey-bright;
+ text-align: center;
+ .analyis-error-title {
+ color: $gold-shadow;
+ margin-bottom: 2rem;
+ }
+ .analyis-error-button {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 2rem;
+ button {
+ &.btn-highlight,
+ &.btn-secondary-positive {
+ width: 45%;
+ margin-bottom: 0;
+ }
+ &.btn-secondary-positive {
+ padding: 0.5rem 1rem;
+ }
+ &.btn-highlight {
+ padding: 0.25rem 0.5rem;
+ }
+ }
+ }
+}
+
+#accessibility-title {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/components/Challenge/ChallengeNoFluidModal.tsx b/src/components/Challenge/ChallengeNoFluidModal.tsx
index 989d6ce40..614a3ccf5 100644
--- a/src/components/Challenge/ChallengeNoFluidModal.tsx
+++ b/src/components/Challenge/ChallengeNoFluidModal.tsx
@@ -21,12 +21,15 @@ const ChallengeNoFluidModal: React.FC<ChallengeNoFluidModalProps> = ({
disableBackdropClick
disableEscapeKeyDown
onClose={handleCloseClick}
- aria-label={t('challenge_no_fluid_modal.accessibility.window_title')}
+ aria-labelledby={'accessibility-title'}
classes={{
root: 'modal-root',
paper: 'modal-paper',
}}
>
+ <div id={'accessibility-title'}>
+ {t('challenge_no_fluid_modal.accessibility.window_title')}
+ </div>
<div className="noFluidModal">
<div className="no-fluid-title">
{t('challenge_no_fluid_modal.title')}
diff --git a/src/components/Challenge/challengeNoFluidModal.scss b/src/components/Challenge/challengeNoFluidModal.scss
index bcf627013..6afe50b68 100644
--- a/src/components/Challenge/challengeNoFluidModal.scss
+++ b/src/components/Challenge/challengeNoFluidModal.scss
@@ -33,3 +33,7 @@
}
}
}
+
+#accessibility-title {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/components/Connection/ModalGRDF.tsx b/src/components/Connection/ModalGRDF.tsx
index 2649b7544..3fbdafa04 100644
--- a/src/components/Connection/ModalGRDF.tsx
+++ b/src/components/Connection/ModalGRDF.tsx
@@ -36,12 +36,15 @@ const ModalGRDF: React.FC<ModalGRDFProps> = ({
disableBackdropClick
disableEscapeKeyDown
onClose={handleCloseClick}
- aria-label={t('auth.grdfgrandlyon.authModal.accessibility.window_title')}
+ aria-labelledby={'accessibility-title'}
classes={{
root: 'modal-root',
paper: 'modal-paper',
}}
>
+ <div id={'accessibility-title'}>
+ {t('auth.grdfgrandlyon.authModal.accessibility.window_title')}
+ </div>
<IconButton
aria-label={t(
'auth.grdfgrandlyon.authModal.accessibility.button_close'
diff --git a/src/components/Connection/modalGRDF.scss b/src/components/Connection/modalGRDF.scss
index 703f45081..d22775509 100644
--- a/src/components/Connection/modalGRDF.scss
+++ b/src/components/Connection/modalGRDF.scss
@@ -18,3 +18,7 @@
transition: all 300ms ease;
}
}
+
+#accessibility-title {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/components/Duel/DuelEmptyValueModal.tsx b/src/components/Duel/DuelEmptyValueModal.tsx
index e9b0bd9c8..b976362f4 100644
--- a/src/components/Duel/DuelEmptyValueModal.tsx
+++ b/src/components/Duel/DuelEmptyValueModal.tsx
@@ -30,12 +30,15 @@ const DuelEmptyValueModal: React.FC<DuelEmptyValueModalProps> = ({
<Dialog
open={open}
onClose={handleCloseClick}
- aria-label={t('duel_empty_value_modal.accessibility.window_title')}
+ aria-labelledby={'accessibility-title'}
classes={{
root: 'modal-root',
paper: 'modal-paper blue-border',
}}
>
+ <div id={'accessibility-title'}>
+ {t('duel_empty_value_modal.accessibility.window_title')}
+ </div>
<div className="modal-empty-value-root">
<Icon className="imgResult" icon={emptyIcon} size={208} />
<div className="text-28-normal-uppercase modal-empty-value-title">
diff --git a/src/components/Duel/DuelResultModal.tsx b/src/components/Duel/DuelResultModal.tsx
index 8bddbf7d5..adaae822b 100644
--- a/src/components/Duel/DuelResultModal.tsx
+++ b/src/components/Duel/DuelResultModal.tsx
@@ -42,12 +42,15 @@ const DuelResultModal: React.FC<DuelResultModalProps> = ({
<Dialog
open={open}
onClose={handleCloseClick}
- aria-label={t('duel_result_modal.accessibility.window_title')}
+ aria-labelledby={'accessibility-title'}
classes={{
root: 'modal-root',
paper: 'modal-paper blue-border',
}}
>
+ <div id={'accessibility-title'}>
+ {t('duel_result_modal.accessibility.window_title')}
+ </div>
<div className="duel-result-modal-root ">
<Icon
className="imgResult"
diff --git a/src/components/Duel/duelEmptyValueModal.scss b/src/components/Duel/duelEmptyValueModal.scss
index f5e917216..aedd0ae58 100644
--- a/src/components/Duel/duelEmptyValueModal.scss
+++ b/src/components/Duel/duelEmptyValueModal.scss
@@ -15,3 +15,7 @@
margin: 2rem 0.25rem 1.5rem;
}
}
+
+#accessibility-title {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/components/Duel/duelResultModal.scss b/src/components/Duel/duelResultModal.scss
index 28a988fa6..42ed6db9f 100644
--- a/src/components/Duel/duelResultModal.scss
+++ b/src/components/Duel/duelResultModal.scss
@@ -9,3 +9,7 @@
margin: 2rem 0.25rem 0.5rem;
}
}
+
+#accessibility-title {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/components/Ecogesture/EcogestureInfoModal.tsx b/src/components/Ecogesture/EcogestureInfoModal.tsx
index 6a36660a3..f346c70f6 100644
--- a/src/components/Ecogesture/EcogestureInfoModal.tsx
+++ b/src/components/Ecogesture/EcogestureInfoModal.tsx
@@ -21,12 +21,15 @@ const EcogestureInfoModal: React.FC<EcogestureInfoModalProps> = ({
<Dialog
open={open}
onClose={handleCloseClick}
- aria-label={t('ecogesture_info_modal.accessibility.window_title')}
+ aria-labelledby={'accessibility-title'}
classes={{
root: 'modal-root',
paper: 'modal-paper',
}}
>
+ <div id={'accessibility-title'}>
+ {t('ecogesture_info_modal.accessibility.window_title')}
+ </div>
<div className="info-header">
<Icon icon={HeaderQuestion} size={80} />
</div>
diff --git a/src/components/Ecogesture/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal.tsx
index 9d52eade5..5bef96c56 100644
--- a/src/components/Ecogesture/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal.tsx
@@ -63,16 +63,17 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
<Dialog
open={open}
onClose={handleCloseClick}
- aria-label={
- isAction
- ? t('ecogesture_modal.accessibility.window_title_action')
- : t('ecogesture_modal.accessibility.window_title_ecogesture')
- }
+ aria-labelledby={'accessibility-title'}
classes={{
root: 'modal-root',
paper: 'modal-paper no-padding blue-border',
}}
>
+ <div id={'accessibility-title'}>
+ {isAction
+ ? t('ecogesture_modal.accessibility.window_title_action')
+ : t('ecogesture_modal.accessibility.window_title_ecogesture')}
+ </div>
<IconButton
aria-label={t('ecogesture_modal.accessibility.button_close')}
className="modal-paper-close-button"
diff --git a/src/components/Ecogesture/ecogestureInfoModal.scss b/src/components/Ecogesture/ecogestureInfoModal.scss
index c54e5a3fe..a0d75f190 100644
--- a/src/components/Ecogesture/ecogestureInfoModal.scss
+++ b/src/components/Ecogesture/ecogestureInfoModal.scss
@@ -16,3 +16,7 @@
color: $grey-bright;
}
}
+
+#accessibility-title {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/components/Ecogesture/ecogestureModal.scss b/src/components/Ecogesture/ecogestureModal.scss
index ec332bd67..6a0b07182 100644
--- a/src/components/Ecogesture/ecogestureModal.scss
+++ b/src/components/Ecogesture/ecogestureModal.scss
@@ -129,3 +129,7 @@
margin: 1rem 0 1.5rem !important;
}
}
+
+#accessibility-title {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
index 29802cb8c..3beae7efb 100644
--- a/src/components/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -170,12 +170,15 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
disableBackdropClick
disableEscapeKeyDown
onClose={closeModal}
- aria-label={t('feedback.accessibility.window_title')}
+ aria-labelledby={'accessibility-title'}
classes={{
root: 'modal-root',
paper: 'modal-paper yellow-border',
}}
>
+ <div id={'accessibility-title'}>
+ {t('feedback.accessibility.window_title')}
+ </div>
<IconButton
aria-label={t('feedback.accessibility.button_close')}
className="modal-paper-close-button"
@@ -218,7 +221,9 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
</>
) : (
<>
- <div className="fb-header text-18-bold">{t('feedback.title')}</div>
+ <div id="title" className="fb-header text-18-bold">
+ {t('feedback.title')}
+ </div>
<form className="fb-content">
<label htmlFor="feedbackType" className="fb-label text-16-bold">
{t('feedback.type')}
diff --git a/src/components/Feedback/feedbackModal.scss b/src/components/Feedback/feedbackModal.scss
index e41fdb4bc..46234e06b 100644
--- a/src/components/Feedback/feedbackModal.scss
+++ b/src/components/Feedback/feedbackModal.scss
@@ -83,3 +83,7 @@
}
}
}
+
+#accessibility-title {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/components/Home/OldFluidDataModal.tsx b/src/components/Home/OldFluidDataModal.tsx
index 638133612..92a2c9dc1 100644
--- a/src/components/Home/OldFluidDataModal.tsx
+++ b/src/components/Home/OldFluidDataModal.tsx
@@ -53,12 +53,15 @@ const OldFluidDataModal: React.FC<OldFluidDataModalProps> = ({
<Dialog
open={open}
onClose={handleCloseClick}
- aria-label={t('old_fluid_data_modal.accessibility.window_title')}
+ aria-labelledby={'accessibility-title'}
classes={{
root: 'modal-root',
paper: 'modal-paper',
}}
>
+ <div id={'accessibility-title'}>
+ {t('old_fluid_data_modal.accessibility.window_title')}
+ </div>
<div className="od-content">
<div className="od-warning">
<Icon icon={WarnCross} size={40} />
diff --git a/src/components/Home/oldFluidDataModal.scss b/src/components/Home/oldFluidDataModal.scss
index b1742c2c9..9704583f2 100644
--- a/src/components/Home/oldFluidDataModal.scss
+++ b/src/components/Home/oldFluidDataModal.scss
@@ -1,50 +1,54 @@
-@import 'src/styles/base/color';
-
-.od-content {
- padding: 1.5rem;
- p {
- color: $grey-bright;
- }
- .od-warning {
- text-align: center;
- color: $grey-bright;
-
- p {
- margin: 1.125rem 0 2rem 0;
- color: $red-primary;
- }
- }
- .od-main {
- color: $grey-bright;
- }
- .od-konnectorsList {
- color: $gold-shadow;
- }
- .verifyState {
- .buttons {
- display: flex;
- justify-content: space-between;
- margin-top: 3rem;
- button {
- flex-basis: 48%;
- padding: 0.25rem 0.5rem;
- span:first-child {
- line-height: 1;
- }
- &:nth-child(1) {
- margin: 0 0.2rem 0 0;
- }
- &:nth-child(2) {
- margin: 0 0 0 0.2rem;
- }
- }
- }
- }
- .providerProblem {
- text-align: center;
- p,
- ul {
- text-align: left;
- }
- }
-}
+@import 'src/styles/base/color';
+
+.od-content {
+ padding: 1.5rem;
+ p {
+ color: $grey-bright;
+ }
+ .od-warning {
+ text-align: center;
+ color: $grey-bright;
+
+ p {
+ margin: 1.125rem 0 2rem 0;
+ color: $red-primary;
+ }
+ }
+ .od-main {
+ color: $grey-bright;
+ }
+ .od-konnectorsList {
+ color: $gold-shadow;
+ }
+ .verifyState {
+ .buttons {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 3rem;
+ button {
+ flex-basis: 48%;
+ padding: 0.25rem 0.5rem;
+ span:first-child {
+ line-height: 1;
+ }
+ &:nth-child(1) {
+ margin: 0 0.2rem 0 0;
+ }
+ &:nth-child(2) {
+ margin: 0 0 0 0.2rem;
+ }
+ }
+ }
+ }
+ .providerProblem {
+ text-align: center;
+ p,
+ ul {
+ text-align: left;
+ }
+ }
+}
+
+#accessibility-title {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/components/Konnector/KonnectorModal.tsx b/src/components/Konnector/KonnectorModal.tsx
index 999c156aa..c4c482387 100644
--- a/src/components/Konnector/KonnectorModal.tsx
+++ b/src/components/Konnector/KonnectorModal.tsx
@@ -61,12 +61,15 @@ const KonnectorModal: React.FC<KonnectorModalProps> = ({
disableBackdropClick
disableEscapeKeyDown
onClose={handleCloseClick}
- aria-label={t('konnector_modal.accessibility.window_title')}
+ aria-labelledby={'accessibility-title'}
classes={{
root: 'modal-root',
paper: 'modal-paper',
}}
>
+ <div id={'accessibility-title'}>
+ {t('konnector_modal.accessibility.window_title')}
+ </div>
<div className="kmodal-content">
{open && !state ? (
<>
diff --git a/src/components/Konnector/konnectorModal.scss b/src/components/Konnector/konnectorModal.scss
index 4233d0d97..670a58bb1 100644
--- a/src/components/Konnector/konnectorModal.scss
+++ b/src/components/Konnector/konnectorModal.scss
@@ -1,77 +1,81 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
-
-.kmodal-content {
- margin: 0.5rem 1.5rem;
- min-height: 12rem;
-
- @media #{$large-phone} {
- margin: 0.5rem 0;
- }
- .kmodal-content-text {
- color: $grey-bright;
- margin: 1rem;
- text-align: center;
- }
-
- .kmodal-waiting-text {
- align-items: center;
- display: flex;
- justify-content: center;
- margin: 1rem;
- min-height: 11.25rem;
- text-align: center;
-
- .kc-wait {
- margin-bottom: 2rem;
- }
-
- .waiting-text {
- display: none;
-
- &.show {
- animation-duration: 8s;
- animation-name: fadeIn;
- display: block;
- opacity: 0;
- }
- }
- }
-
- .kmodal-content-text-center {
- text-align: center;
- }
-
- .kmodal-info {
- margin: 1.5rem;
- text-align: center;
-
- .konnector-config {
- align-items: center;
- display: flex;
- flex-direction: column;
- justify-content: center;
- text-align: center;
-
- .kce-picto-txt {
- color: $red-primary;
- margin: 1.25rem;
- }
-
- .kcs-picto-txt {
- color: $multi-color;
- margin: 1.25rem;
- }
- }
- }
-}
-
-@keyframes fadeIn {
- 10%,
- 90% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
-}
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.kmodal-content {
+ margin: 0.5rem 1.5rem;
+ min-height: 12rem;
+
+ @media #{$large-phone} {
+ margin: 0.5rem 0;
+ }
+ .kmodal-content-text {
+ color: $grey-bright;
+ margin: 1rem;
+ text-align: center;
+ }
+
+ .kmodal-waiting-text {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ margin: 1rem;
+ min-height: 11.25rem;
+ text-align: center;
+
+ .kc-wait {
+ margin-bottom: 2rem;
+ }
+
+ .waiting-text {
+ display: none;
+
+ &.show {
+ animation-duration: 8s;
+ animation-name: fadeIn;
+ display: block;
+ opacity: 0;
+ }
+ }
+ }
+
+ .kmodal-content-text-center {
+ text-align: center;
+ }
+
+ .kmodal-info {
+ margin: 1.5rem;
+ text-align: center;
+
+ .konnector-config {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+
+ .kce-picto-txt {
+ color: $red-primary;
+ margin: 1.25rem;
+ }
+
+ .kcs-picto-txt {
+ color: $multi-color;
+ margin: 1.25rem;
+ }
+ }
+ }
+}
+
+#accessibility-title {
+ display: none;
+}
+
+@keyframes fadeIn {
+ 10%,
+ 90% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
diff --git a/src/components/Quiz/QuizExplanationModal.tsx b/src/components/Quiz/QuizExplanationModal.tsx
index 3a36e65db..15ea75514 100644
--- a/src/components/Quiz/QuizExplanationModal.tsx
+++ b/src/components/Quiz/QuizExplanationModal.tsx
@@ -39,12 +39,15 @@ const QuizExplanationModal: React.FC<QuizExplanationModalProps> = ({
<Dialog
open={open}
onClose={handleCloseClick}
- aria-label={t('quiz.accessibility.window_title')}
+ aria-labelledby={'accessibility-title'}
classes={{
root: 'modal-root',
paper: 'modal-paper',
}}
>
+ <div id={'accessibility-title'}>
+ {t('quiz.accessibility.window_title')}
+ </div>
<div className="quiz-modal-root">
{question && (
<>
diff --git a/src/components/Quiz/quizExplanationModal.scss b/src/components/Quiz/quizExplanationModal.scss
index 7bdcd6722..eb9a05c7a 100644
--- a/src/components/Quiz/quizExplanationModal.scss
+++ b/src/components/Quiz/quizExplanationModal.scss
@@ -32,4 +32,7 @@
}
}
+#accessibility-title {
+ display: none;
+}
diff --git a/src/components/Welcome/WelcomeModal.tsx b/src/components/Welcome/WelcomeModal.tsx
index dc17f327f..a83996268 100644
--- a/src/components/Welcome/WelcomeModal.tsx
+++ b/src/components/Welcome/WelcomeModal.tsx
@@ -22,12 +22,15 @@ const WelcomeModal: React.FC<WelcomeModalProps> = ({
disableBackdropClick
disableEscapeKeyDown
onClose={handleCloseClick}
- aria-label={t('welcome_modal.accessibility.title')}
+ aria-labelledby={'accessibility-title'}
classes={{
root: 'modal-root',
paper: 'modal-paper yellow-border',
}}
>
+ <div id={'accessibility-title'}>
+ {t('welcome_modal.accessibility.title')}
+ </div>
<div className="wm-header text-24-bold">
<span>{t('welcome_modal.title')}</span>
{instanceSettings.public_name ? (
diff --git a/src/components/Welcome/welcomeModal.scss b/src/components/Welcome/welcomeModal.scss
index 07e29c902..6c1309ccd 100644
--- a/src/components/Welcome/welcomeModal.scss
+++ b/src/components/Welcome/welcomeModal.scss
@@ -31,3 +31,7 @@
width: 88%;
margin: 1rem;
}
+
+#accessibility-title {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/targets/browser/index.tsx b/src/targets/browser/index.tsx
index 07d7d79d4..26b5c93ee 100644
--- a/src/targets/browser/index.tsx
+++ b/src/targets/browser/index.tsx
@@ -4,7 +4,7 @@
import '../../styles/index.scss'
import React from 'react'
-import { render } from 'react-dom'
+import ReactDOM, { render } from 'react-dom'
import { Client, CozyProvider } from 'cozy-client'
import { Provider } from 'react-redux'
import configureStore from 'store'
@@ -65,6 +65,8 @@ if ('serviceWorker' in navigator) {
}
if (module.hot) {
+ const axe = require('@axe-core/react')
+ axe(React, ReactDOM, 1000)
init()
module.hot.accept()
}
--
GitLab