From bbfa418c5ff74cbb7d80013a2bb722b821574f39 Mon Sep 17 00:00:00 2001
From: Pierre Ecarlat <pecarlat@grandlyon.com>
Date: Thu, 5 Sep 2024 15:18:00 +0000
Subject: [PATCH] feat(a11y): Add a focus style to components
---
.../TemperatureComparisonModal.spec.tsx.snap | 2 +-
.../TemperatureComparison.spec.tsx.snap | 4 +-
.../ElecHalfHourMonthlyAnalysis.spec.tsx.snap | 4 +-
.../__snapshots__/ElecInfoModal.spec.tsx.snap | 4 +-
.../MaxConsumptionCard.spec.tsx.snap | 4 +-
.../ProfileComparator/profileComparator.scss | 2 +-
.../ChallengeCardOnGoing.tsx | 4 +-
.../challengeCardOnGoing.scss | 3 +
.../__snapshots__/ChallengeView.spec.tsx.snap | 4 +-
.../CommonKit/IconButton/StyledIconButton.tsx | 11 +-
.../StyledIconButton.spec.tsx.snap | 2 +-
.../CommonKit/Switch/StyledSwitch.tsx | 4 +
.../ExpiredConsentModal.spec.tsx.snap | 2 +-
.../SgeConnectView.spec.tsx.snap | 14 +-
.../__snapshots__/SgeModalHint.spec.tsx.snap | 2 +-
.../EstimatedConsumptionModal.spec.tsx.snap | 2 +-
.../__snapshots__/NoDataModal.spec.tsx.snap | 2 +-
.../CustomPopupModal.spec.tsx.snap | 2 +-
.../__snapshots__/DateNavigator.spec.tsx.snap | 4 +-
.../__snapshots__/lastDuelModal.spec.tsx.snap | 2 +-
.../EcogestureInitModal.spec.tsx.snap | 2 +-
.../EcogestureList/ecogestureList.scss | 4 +
.../EcogestureResetModal.spec.tsx.snap | 2 +-
.../EcogestureSelectionModal.spec.tsx.snap | 2 +-
.../__snapshots__/FeedbackModal.spec.tsx.snap | 2 +-
.../TimeStepSelector/timeStepSelector.scss | 4 +
.../__snapshots__/CozyBar.spec.tsx.snap | 10 +-
.../Header/__snapshots__/Header.spec.tsx.snap | 4 +-
.../Options/Accessibility/Accessibility.tsx | 38 --
.../AccessibilityLink/AccessibilityLink.tsx | 27 +
.../exportDoneModal.spec.tsx.snap | 4 +-
.../exportLoadingModal.spec.tsx.snap | 2 +-
.../exportStartModal.spec.tsx.snap | 2 +-
.../Options/ExportData/exportData.scss | 1 -
src/components/Options/GCU/GCULink.tsx | 40 +-
.../GCU/__snapshots__/GCULink.spec.tsx.snap | 55 +-
src/components/Options/GCU/gcuLink.scss | 59 ---
src/components/Options/HelpLink/HelpLink.scss | 47 --
src/components/Options/HelpLink/HelpLink.tsx | 36 +-
.../Options/LegalNotice/LegalNoticeLink.tsx | 41 +-
.../LegalNoticeLink.spec.tsx.snap | 53 +-
.../Options/LegalNotice/legalNoticeLink.scss | 48 --
.../Options/MatomoOptOut/MatomoOptOut.tsx | 9 +-
.../__snapshots__/MatomoOptOut.spec.tsx.snap | 7 +-
.../Options/MatomoOptOut/matomoOptOut.scss | 24 -
src/components/Options/OptionsView.scss | 38 ++
src/components/Options/OptionsView.tsx | 25 +-
.../Options/ReportOptions/reportOptions.scss | 1 -
.../__snapshots__/OptionsView.spec.tsx.snap | 492 +++++++++---------
.../PartnerIssueModal.spec.tsx.snap | 2 +-
.../__snapshots__/CGUModal.spec.tsx.snap | 2 +-
.../LegalNoticeModal.spec.tsx.snap | 2 +-
.../__snapshots__/WelcomeModal.spec.tsx.snap | 2 +-
src/styles/base/_color.scss | 1 +
src/styles/components/_barchart.scss | 3 +-
src/styles/components/_buttons.scss | 4 +
src/styles/components/_expansion-panel.scss | 4 +
src/styles/components/_input.scss | 10 +-
src/styles/components/_link.scss | 4 +
59 files changed, 506 insertions(+), 685 deletions(-)
delete mode 100644 src/components/Options/Accessibility/Accessibility.tsx
create mode 100644 src/components/Options/AccessibilityLink/AccessibilityLink.tsx
delete mode 100644 src/components/Options/GCU/gcuLink.scss
delete mode 100644 src/components/Options/HelpLink/HelpLink.scss
delete mode 100644 src/components/Options/LegalNotice/legalNoticeLink.scss
delete mode 100644 src/components/Options/MatomoOptOut/matomoOptOut.scss
create mode 100644 src/components/Options/OptionsView.scss
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 28e9510e6..ae3860876 100644
--- a/src/components/Analysis/Comparison/TemperatureComparisonModal/__snapshots__/TemperatureComparisonModal.spec.tsx.snap
+++ b/src/components/Analysis/Comparison/TemperatureComparisonModal/__snapshots__/TemperatureComparisonModal.spec.tsx.snap
@@ -37,7 +37,7 @@ exports[`TemperatureComparisonModal component should be rendered correctly 1`] =
>
<button
aria-label="analysis.temperature_comparison.modal.close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Analysis/Comparison/__snapshots__/TemperatureComparison.spec.tsx.snap b/src/components/Analysis/Comparison/__snapshots__/TemperatureComparison.spec.tsx.snap
index aaed24d5e..c2588b10f 100644
--- a/src/components/Analysis/Comparison/__snapshots__/TemperatureComparison.spec.tsx.snap
+++ b/src/components/Analysis/Comparison/__snapshots__/TemperatureComparison.spec.tsx.snap
@@ -40,7 +40,7 @@ exports[`TemperatureComparison component should be rendered correctly with cold
>
<button
aria-label="analysis.temperature_comparison.info_button"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-3 info-icon"
+ class="MuiButtonBase-root MuiIconButton-root info-icon"
tabindex="0"
type="button"
>
@@ -105,7 +105,7 @@ exports[`TemperatureComparison component should be rendered correctly with hot r
>
<button
aria-label="analysis.temperature_comparison.info_button"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 info-icon"
+ class="MuiButtonBase-root MuiIconButton-root info-icon"
tabindex="0"
type="button"
>
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
index 3f664b184..fdd25bb41 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
@@ -54,7 +54,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
>
<button
aria-label="consumption.accessibility.button_previous_value"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 arrow-prev"
+ class="MuiButtonBase-root MuiIconButton-root arrow-prev"
tabindex="0"
type="button"
>
@@ -95,7 +95,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
</div>
<button
aria-label="consumption.accessibility.button_next_value"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 arrow-next"
+ class="MuiButtonBase-root MuiIconButton-root arrow-next"
tabindex="0"
type="button"
>
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
index 6d81eae0f..8de384b77 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`ElecInfoModal component should be rendered correctly with off-peak hour
</div>
<button
aria-label="elec_info_modal.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
@@ -143,7 +143,7 @@ exports[`ElecInfoModal component should be rendered correctly without off-peak h
</div>
<button
aria-label="elec_info_modal.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
index d27330fb3..4839bb349 100644
--- a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
+++ b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
@@ -25,7 +25,7 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
>
<button
aria-label="consumption.accessibility.button_previous_value"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 arrow-prev"
+ class="MuiButtonBase-root MuiIconButton-root arrow-prev"
tabindex="0"
type="button"
>
@@ -54,7 +54,7 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
</div>
<button
aria-label="consumption.accessibility.button_next_value"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 arrow-next"
+ class="MuiButtonBase-root MuiIconButton-root arrow-next"
tabindex="0"
type="button"
>
diff --git a/src/components/Analysis/ProfileComparator/profileComparator.scss b/src/components/Analysis/ProfileComparator/profileComparator.scss
index 369ab0598..266ca39ce 100644
--- a/src/components/Analysis/ProfileComparator/profileComparator.scss
+++ b/src/components/Analysis/ProfileComparator/profileComparator.scss
@@ -28,7 +28,7 @@
margin: 1rem 0;
}
div.expansion-panel-root {
- border: solid 2px $blue-grey;
+ border: solid 1px $blue-grey;
color: $blue-grey;
margin-block: 0 !important;
box-shadow: 0px 4px 16px 0px $black-shadow;
diff --git a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
index b1ea160cc..443595f6f 100644
--- a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
+++ b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
@@ -268,7 +268,9 @@ const ChallengeCardOnGoing = ({
<>
<div className="finalDuel result">
<span>{t('challenge.card.ongoing.result')}</span>
- <span>{t('challenge.card.ongoing.duelDone')}</span>
+ <span className="lowercase">
+ {t('challenge.card.ongoing.duelDone')}
+ </span>
</div>
<div className="notifChallenge">1</div>
</>,
diff --git a/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss b/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss
index 64325543a..9d1f4da02 100644
--- a/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss
+++ b/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss
@@ -157,6 +157,9 @@
font-size: 1rem;
}
}
+ .lowercase {
+ text-transform: lowercase;
+ }
}
}
}
diff --git a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
index 0f0c1a5cb..9461e866e 100644
--- a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
+++ b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
@@ -65,7 +65,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = `
>
<button
aria-label="challenge.accessibility.button_slider_previous"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
+ class="MuiButtonBase-root MuiIconButton-root"
tabindex="0"
type="button"
>
@@ -89,7 +89,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = `
</button>
<button
aria-label="challenge.accessibility.button_slider_next"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
+ class="MuiButtonBase-root MuiIconButton-root"
tabindex="0"
type="button"
>
diff --git a/src/components/CommonKit/IconButton/StyledIconButton.tsx b/src/components/CommonKit/IconButton/StyledIconButton.tsx
index b71760b5d..d67dd55fb 100644
--- a/src/components/CommonKit/IconButton/StyledIconButton.tsx
+++ b/src/components/CommonKit/IconButton/StyledIconButton.tsx
@@ -1,14 +1,7 @@
import IconButton, { IconButtonProps } from '@material-ui/core/IconButton'
-import { withStyles } from '@material-ui/core/styles'
import StyledIconProps from 'components/CommonKit/Icon/StyledIcon'
import React from 'react'
-const IconButtonBase = withStyles({
- root: {
- outline: 'none !important',
- },
-})(IconButton) as React.FC<IconButtonProps>
-
interface StyledIconButtonProps extends IconButtonProps {
icon: string
sized?: number
@@ -20,9 +13,9 @@ const StyledIconButton = ({
...props
}: StyledIconButtonProps) => {
return (
- <IconButtonBase {...props}>
+ <IconButton {...props}>
<StyledIconProps icon={icon} size={sized} />
- </IconButtonBase>
+ </IconButton>
)
}
diff --git a/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap b/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap
index 1b0375865..3a6db811c 100644
--- a/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap
+++ b/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap
@@ -3,7 +3,7 @@
exports[`StyledIconButton component test should render correctly StyledIconButton 1`] = `
<div>
<button
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
+ class="MuiButtonBase-root MuiIconButton-root"
tabindex="0"
type="button"
>
diff --git a/src/components/CommonKit/Switch/StyledSwitch.tsx b/src/components/CommonKit/Switch/StyledSwitch.tsx
index bd890d435..2e7b46a6d 100644
--- a/src/components/CommonKit/Switch/StyledSwitch.tsx
+++ b/src/components/CommonKit/Switch/StyledSwitch.tsx
@@ -20,6 +20,10 @@ const SwitchBase = withStyles({
backgroundColor: 'var(--multiColor)',
},
},
+ '&.Mui-focusVisible': {
+ outline: '2px solid #1976d2',
+ outlineOffset: '2px',
+ },
},
checked: {},
track: {
diff --git a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
index 100fa6d1f..83702bba2 100644
--- a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
+++ b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
</div>
<button
aria-label="consent_outdated.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index 35d1e2900..40c5b3007 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -25,7 +25,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
</div>
<button
aria-label="header.accessibility.button_open_feedbacks"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 header-feedbacks-button"
+ class="MuiButtonBase-root MuiIconButton-root header-feedbacks-button"
tabindex="0"
type="button"
>
@@ -125,10 +125,10 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
/>
<fieldset
aria-hidden="true"
- class="PrivateNotchedOutline-root-2 MuiOutlinedInput-notchedOutline"
+ class="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
>
<legend
- class="PrivateNotchedOutline-legendLabelled-4"
+ class="PrivateNotchedOutline-legendLabelled-3"
>
<span>
auth.enedissgegrandlyon.firstName
@@ -170,10 +170,10 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
/>
<fieldset
aria-hidden="true"
- class="PrivateNotchedOutline-root-2 MuiOutlinedInput-notchedOutline"
+ class="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
>
<legend
- class="PrivateNotchedOutline-legendLabelled-4"
+ class="PrivateNotchedOutline-legendLabelled-3"
>
<span>
auth.enedissgegrandlyon.lastName
@@ -220,10 +220,10 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
/>
<fieldset
aria-hidden="true"
- class="PrivateNotchedOutline-root-2 MuiOutlinedInput-notchedOutline"
+ class="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
>
<legend
- class="PrivateNotchedOutline-legendLabelled-4"
+ class="PrivateNotchedOutline-legendLabelled-3"
>
<span>
auth.enedissgegrandlyon.pdlLabel
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
index 335b16222..45adc444c 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`SgeModalHint component should be rendered correctly 1`] = `
</div>
<button
aria-label="auth.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
index 9d4da4b3e..6f79fffa9 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`EstimatedConsumptionModal component should render correctly 1`] = `
</div>
<button
aria-label="consumption_visualizer.modal.close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
index a15d8b061..c3145b931 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`NoDataModal component should render correctly 1`] = `
</div>
<button
aria-label="consumption_visualizer.modal.close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
index e83cba2c0..8acb6fa60 100644
--- a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
+++ b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`CustomPopupModal component should render correctly 1`] = `
</div>
<button
aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
index 3f7c74232..f56eb2383 100644
--- a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
+++ b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
@@ -9,7 +9,7 @@ exports[`DateNavigator component should be rendered correctly 1`] = `
>
<button
aria-label="consumption.accessibility.button_previous_value"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 date-navigator-button"
+ class="MuiButtonBase-root MuiIconButton-root date-navigator-button"
tabindex="0"
type="button"
>
@@ -47,7 +47,7 @@ exports[`DateNavigator component should be rendered correctly 1`] = `
</div>
<button
aria-label="consumption.accessibility.button_next_value"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 date-navigator-button"
+ class="MuiButtonBase-root MuiIconButton-root date-navigator-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
index 4897a8101..f24254679 100644
--- a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
+++ b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
@@ -42,7 +42,7 @@ exports[`lastDuelModal component should render correctly 1`] = `
>
<button
aria-label="last_duel_modal.close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
index 6f5526868..a9f9d0474 100644
--- a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`EcogestureInitModal component should render correctly when open is true
</div>
<button
aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Ecogesture/EcogestureList/ecogestureList.scss b/src/components/Ecogesture/EcogestureList/ecogestureList.scss
index 0380ee610..ae8518258 100644
--- a/src/components/Ecogesture/EcogestureList/ecogestureList.scss
+++ b/src/components/Ecogesture/EcogestureList/ecogestureList.scss
@@ -121,6 +121,10 @@ div.filter-menu {
&.item-active {
font-weight: 700;
}
+ &:focus-visible {
+ outline: 2px solid $blue-accessibility;
+ outline-offset: 2px;
+ }
}
.filter-menu-icon {
margin-left: auto;
diff --git a/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap b/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap
index dbb5c320e..c8e3570d5 100644
--- a/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`EcogestureResetModal component should be rendered correctly 1`] = `
</div>
<button
aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
index 313bf71d7..d73e5d4fc 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
</div>
<button
aria-label="ecogesture_selection.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
index c0ee001c3..905bfadd3 100644
--- a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
+++ b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`FeedbackModal component should render the component 1`] = `
</div>
<button
aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss b/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
index e08a8da85..d41cb3344 100644
--- a/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
+++ b/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
@@ -48,6 +48,10 @@
left: -14px;
top: -15px;
}
+ &:focus-visible {
+ outline: 2px solid $blue-accessibility;
+ outline-offset: 2px;
+ }
}
.text {
position: relative;
diff --git a/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap b/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap
index 62521bfb1..f793b20f4 100644
--- a/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap
+++ b/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap
@@ -13,7 +13,7 @@ exports[`CozyBar component should be rendered correctly without without left arr
</div>
<button
aria-label="header.accessibility.button_open_feedbacks"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+ class="MuiButtonBase-root MuiIconButton-root cv-button"
tabindex="0"
type="button"
>
@@ -42,7 +42,7 @@ exports[`CozyBar component should test displayBackArrow should call backFunction
<div>
<button
aria-label="header.accessibility.button_back"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-3 cv-button"
+ class="MuiButtonBase-root MuiIconButton-root cv-button"
tabindex="0"
type="button"
>
@@ -75,7 +75,7 @@ exports[`CozyBar component should test displayBackArrow should call backFunction
</div>
<button
aria-label="header.accessibility.button_open_feedbacks"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-3 cv-button"
+ class="MuiButtonBase-root MuiIconButton-root cv-button"
tabindex="0"
type="button"
>
@@ -104,7 +104,7 @@ exports[`CozyBar component should test displayBackArrow should call navigate(-1)
<div>
<button
aria-label="header.accessibility.button_back"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 cv-button"
+ class="MuiButtonBase-root MuiIconButton-root cv-button"
tabindex="0"
type="button"
>
@@ -137,7 +137,7 @@ exports[`CozyBar component should test displayBackArrow should call navigate(-1)
</div>
<button
aria-label="header.accessibility.button_open_feedbacks"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 cv-button"
+ class="MuiButtonBase-root MuiIconButton-root cv-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Header/__snapshots__/Header.spec.tsx.snap b/src/components/Header/__snapshots__/Header.spec.tsx.snap
index 10fd9d80a..2b060bac4 100644
--- a/src/components/Header/__snapshots__/Header.spec.tsx.snap
+++ b/src/components/Header/__snapshots__/Header.spec.tsx.snap
@@ -21,7 +21,7 @@ exports[`Header component should be rendered correctly on desktop 1`] = `
</div>
<button
aria-label="header.accessibility.button_open_feedbacks"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 header-feedbacks-button"
+ class="MuiButtonBase-root MuiIconButton-root header-feedbacks-button"
tabindex="0"
type="button"
>
@@ -74,7 +74,7 @@ exports[`Header component should be rendered correctly on mobile 1`] = `
</div>
<button
aria-label="header.accessibility.button_open_feedbacks"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 header-feedbacks-button"
+ class="MuiButtonBase-root MuiIconButton-root header-feedbacks-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Options/Accessibility/Accessibility.tsx b/src/components/Options/Accessibility/Accessibility.tsx
deleted file mode 100644
index 383cef8c7..000000000
--- a/src/components/Options/Accessibility/Accessibility.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import Link from '@material-ui/core/Link'
-import AccessibilityIcon from 'assets/icons/ico/accessibility.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React from 'react'
-import '../GCU/gcuLink.scss'
-
-const Accessibility = () => {
- const { t } = useI18n()
- return (
- <div className="gcu-link-root">
- <div className="gcu-link-content">
- <Link
- className="gcu-link-card-link"
- href="https://ecolyo.com/accessibilite.html"
- target="_blank"
- >
- <div className="card">
- <div className="gcu-link-card">
- <div className="gcu-link-card-content">
- <StyledIcon
- className="gcu-link-card-content-icon"
- icon={AccessibilityIcon}
- size={42}
- />
- <div className="gcu-link-card-content-title">
- {t('common.title_accessibility')}
- </div>
- </div>
- </div>
- </div>
- </Link>
- </div>
- </div>
- )
-}
-
-export default Accessibility
diff --git a/src/components/Options/AccessibilityLink/AccessibilityLink.tsx b/src/components/Options/AccessibilityLink/AccessibilityLink.tsx
new file mode 100644
index 000000000..ba304a0c0
--- /dev/null
+++ b/src/components/Options/AccessibilityLink/AccessibilityLink.tsx
@@ -0,0 +1,27 @@
+import AccessibilityIcon from 'assets/icons/ico/accessibility.svg'
+import StyledCard from 'components/CommonKit/Card/StyledCard'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+import '../OptionsView.scss'
+
+const AccessibilityLink = () => {
+ const { t } = useI18n()
+
+ const goToAccessibility = () => {
+ window.open('https://ecolyo.com/accessibilite.html')
+ }
+
+ return (
+ <div className="styled-card-root">
+ <div className="styled-card-content">
+ <StyledCard onClick={goToAccessibility}>
+ <StyledIcon icon={AccessibilityIcon} size={38} />
+ {t('common.title_accessibility')}
+ </StyledCard>
+ </div>
+ </div>
+ )
+}
+
+export default AccessibilityLink
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 afc4719f7..a057c5370 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
@@ -42,7 +42,7 @@ exports[`exportDoneModal component should be rendered correctly 1`] = `
>
<button
aria-label="export.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
@@ -158,7 +158,7 @@ exports[`exportDoneModal component should display error message 1`] = `
>
<button
aria-label="export.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
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 87ed15eef..2f9b5cf5f 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
@@ -42,7 +42,7 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
>
<button
aria-label="export.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
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 ceeae77c5..8d325403f 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
@@ -42,7 +42,7 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
>
<button
aria-label="export.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Options/ExportData/exportData.scss b/src/components/Options/ExportData/exportData.scss
index 38965f5bd..416f123b3 100644
--- a/src/components/Options/ExportData/exportData.scss
+++ b/src/components/Options/ExportData/exportData.scss
@@ -10,7 +10,6 @@ div.expansion-panel-root.Mui-expanded:last-child {
flex-direction: column;
align-items: center;
justify-content: center;
- margin-top: 0.5rem;
padding: 0 1.5rem;
.export-option-content {
diff --git a/src/components/Options/GCU/GCULink.tsx b/src/components/Options/GCU/GCULink.tsx
index bb43da236..ec9ad5a5c 100644
--- a/src/components/Options/GCU/GCULink.tsx
+++ b/src/components/Options/GCU/GCULink.tsx
@@ -1,36 +1,26 @@
-import Link from '@material-ui/core/Link'
import GCUIcon from 'assets/icons/ico/gcu.svg'
+import StyledCard from 'components/CommonKit/Card/StyledCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React from 'react'
-import { Link as RouterLink } from 'react-router-dom'
-import './gcuLink.scss'
+import { useNavigate } from 'react-router-dom'
+import '../OptionsView.scss'
const GCULink = () => {
const { t } = useI18n()
+ const navigate = useNavigate()
+
+ const goToGCU = () => {
+ navigate(`/options/gcu`)
+ }
+
return (
- <div className="gcu-link-root">
- <div className="gcu-link-content">
- <Link
- className="gcu-link-card-link"
- component={RouterLink}
- to="/options/gcu"
- >
- <div className="card">
- <div className="gcu-link-card">
- <div className="gcu-link-card-content">
- <StyledIcon
- className="gcu-link-card-content-icon"
- icon={GCUIcon}
- size={42}
- />
- <div className="gcu-link-card-content-title">
- {t('common.title_gcu')}
- </div>
- </div>
- </div>
- </div>
- </Link>
+ <div className="styled-card-root">
+ <div className="styled-card-content">
+ <StyledCard onClick={goToGCU}>
+ <StyledIcon icon={GCUIcon} size={38} />
+ {t('common.title_gcu')}
+ </StyledCard>
</div>
</div>
)
diff --git a/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap b/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap
index 915df297b..a2e75eca8 100644
--- a/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap
+++ b/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap
@@ -3,48 +3,43 @@
exports[`LegalNoticeLink component should be rendered correctly 1`] = `
<div>
<div
- class="legal-notice-root"
+ class="styled-card-root"
>
<div
- class="legal-notice-content"
+ class="styled-card-content"
>
<div
- class="legal-notice-header text-16-normal-uppercase"
+ class="styled-card-header text-16-normal-uppercase"
>
legal.title_legal
</div>
- <a
- class="MuiTypography-root MuiLink-root MuiLink-underlineHover legal-notice-card-link MuiTypography-colorPrimary"
- href="/options/legalnotice"
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined"
+ tabindex="0"
+ type="button"
>
<div
- class="card"
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
- <div
- class="legal-notice-card"
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="38"
+ width="38"
>
- <div
- class="legal-notice-card-content"
- >
- <svg
- aria-hidden="true"
- class="legal-notice-card-content-icon styles__icon___23x3R"
- height="42"
- width="42"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <div
- class="legal-notice-card-content-title"
- >
- legal.read_legal
- </div>
- </div>
- </div>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ legal.read_legal
</div>
- </a>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
</div>
</div>
diff --git a/src/components/Options/GCU/gcuLink.scss b/src/components/Options/GCU/gcuLink.scss
deleted file mode 100644
index 3a88a80d9..000000000
--- a/src/components/Options/GCU/gcuLink.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@import 'src/styles/base/color';
-
-.gcu-link-root {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- color: $white;
- padding: 0 1.5rem 0;
- margin-top: 0.5rem;
- .gcu-link-header {
- margin-bottom: 1.25rem;
- }
- .gcu-link-content {
- p {
- color: $white;
- }
- a {
- color: $white;
- text-decoration: none;
- }
- li {
- margin: 1rem 0;
- }
- h2 {
- color: $white;
- }
- h3 {
- color: $white;
- margin: 2.5rem 0 1rem;
- }
- .ln-contact {
- color: $multi-color;
- }
- max-width: 45.75rem;
- width: 100%;
- }
-}
-
-.gcu-link-card-link {
- color: black;
-}
-.gcu-link-card {
- display: flex;
- flex-direction: row;
- margin: -0.75rem 0;
- width: 100%;
- .gcu-link-card-content {
- display: flex;
- flex-direction: row;
- .gcu-link-card-content-icon {
- margin: 0.5rem 0;
- }
- .gcu-link-card-content-title {
- margin: 0 1rem;
- align-self: center;
- }
- }
-}
diff --git a/src/components/Options/HelpLink/HelpLink.scss b/src/components/Options/HelpLink/HelpLink.scss
deleted file mode 100644
index 453d742a2..000000000
--- a/src/components/Options/HelpLink/HelpLink.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-@import 'src/styles/base/color';
-
-.help-root {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 0 1.5rem;
- margin-top: 2rem;
- .help-content {
- max-width: 45.75rem;
- width: 100%;
- a {
- color: $white;
- text-decoration: none;
- }
-
- .help-header {
- color: $grey-bright;
- margin-bottom: 1rem;
- }
- }
-}
-
-.help-card-link {
- color: $white;
- cursor: pointer;
-}
-.help-card {
- display: flex;
- flex-direction: row;
- margin: -0.75rem 0;
- width: 100%;
- .help-card-content {
- display: flex;
- flex-direction: row;
- .help-card-content-icon {
- margin: 0.5rem 0;
- min-width: 42px;
- }
- .help-card-content-title {
- margin: 0 1rem;
- align-self: center;
- text-decoration: none;
- }
- }
-}
diff --git a/src/components/Options/HelpLink/HelpLink.tsx b/src/components/Options/HelpLink/HelpLink.tsx
index 864a1a7bb..8f298ab0a 100644
--- a/src/components/Options/HelpLink/HelpLink.tsx
+++ b/src/components/Options/HelpLink/HelpLink.tsx
@@ -1,44 +1,26 @@
-import Link from '@material-ui/core/Link'
import QuestionMarkIcon from 'assets/icons/ico/questionMark.svg'
+import StyledCard from 'components/CommonKit/Card/StyledCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React from 'react'
-import { Link as RouterLink } from 'react-router-dom'
import { useAppDispatch } from 'store/hooks'
import { openFeedbackModal } from 'store/modal/modal.slice'
-import './HelpLink.scss'
+import '../OptionsView.scss'
const HelpLink = () => {
const { t } = useI18n()
const dispatch = useAppDispatch()
return (
- <div className="help-root">
- <div className="help-content">
- <div className="help-header text-16-normal-uppercase">
+ <div className="styled-card-root">
+ <div className="styled-card-content">
+ <div className="styled-card-header text-16-normal-uppercase">
{t('help.title_help')}
</div>
- <Link
- className="help-card-link"
- component={RouterLink}
- onClick={() => dispatch(openFeedbackModal(true))}
- to=""
- >
- <div className="card">
- <div className="help-card">
- <div className="help-card-content">
- <StyledIcon
- className="help-card-content-icon"
- icon={QuestionMarkIcon}
- size={42}
- />
- <div className="help-card-content-title">
- {t('help.read_help')}
- </div>
- </div>
- </div>
- </div>
- </Link>
+ <StyledCard onClick={() => dispatch(openFeedbackModal(true))}>
+ <StyledIcon icon={QuestionMarkIcon} size={38} />
+ {t('help.read_help')}
+ </StyledCard>
</div>
</div>
)
diff --git a/src/components/Options/LegalNotice/LegalNoticeLink.tsx b/src/components/Options/LegalNotice/LegalNoticeLink.tsx
index e158282f8..9b7e1adfc 100644
--- a/src/components/Options/LegalNotice/LegalNoticeLink.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeLink.tsx
@@ -1,40 +1,29 @@
-import Link from '@material-ui/core/Link'
import LegalNoticeIcon from 'assets/icons/ico/legal-notice.svg'
+import StyledCard from 'components/CommonKit/Card/StyledCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React from 'react'
-import { Link as RouterLink } from 'react-router-dom'
-import './legalNoticeLink.scss'
+import { useNavigate } from 'react-router-dom'
+import '../OptionsView.scss'
const LegalNoticeLink = () => {
const { t } = useI18n()
+ const navigate = useNavigate()
+
+ const goToLegalNotice = () => {
+ navigate(`/options/legalnotice`)
+ }
return (
- <div className="legal-notice-root">
- <div className="legal-notice-content">
- <div className="legal-notice-header text-16-normal-uppercase">
+ <div className="styled-card-root">
+ <div className="styled-card-content">
+ <div className="styled-card-header text-16-normal-uppercase">
{t('legal.title_legal')}
</div>
- <Link
- className="legal-notice-card-link"
- component={RouterLink}
- to="/options/legalnotice"
- >
- <div className="card">
- <div className="legal-notice-card">
- <div className="legal-notice-card-content">
- <StyledIcon
- className="legal-notice-card-content-icon"
- icon={LegalNoticeIcon}
- size={42}
- />
- <div className="legal-notice-card-content-title">
- {t('legal.read_legal')}
- </div>
- </div>
- </div>
- </div>
- </Link>
+ <StyledCard onClick={goToLegalNotice}>
+ <StyledIcon icon={LegalNoticeIcon} size={38} />
+ {t('legal.read_legal')}
+ </StyledCard>
</div>
</div>
)
diff --git a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
index f75c9392a..026de87e1 100644
--- a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
+++ b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
@@ -3,43 +3,38 @@
exports[`GCULink component should be rendered correctly 1`] = `
<div>
<div
- class="gcu-link-root"
+ class="styled-card-root"
>
<div
- class="gcu-link-content"
+ class="styled-card-content"
>
- <a
- class="MuiTypography-root MuiLink-root MuiLink-underlineHover gcu-link-card-link MuiTypography-colorPrimary"
- href="/options/gcu"
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined"
+ tabindex="0"
+ type="button"
>
<div
- class="card"
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
- <div
- class="gcu-link-card"
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="38"
+ width="38"
>
- <div
- class="gcu-link-card-content"
- >
- <svg
- aria-hidden="true"
- class="gcu-link-card-content-icon styles__icon___23x3R"
- height="42"
- width="42"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <div
- class="gcu-link-card-content-title"
- >
- common.title_gcu
- </div>
- </div>
- </div>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ common.title_gcu
</div>
- </a>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
</div>
</div>
diff --git a/src/components/Options/LegalNotice/legalNoticeLink.scss b/src/components/Options/LegalNotice/legalNoticeLink.scss
deleted file mode 100644
index c6eb9a42f..000000000
--- a/src/components/Options/LegalNotice/legalNoticeLink.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@import 'src/styles/base/breakpoint';
-@import 'src/styles/base/color';
-
-// LegalContainer
-.legal-notice-root {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- color: $white;
- padding: 0 1.5rem;
- margin-top: 2rem;
- .legal-notice-header {
- color: $grey-bright;
- margin-bottom: 1rem;
- }
- .legal-notice-content {
- max-width: 45.75rem;
- width: 100%;
- @media #{$large-phone} {
- width: 100%;
- }
- }
-}
-.legal-notice-card-link {
- color: black;
-}
-.legal-notice-card {
- display: flex;
- flex-direction: row;
- margin: -0.75rem 0;
- width: 100%;
- @media #{$large-phone} {
- width: 100%;
- }
- .legal-notice-card-content {
- display: flex;
- flex-direction: row;
- .legal-notice-card-content-icon {
- margin: 0.5rem 0;
- }
- .legal-notice-card-content-title {
- margin: 0 1rem;
- align-self: center;
- color: white;
- }
- }
-}
diff --git a/src/components/Options/MatomoOptOut/MatomoOptOut.tsx b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
index 3589de622..0a96ad0a5 100644
--- a/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
+++ b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
@@ -1,6 +1,6 @@
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React from 'react'
-import './matomoOptOut.scss'
+import '../OptionsView.scss'
declare let __PIWIK_TRACKER_URL__: string
@@ -9,14 +9,15 @@ const MatomoOptOut = () => {
const baseUrl = __PIWIK_TRACKER_URL__
return (
- <div className="matomo-opt-out-container">
- <div className="matomo-opt-out">
- <div className="opt-out-header text-16-normal-uppercase">
+ <div className="styled-card-root">
+ <div className="styled-card-content">
+ <div className="styled-card-header text-16-normal-uppercase">
{t('matomo.matomo_title')}
</div>
<iframe
title="opt-out"
style={{ height: '250px' }}
+ className="matomo-content"
src={`${baseUrl}index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif`}
/>
</div>
diff --git a/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap b/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
index 4e821bbf7..f9b02a664 100644
--- a/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
+++ b/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
@@ -3,17 +3,18 @@
exports[`MatomoOptOut component should be rendered correctly 1`] = `
<div>
<div
- class="matomo-opt-out-container"
+ class="styled-card-root"
>
<div
- class="matomo-opt-out"
+ class="styled-card-content"
>
<div
- class="opt-out-header text-16-normal-uppercase"
+ class="styled-card-header text-16-normal-uppercase"
>
matomo.matomo_title
</div>
<iframe
+ class="matomo-content"
src="http://localhost:9800/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif"
style="height: 250px;"
title="opt-out"
diff --git a/src/components/Options/MatomoOptOut/matomoOptOut.scss b/src/components/Options/MatomoOptOut/matomoOptOut.scss
deleted file mode 100644
index 0c4754fbe..000000000
--- a/src/components/Options/MatomoOptOut/matomoOptOut.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/typo-variables';
-
-.matomo-opt-out-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 0 1.5rem;
- margin: 2rem 0;
-
- .matomo-opt-out {
- margin: 0 auto;
- max-width: 45.75rem;
- width: 100%;
- .opt-out-header {
- color: $grey-bright;
- }
-
- * {
- font-family: $text-font;
- }
- }
-}
diff --git a/src/components/Options/OptionsView.scss b/src/components/Options/OptionsView.scss
new file mode 100644
index 000000000..9cfe87ecc
--- /dev/null
+++ b/src/components/Options/OptionsView.scss
@@ -0,0 +1,38 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/typo-variables';
+
+.options-root {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+}
+
+.info-links {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.styled-card-root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0 1.5rem;
+
+ .styled-card-content {
+ max-width: 45.75rem;
+ width: 100%;
+
+ .styled-card-header {
+ color: $grey-bright;
+ margin-bottom: 1rem;
+ }
+
+ .matomo-content {
+ * {
+ font-family: $text-font;
+ }
+ }
+ }
+}
diff --git a/src/components/Options/OptionsView.tsx b/src/components/Options/OptionsView.tsx
index efe08aa6f..6a6c1962c 100644
--- a/src/components/Options/OptionsView.tsx
+++ b/src/components/Options/OptionsView.tsx
@@ -4,12 +4,13 @@ import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React from 'react'
-import Accessibility from './Accessibility/Accessibility'
+import AccessibilityLink from './AccessibilityLink/AccessibilityLink'
import ExportData from './ExportData/ExportData'
import GCULink from './GCU/GCULink'
import HelpLink from './HelpLink/HelpLink'
import LegalNoticeLink from './LegalNotice/LegalNoticeLink'
import MatomoOptOut from './MatomoOptOut/MatomoOptOut'
+import './OptionsView.scss'
import ProfileTypeOptions from './ProfileTypeOptions/ProfileTypeOptions'
import ReportOptions from './ReportOptions/ReportOptions'
import Version from './Version/Version'
@@ -25,14 +26,20 @@ const OptionsView = () => {
<CozyBar titleKey="common.title_options" />
<Header desktopTitleKey="common.title_options" />
<Content>
- <ProfileTypeOptions />
- <ExportData />
- <ReportOptions />
- <HelpLink />
- <LegalNoticeLink />
- <GCULink />
- <Accessibility />
- <MatomoOptOut />
+ <div className="options-root">
+ <div>
+ <ProfileTypeOptions />
+ <ExportData />
+ </div>
+ <ReportOptions />
+ <HelpLink />
+ <div className="info-links">
+ <LegalNoticeLink />
+ <GCULink />
+ <AccessibilityLink />
+ </div>
+ <MatomoOptOut />
+ </div>
<div className="parameters-logos">
<img src={logos} alt={t(`common.funders_logo`)} />
</div>
diff --git a/src/components/Options/ReportOptions/reportOptions.scss b/src/components/Options/ReportOptions/reportOptions.scss
index 58ab12b6b..aa8cd00d1 100644
--- a/src/components/Options/ReportOptions/reportOptions.scss
+++ b/src/components/Options/ReportOptions/reportOptions.scss
@@ -7,7 +7,6 @@
align-items: center;
justify-content: center;
padding: 0 1.5rem;
- margin-top: 2rem;
.report-option-content {
max-width: 45.75rem;
width: 100%;
diff --git a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
index eae45e01e..135c90533 100644
--- a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
+++ b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
@@ -10,139 +10,145 @@ exports[`OptionsView component should be rendered correctly 1`] = `
/>
<mock-content>
<div
- class="profile-type-root"
+ class="options-root"
>
- <div
- class="profile-type-content"
- >
- <div
- class="head text-16-normal-uppercase"
- >
- profile_type.title_profile
- </div>
- <button
- class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 profile-link"
- tabindex="0"
- type="button"
- >
- <div
- class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
- >
- <svg
- aria-hidden="true"
- class="profile-icon styles__icon___23x3R"
- height="42"
- width="42"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <span
- class="link-label text-16-normal"
- >
- profile_type.read_profile
- </span>
- </div>
- <span
- class="MuiCardActionArea-focusHighlight"
- />
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- <div
- class="export-option-root"
- >
- <div
- class="export-option-content"
- >
+ <div>
<div
- class="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
+ class="profile-type-root"
>
<div
- aria-disabled="false"
- aria-expanded="false"
- aria-label="profile_type.accessibility.button_toggle_export"
- class="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary"
- role="button"
- tabindex="0"
+ class="profile-type-content"
>
<div
- class="MuiAccordionSummary-content expansion-panel-content"
+ class="head text-16-normal-uppercase"
>
- <svg
- aria-hidden="true"
- class="export-icon styles__icon___23x3R"
- height="42"
- width="42"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <div
- class="text-16-normal accordion-title"
- >
- export.title_export
- </div>
+ profile_type.title_profile
</div>
- <div
- aria-disabled="false"
- aria-hidden="true"
- class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 profile-link"
+ tabindex="0"
+ type="button"
>
- <span
- class="MuiIconButton-label"
+ <div
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
<svg
aria-hidden="true"
- class="accordion-icon styles__icon___23x3R"
- height="16"
- width="16"
+ class="profile-icon styles__icon___23x3R"
+ height="42"
+ width="42"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
- </span>
+ <span
+ class="link-label text-16-normal"
+ >
+ profile_type.read_profile
+ </span>
+ </div>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
<span
class="MuiTouchRipple-root"
/>
- </div>
+ </button>
</div>
+ </div>
+ <div
+ class="export-option-root"
+ >
<div
- class="MuiCollapse-root MuiCollapse-hidden"
- style="min-height: 0px;"
+ class="export-option-content"
>
<div
- class="MuiCollapse-wrapper"
+ class="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
>
<div
- class="MuiCollapse-wrapperInner"
+ aria-disabled="false"
+ aria-expanded="false"
+ aria-label="profile_type.accessibility.button_toggle_export"
+ class="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary"
+ role="button"
+ tabindex="0"
>
<div
- role="region"
+ class="MuiAccordionSummary-content expansion-panel-content"
>
+ <svg
+ aria-hidden="true"
+ class="export-icon styles__icon___23x3R"
+ height="42"
+ width="42"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- class="MuiAccordionDetails-root expansion-panel-details"
+ class="text-16-normal accordion-title"
>
- <div
- class="text-15-normal grey"
- >
- export.text1
- </div>
- <div
- class="text-16-bold"
+ export.title_export
+ </div>
+ </div>
+ <div
+ aria-disabled="false"
+ aria-hidden="true"
+ class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ aria-hidden="true"
+ class="accordion-icon styles__icon___23x3R"
+ height="16"
+ width="16"
>
- export.fluid_select
- </div>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </div>
+ </div>
+ <div
+ class="MuiCollapse-root MuiCollapse-hidden"
+ style="min-height: 0px;"
+ >
+ <div
+ class="MuiCollapse-wrapper"
+ >
+ <div
+ class="MuiCollapse-wrapperInner"
+ >
<div
- class="text-15-normal grey"
+ role="region"
>
- export.no_data
+ <div
+ class="MuiAccordionDetails-root expansion-panel-details"
+ >
+ <div
+ class="text-15-normal grey"
+ >
+ export.text1
+ </div>
+ <div
+ class="text-16-bold"
+ >
+ export.fluid_select
+ </div>
+ <div
+ class="text-15-normal grey"
+ >
+ export.no_data
+ </div>
+ </div>
</div>
</div>
</div>
@@ -151,248 +157,232 @@ exports[`OptionsView component should be rendered correctly 1`] = `
</div>
</div>
</div>
- </div>
- <div
- class="report-option-root"
- >
<div
- class="report-option-content"
+ class="report-option-root"
>
<div
- class="reportCard"
+ class="report-option-content"
>
<div
- class="row"
+ class="reportCard"
>
- <span
- class="MuiSwitch-root WithStyles(ForwardRef(Switch))-root-3"
+ <div
+ class="row"
>
<span
- aria-disabled="false"
- class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-7 MuiSwitch-switchBase WithStyles(ForwardRef(Switch))-switchBase-4 MuiSwitch-colorSecondary PrivateSwitchBase-checked-8 Mui-checked WithStyles(ForwardRef(Switch))-checked-5"
+ class="MuiSwitch-root WithStyles(ForwardRef(Switch))-root-3"
>
<span
- class="MuiIconButton-label"
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-7 MuiSwitch-switchBase WithStyles(ForwardRef(Switch))-switchBase-4 MuiSwitch-colorSecondary PrivateSwitchBase-checked-8 Mui-checked WithStyles(ForwardRef(Switch))-checked-5"
>
- <input
- checked=""
- class="PrivateSwitchBase-input-10 MuiSwitch-input"
- type="checkbox"
- value=""
- />
<span
- class="MuiSwitch-thumb"
+ class="MuiIconButton-label"
+ >
+ <input
+ checked=""
+ class="PrivateSwitchBase-input-10 MuiSwitch-input"
+ type="checkbox"
+ value=""
+ />
+ <span
+ class="MuiSwitch-thumb"
+ />
+ </span>
+ <span
+ class="MuiTouchRipple-root"
/>
</span>
<span
- class="MuiTouchRipple-root"
+ class="MuiSwitch-track WithStyles(ForwardRef(Switch))-track-6"
/>
</span>
<span
- class="MuiSwitch-track WithStyles(ForwardRef(Switch))-track-6"
- />
- </span>
+ class="text-16-normal-uppercase"
+ >
+ profile.report.title_bilan
+ </span>
+ </div>
<span
- class="text-16-normal-uppercase"
+ class="text-16-normal"
>
- profile.report.title_bilan
+ profile.report.switch_label_bilan
</span>
</div>
- <span
- class="text-16-normal"
- >
- profile.report.switch_label_bilan
- </span>
</div>
</div>
- </div>
- <div
- class="help-root"
- >
<div
- class="help-content"
+ class="styled-card-root"
>
<div
- class="help-header text-16-normal-uppercase"
- >
- help.title_help
- </div>
- <a
- class="MuiTypography-root MuiLink-root MuiLink-underlineHover help-card-link MuiTypography-colorPrimary"
- href="/"
+ class="styled-card-content"
>
<div
- class="card"
+ class="styled-card-header text-16-normal-uppercase"
+ >
+ help.title_help
+ </div>
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined"
+ tabindex="0"
+ type="button"
>
<div
- class="help-card"
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
- <div
- class="help-card-content"
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="38"
+ width="38"
>
- <svg
- aria-hidden="true"
- class="help-card-content-icon styles__icon___23x3R"
- height="42"
- width="42"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <div
- class="help-card-content-title"
- >
- help.read_help
- </div>
- </div>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ help.read_help
</div>
- </div>
- </a>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
</div>
- </div>
- <div
- class="legal-notice-root"
- >
<div
- class="legal-notice-content"
+ class="info-links"
>
<div
- class="legal-notice-header text-16-normal-uppercase"
- >
- legal.title_legal
- </div>
- <a
- class="MuiTypography-root MuiLink-root MuiLink-underlineHover legal-notice-card-link MuiTypography-colorPrimary"
- href="/options/legalnotice"
+ class="styled-card-root"
>
<div
- class="card"
+ class="styled-card-content"
>
<div
- class="legal-notice-card"
+ class="styled-card-header text-16-normal-uppercase"
+ >
+ legal.title_legal
+ </div>
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined"
+ tabindex="0"
+ type="button"
>
<div
- class="legal-notice-card-content"
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
<svg
aria-hidden="true"
- class="legal-notice-card-content-icon styles__icon___23x3R"
- height="42"
- width="42"
+ class="styles__icon___23x3R"
+ height="38"
+ width="38"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
- <div
- class="legal-notice-card-content-title"
- >
- legal.read_legal
- </div>
+ legal.read_legal
</div>
- </div>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
- </a>
- </div>
- </div>
- <div
- class="gcu-link-root"
- >
- <div
- class="gcu-link-content"
- >
- <a
- class="MuiTypography-root MuiLink-root MuiLink-underlineHover gcu-link-card-link MuiTypography-colorPrimary"
- href="/options/gcu"
+ </div>
+ <div
+ class="styled-card-root"
>
<div
- class="card"
+ class="styled-card-content"
>
- <div
- class="gcu-link-card"
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined"
+ tabindex="0"
+ type="button"
>
<div
- class="gcu-link-card-content"
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
<svg
aria-hidden="true"
- class="gcu-link-card-content-icon styles__icon___23x3R"
- height="42"
- width="42"
+ class="styles__icon___23x3R"
+ height="38"
+ width="38"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
- <div
- class="gcu-link-card-content-title"
- >
- common.title_gcu
- </div>
+ common.title_gcu
</div>
- </div>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
- </a>
- </div>
- </div>
- <div
- class="gcu-link-root"
- >
- <div
- class="gcu-link-content"
- >
- <a
- class="MuiTypography-root MuiLink-root MuiLink-underlineHover gcu-link-card-link MuiTypography-colorPrimary"
- href="https://ecolyo.com/accessibilite.html"
- target="_blank"
+ </div>
+ <div
+ class="styled-card-root"
>
<div
- class="card"
+ class="styled-card-content"
>
- <div
- class="gcu-link-card"
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined"
+ tabindex="0"
+ type="button"
>
<div
- class="gcu-link-card-content"
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
<svg
aria-hidden="true"
- class="gcu-link-card-content-icon styles__icon___23x3R"
- height="42"
- width="42"
+ class="styles__icon___23x3R"
+ height="38"
+ width="38"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
- <div
- class="gcu-link-card-content-title"
- >
- common.title_accessibility
- </div>
+ common.title_accessibility
</div>
- </div>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
- </a>
+ </div>
</div>
- </div>
- <div
- class="matomo-opt-out-container"
- >
<div
- class="matomo-opt-out"
+ class="styled-card-root"
>
<div
- class="opt-out-header text-16-normal-uppercase"
+ class="styled-card-content"
>
- matomo.matomo_title
+ <div
+ class="styled-card-header text-16-normal-uppercase"
+ >
+ matomo.matomo_title
+ </div>
+ <iframe
+ class="matomo-content"
+ src="http://localhost:9800/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif"
+ style="height: 250px;"
+ title="opt-out"
+ />
</div>
- <iframe
- src="http://localhost:9800/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif"
- style="height: 250px;"
- title="opt-out"
- />
</div>
</div>
<div
diff --git a/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap b/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
index 3f2d19fd5..2da3a3710 100644
--- a/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
+++ b/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`PartnerIssueModal component should render correctly 1`] = `
</div>
<button
aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap b/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
index 3c7e8fbc6..f69973105 100644
--- a/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`CGUModal component should be rendered correctly 1`] = `
</div>
<button
aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap b/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
index ba890dd86..12f39a089 100644
--- a/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`LegalNoticeModal component should be rendered correctly 1`] = `
</div>
<button
aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap b/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
index ecd108864..7f96a2ea5 100644
--- a/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
+++ b/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`WelcomeModal component should be rendered correctly 1`] = `
</div>
<button
aria-label="onboarding.welcomeModal.accessibility.button_valid"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index b27f6f440..eb1e924e6 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -43,6 +43,7 @@ $blue-radial-gradient-transparent: radial-gradient(
rgba(255, 255, 255, 0) 100%
);
$blue-grey: #bfcce4;
+$blue-accessibility: #1b8bff;
/** GREEN **/
$green: #7fd771;
diff --git a/src/styles/components/_barchart.scss b/src/styles/components/_barchart.scss
index 87ac7032d..3ce54187b 100644
--- a/src/styles/components/_barchart.scss
+++ b/src/styles/components/_barchart.scss
@@ -169,7 +169,8 @@
.barValue {
outline: none;
&:focus-visible {
- outline: 1px solid;
+ outline: 2px solid $blue-accessibility;
+ outline-offset: 2px;
}
}
diff --git a/src/styles/components/_buttons.scss b/src/styles/components/_buttons.scss
index 3a8f0feb4..ca1f7f834 100644
--- a/src/styles/components/_buttons.scss
+++ b/src/styles/components/_buttons.scss
@@ -6,6 +6,10 @@ button {
font-size: 1rem;
font-weight: 700;
}
+ &:focus-visible {
+ outline: 2px solid $blue-accessibility;
+ outline-offset: 2px;
+ }
&.btnPrimary {
@include button($dark-light-2, transparent, $multi-color-radial-gradient) {
diff --git a/src/styles/components/_expansion-panel.scss b/src/styles/components/_expansion-panel.scss
index b7a3fd566..5fa2f1df1 100644
--- a/src/styles/components/_expansion-panel.scss
+++ b/src/styles/components/_expansion-panel.scss
@@ -26,6 +26,10 @@ div.expansion-panel-summary {
background-color: unset;
box-shadow: 0 0 0 1px $grey-bright;
}
+ &:focus-visible {
+ outline: 2px solid $blue-accessibility;
+ outline-offset: 2px;
+ }
&.Mui-expanded {
min-height: 4rem;
&.small {
diff --git a/src/styles/components/_input.scss b/src/styles/components/_input.scss
index 66759a556..a9817361e 100644
--- a/src/styles/components/_input.scss
+++ b/src/styles/components/_input.scss
@@ -9,11 +9,6 @@ input.inputNumber {
background: transparent;
transition: all 300ms ease;
color: $grey-bright;
- &:focus,
- &:focus-visible {
- border-color: $gold-shadow;
- outline: none;
- }
}
input.inputText {
@@ -36,3 +31,8 @@ input.inputNumber {
input.inputCheckbox {
@include checkBox($gold-shadow, $dark-light-2);
}
+
+input:focus-visible {
+ outline: 2px solid $blue-accessibility;
+ outline-offset: 2px;
+}
diff --git a/src/styles/components/_link.scss b/src/styles/components/_link.scss
index c3331e239..077d3c007 100644
--- a/src/styles/components/_link.scss
+++ b/src/styles/components/_link.scss
@@ -13,6 +13,10 @@ a:focus {
box-shadow: 0 0 0 1px $grey-bright;
}
}
+a:focus-visible {
+ outline: 2px solid $blue-accessibility;
+ outline-offset: 2px;
+}
a.MuiLink-underlineHover:hover {
text-decoration: none;
}
--
GitLab