diff --git a/src/components/Action/ActionModal.tsx b/src/components/Action/ActionModal.tsx
index 07819092464f26b180d0a695027d0b90b0a3f100..cfc32d6fab7eafc6d80647902f6b6340b9b14ccc 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 83712672112d74528079d025cd790fa90646496e..8daa3a4fbc0085fac1207bb915fbfecffbd05fb7 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 1d00e925195e39faa02466ef2c4581544b47eeda..014e6b2133b28067612a77a5868fd6188003cf5c 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 54c0734111143929ff8cf4ceb15b4c3da196724f..f614d1e27e5921e36bac65f08ee7b0458b74349c 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 989d6ce409d3496ee2392d39efe62a328a090448..614a3ccf5a85666c4c275f9bd406211a4ef8ccd6 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 bcf627013c46d5b9ce8f7ad8109dc11e6eb5dc25..6afe50b68b61a88da53b51ce27d2328a17f438c1 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 2649b7544664cf39a1aebbe54445e7379f1fa4df..3fbdafa04f60b0f30e7ac83d0dc0794a435aa8f0 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 703f45081562e58cc4daa06c34820f269444e889..d22775509d08e405703e9fdfd321d0fdad4a9c93 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 e9b0bd9c8b3c6d72c16b476a654f274f9042dd5f..b976362f4c54a4db9a8a689ba79b349cfaa39db0 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 8bddbf7d553c329d132ab7bdac8aa9e3994b78a8..adaae822b5ffe8bf41ef9cab7067184ddeb404cc 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 f5e9172167801afd048e6920cf3d0fccdc66f589..aedd0ae584572d3fe31404503a00e86b336c3075 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 28a988fa6b7b886f04c488f5afa946a9952e98ab..42ed6db9f9ee924108ccb8861a0acae269ae959c 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 6a36660a38c58b421b72b0862d5ddb10c9834008..f346c70f6fe42f6f72181a7effa826f9b233e771 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 9d52eade53ee17cd1de2e4ff5029d8ca91a6f90c..5bef96c56f95a2c1245aaaea8465d62f8517ddb8 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 c54e5a3fe6d04557f83e78d3f29770b4a31e9437..a0d75f190aaa696e39803c41e21f632ccae69ff2 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 ec332bd67bda03bce772145245e77d8ac1948e69..6a0b07182a582a57ce43b1b51c80e3605fa7e8b6 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 29802cb8cab46156549458b4e5c2a2a6bf5b0584..3beae7efbad208cb17f14c2fcdd9a7a6111e9762 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 e41fdb4bc2732b42edf47d1659c284791efe2fc8..46234e06b41c6a505e0e9c9825d74b8a6e5357cf 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 638133612ec6f4b2bd7b6b2e86448ae97fef7da0..92a2c9dc1cbbc08e915ac5c5b5ac6e5594e72176 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 b1742c2c9be1fcb449f7826b762d991343a2b980..9704583f22bf064cdabe9399e69855a6c30dc880 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 999c156aaa943c466a832a29a1cb4a53d30fa1c5..c4c482387b5f01ee55c7c9073fb41381df377c95 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 4233d0d973b0c8f144d3c0496decd1e2b7f6b900..670a58bb1cf76da2b12a2c1c6ee2a711fb5497e2 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 3a36e65db2e1f0dbc2cbeb577011c03b1eaaab82..15ea7551493985e7fafc1612c667e6361810c296 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 7bdcd672213f2ccc0bf1f462eee397028968faa5..eb9a05c7af1bccfdb24a7fddf675cce02f0e793c 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 dc17f327fcf5885bca8d917e23433744ada34901..a8399626862c1dcdec516626222d082a969aca2c 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 07e29c90247c56faaa0dfd517968fff495cf57dc..6c1309ccdbc227d2147b9e33a0765c7c56f26d43 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 07d7d79d476d96f4adfcab7c28ff478eb1dd6d2d..26b5c93ee55dfbf94b4052d06b774d70b0dcefb4 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()
}