From 67ead44b7726a0827344ca476211a6500b00912e Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Wed, 31 Mar 2021 18:27:21 +0200
Subject: [PATCH] feat: add focus background color
---
src/components/Options/ProfileTypeOptions.tsx | 4 +++-
src/locales/fr.json | 1 +
src/styles/base/_color.scss | 1 +
src/styles/components/_expansion-panel.scss | 4 ++++
4 files changed, 9 insertions(+), 1 deletion(-)
diff --git a/src/components/Options/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions.tsx
index 023538814..0e9c1f13c 100644
--- a/src/components/Options/ProfileTypeOptions.tsx
+++ b/src/components/Options/ProfileTypeOptions.tsx
@@ -57,7 +57,9 @@ const ProfileTypeOptions: React.FC = () => {
}}
>
<ExpansionPanelSummary
- aria-label={''}
+ aria-label={t(
+ 'profile_type.accessibility.button_toogle_detail_profile'
+ )}
expandIcon={<Icon icon={chevronDown} size={16} />}
classes={{
root: 'expansion-panel-summary',
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 6f904a204..25a26f896 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -640,6 +640,7 @@
"button_next": "Aller à la section suivante",
"button_previous": "Retour à la section précédente",
"button_update_profile": "Ouvrir la page de mise à jour du profil",
+ "button_toogle_detail_profile": "Afficher ou masquer le détail du profil",
"button_validate": "Valider"
}
},
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index de8d36f40..fb1a2c531 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -54,6 +54,7 @@ $grey-linear-gradient-background: linear-gradient(
#323339 0%,
#25262b 100%
);
+$grey-focus: rgba(123, 123, 123, 0.4);
/** App colors **/
$elec-color: #d87b39;
diff --git a/src/styles/components/_expansion-panel.scss b/src/styles/components/_expansion-panel.scss
index 715777be7..71c4da2ff 100644
--- a/src/styles/components/_expansion-panel.scss
+++ b/src/styles/components/_expansion-panel.scss
@@ -18,6 +18,10 @@ div.expansion-panel-root{
div.expansion-panel-summary{
padding: 0.25rem 1.2rem;
min-height: 4rem;
+ &.Mui-focused {
+ border-radius: 4px;
+ background-color: $grey-focus;
+ }
&.Mui-expanded {
min-height: 4rem;
&.small{
--
GitLab