diff --git a/site/cypress/integration/mon-entreprise/lodeom.ts b/site/cypress/integration/mon-entreprise/lodeom.ts index 068745ecc..7ef56e18b 100755 --- a/site/cypress/integration/mon-entreprise/lodeom.ts +++ b/site/cypress/integration/mon-entreprise/lodeom.ts @@ -81,7 +81,7 @@ describe('Simulateur lodeom', { testIsolation: false }, function () { }) it('should allow to select a scale', function () { - cy.get('div[aria-label="Barème à appliquer"]') + cy.get('div[aria-labelledby="barème-switch-label"]') .contains('Barème de compétitivité renforcée') .click() @@ -89,7 +89,7 @@ describe('Simulateur lodeom', { testIsolation: false }, function () { 'p[id="salarié___cotisations___exonérations___lodeom___montant-value"]' ).should('include.text', '958,20 €') - cy.get('div[aria-label="Barème à appliquer"]') + cy.get('div[aria-labelledby="barème-switch-label"]') .contains("Barème d'innovation et croissance") .click() @@ -111,7 +111,7 @@ describe('Simulateur lodeom', { testIsolation: false }, function () { "Le barème d'innovation et croissance concerne uniquement les salaires inférieurs à 3,5 SMIC." ) - cy.get('div[aria-label="Barème à appliquer"]') + cy.get('div[aria-labelledby="barème-switch-label"]') .contains('Barème de compétitivité renforcée') .click() cy.get(inputSelector).first().type('{selectall}5000') @@ -121,7 +121,7 @@ describe('Simulateur lodeom', { testIsolation: false }, function () { 'Le barème de compétitivité renforcée concerne uniquement les salaires inférieurs à 2,7 SMIC.' ) - cy.get('div[aria-label="Barème à appliquer"]') + cy.get('div[aria-labelledby="barème-switch-label"]') .contains('Barème de compétitivité') .click() cy.get(inputSelector).first().type('{selectall}4000') @@ -307,14 +307,14 @@ describe('Simulateur lodeom', { testIsolation: false }, function () { cy.get('@recapTable').should('include.text', 'code 462') cy.get('@recapTable').should('include.text', 'code 684') - cy.get('div[aria-label="Barème à appliquer"]') + cy.get('div[aria-labelledby="barème-switch-label"]') .contains('Barème de compétitivité renforcée') .click() cy.get('@recapTable').should('include.text', 'code 463') cy.get('@recapTable').should('include.text', 'code 538') - cy.get('div[aria-label="Barème à appliquer"]') + cy.get('div[aria-labelledby="barème-switch-label"]') .contains("Barème d'innovation et croissance") .click() diff --git a/site/source/components/EffectifSwitch.tsx b/site/source/components/EffectifSwitch.tsx index 725a1c5a1..ab1e1881a 100644 --- a/site/source/components/EffectifSwitch.tsx +++ b/site/source/components/EffectifSwitch.tsx @@ -2,9 +2,12 @@ import { DottedName } from 'modele-social' import { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' import { useDispatch } from 'react-redux' +import { styled } from 'styled-components' import { useEngine } from '@/components/utils/EngineContext' import { Radio, ToggleGroup } from '@/design-system' +import { Strong } from '@/design-system/typography' +import { Body } from '@/design-system/typography/paragraphs' import { enregistreLaRéponse } from '@/store/actions/actions' export default function EffectifSwitch() { @@ -21,16 +24,45 @@ export default function EffectifSwitch() { }, [currentEffectif, engineEffectif]) return ( - { - setCurrentEffectif(value) - dispatch(enregistreLaRéponse(dottedName, `'${value}'`)) - }} - aria-label={t("Effectif de l'entreprise")} - > - {t('Moins de 50 salariés')} - {t('Plus de 50 salariés')} - + + + {t("Effectif de l'entreprise :")} + + { + setCurrentEffectif(value) + dispatch(enregistreLaRéponse(dottedName, `'${value}'`)) + }} + aria-labelledby="effectif-switch-label" + > + {t('Moins de 50 salariés')} + {t('Plus de 50 salariés')} + + ) } + +const Container = styled.div` + text-align: left; + display: flex; + flex-direction: column; + flex-wrap: wrap; + column-gap: ${({ theme }) => theme.spacings.sm}; + width: 100%; +` +const StyledBody = styled(Body)` + margin: ${({ theme }) => theme.spacings.xxs} 0; +` +const StyledToggleGroup = styled(ToggleGroup)` + display: flex; + > * { + display: flex; + } +` +const StyledRadio = styled(Radio)` + white-space: nowrap; + > span { + width: 100%; + } +` diff --git a/site/source/components/RéductionDeCotisations/RégularisationSwitch.tsx b/site/source/components/RéductionDeCotisations/RégularisationSwitch.tsx index 13f4520f1..7785a8175 100644 --- a/site/source/components/RéductionDeCotisations/RégularisationSwitch.tsx +++ b/site/source/components/RéductionDeCotisations/RégularisationSwitch.tsx @@ -1,6 +1,9 @@ import { useTranslation } from 'react-i18next' +import { styled } from 'styled-components' import { Radio, ToggleGroup } from '@/design-system' +import { Strong } from '@/design-system/typography' +import { Body } from '@/design-system/typography/paragraphs' import { RégularisationMethod } from '@/utils/réductionDeCotisations' type Props = { @@ -15,28 +18,59 @@ export default function RégularisationSwitch({ const { t } = useTranslation() return ( - { - setRégularisationMethod(value as RégularisationMethod) - }} - aria-label={t( - 'pages.simulateurs.réduction-générale.régularisation.type', - 'Type de régularisation' - )} - > - - {t( - 'pages.simulateurs.réduction-générale.régularisation.annuelle', - 'Régularisation annuelle' - )} - - - {t( - 'pages.simulateurs.réduction-générale.régularisation.progressive', - 'Régularisation progressive' - )} - - + + + + {t( + 'pages.simulateurs.réduction-générale.régularisation.type', + 'Type de régularisation :' + )} + + + { + setRégularisationMethod(value as RégularisationMethod) + }} + aria-labelledby="régularisation-switch-label" + > + + {t( + 'pages.simulateurs.réduction-générale.régularisation.annuelle', + 'Régularisation annuelle' + )} + + + {t( + 'pages.simulateurs.réduction-générale.régularisation.progressive', + 'Régularisation progressive' + )} + + + ) } + +const Container = styled.div` + text-align: left; + display: flex; + flex-direction: column; + flex-wrap: wrap; + column-gap: ${({ theme }) => theme.spacings.sm}; + width: 100%; +` +const StyledBody = styled(Body)` + margin: ${({ theme }) => theme.spacings.xxs} 0; +` +const StyledToggleGroup = styled(ToggleGroup)` + display: flex; + > * { + display: flex; + } +` +const StyledRadio = styled(Radio)` + white-space: nowrap; + > span { + width: 100%; + } +` diff --git a/site/source/locales/ui-en.yaml b/site/source/locales/ui-en.yaml index 9682e98ed..64123bccb 100644 --- a/site/source/locales/ui-en.yaml +++ b/site/source/locales/ui-en.yaml @@ -92,7 +92,7 @@ Décès: Deaths Déplier: Unfold "Détail du montant :": "Amount in detail :" Effacer mes réponses: Delete my answers -Effectif de l'entreprise: Number of employees +"Effectif de l'entreprise :": "Number of employees :" "En cas d’<1>accident de travail, de <4>maladie professionnelle ou d’un <7>accident sur le trajet domicile-travail, vous serez indemnisé(e) à hauteur de :": "In the event of an<1>accident at work, <4>occupational illness or an <7>accident on the way to or from work, you will receive compensation of:" @@ -137,6 +137,7 @@ Graphique statistiques détaillés de la satisfaction, présence d’une alterna Graphique statistiques détaillés du nombre visites par jour, présence d’une alternative accessible après l’image: Graph showing detailed statistics on the number of visits per day, with an alternative accessible after the image +Guadeloupe, Guyane, Martinique, La Réunion: Guadeloupe, French Guiana, Martinique, Reunion Island Habituellement: Usually Impôt: Tax Impôt au barème: Tax scale @@ -278,6 +279,7 @@ Répartition du chiffre d'affaires: Sales breakdown Répondez à quelques questions additionnelles afin de préciser votre résultat.: Answer a few additional questions to clarify your result. Résultat fiscal: Taxable income Réussite: Success +Saint-Barthélémy, Saint-Martin: Saint-Barthélémy, Saint-Martin Saisissez votre domaine d'activité: Enter your field of activity Salaire brut: Gross salary Salaire brut mensuel: Gross monthly salary @@ -1447,7 +1449,7 @@ pages: included in the simulator. title: Corporate tax simulator lodeom: - bareme-label: Scale to be applied + bareme-switch-label: "Scale to be applied :" legend: Employee's gross salary and applicable Lodeom exemption meta: description: Estimated amount of Lodeom exemption. This exemption applies, under @@ -1484,6 +1486,7 @@ pages: salaries below 3.5 SMIC. In other words, for 2024, total remuneration not exceeding <1>€6,306.30 gross per month. stage: The Lodeom exemption does not apply to internship bonuses. + zone-switch-label: "Company location :" médecin: meta: description: Calculation of net income after deduction of contributions, based @@ -1566,7 +1569,7 @@ pages: régularisation: annuelle: Annual adjustment progressive: Progressive regularization - type: Type of adjustment + type: "Type of adjustment :" répartition: chômage: of which unemployment retraite: IRC diff --git a/site/source/locales/ui-fr.yaml b/site/source/locales/ui-fr.yaml index aa52f31dc..2ffce4bc7 100644 --- a/site/source/locales/ui-fr.yaml +++ b/site/source/locales/ui-fr.yaml @@ -98,7 +98,7 @@ Décès: Décès Déplier: Déplier "Détail du montant :": "Détail du montant :" Effacer mes réponses: Effacer mes réponses -Effectif de l'entreprise: Effectif de l'entreprise +"Effectif de l'entreprise :": "Effectif de l'entreprise :" "En cas d’<1>accident de travail, de <4>maladie professionnelle ou d’un <7>accident sur le trajet domicile-travail, vous serez indemnisé(e) à hauteur de :": "En cas d’<1>accident de travail, de <4>maladie professionnelle ou d’un <7>accident sur le trajet domicile-travail, vous serez indemnisé(e) à @@ -146,6 +146,7 @@ Graphique statistiques détaillés de la satisfaction, présence d’une alterna Graphique statistiques détaillés du nombre visites par jour, présence d’une alternative accessible après l’image: Graphique statistiques détaillés du nombre visites par jour, présence d’une alternative accessible après l’image +Guadeloupe, Guyane, Martinique, La Réunion: Guadeloupe, Guyane, Martinique, La Réunion Habituellement: Habituellement Impôt: Impôt Impôt au barème: Impôt au barème @@ -293,6 +294,7 @@ Répartition du chiffre d'affaires: Répartition du chiffre d'affaires Répondez à quelques questions additionnelles afin de préciser votre résultat.: Répondez à quelques questions additionnelles afin de préciser votre résultat. Résultat fiscal: Résultat fiscal Réussite: Réussite +Saint-Barthélémy, Saint-Martin: Saint-Barthélémy, Saint-Martin Saisissez votre domaine d'activité: Saisissez votre domaine d'activité Salaire brut: Salaire brut Salaire brut mensuel: Salaire brut mensuel @@ -1540,7 +1542,7 @@ pages: pas intégrés dans le simulateur. title: Simulateur d'impôt sur les sociétés lodeom: - bareme-label: Barème à appliquer + bareme-switch-label: "Barème à appliquer :" legend: Rémunération brute du salarié et exonération Lodeom applicable meta: description: Estimation du montant de l'exonération Lodeom. Cette exonération @@ -1580,6 +1582,7 @@ pages: 2024, une rémunération totale qui ne dépasse pas <1>6 306,30 € bruts par mois. stage: L'exonération Lodeom ne s'applique pas sur les gratifications de stage. + zone-switch-label: "Localisation de l'entreprise :" médecin: meta: description: Calcul du revenu net après déduction des cotisations à partir du @@ -1663,7 +1666,7 @@ pages: régularisation: annuelle: Régularisation annuelle progressive: Régularisation progressive - type: Type de régularisation + type: "Type de régularisation :" répartition: chômage: dont chômage retraite: IRC diff --git a/site/source/pages/simulateurs/lodeom/Lodeom.tsx b/site/source/pages/simulateurs/lodeom/Lodeom.tsx index 57178606a..5f4870a6b 100644 --- a/site/source/pages/simulateurs/lodeom/Lodeom.tsx +++ b/site/source/pages/simulateurs/lodeom/Lodeom.tsx @@ -47,8 +47,6 @@ export default function LodeomSimulation() { <> }> - - + + {currentZone && } {currentZone === 'zone un' && ( <> + + + {t( + 'pages.simulateurs.lodeom.bareme-switch-label', + 'Barème à appliquer :' + )} + + {barèmes.map((barème, index) => { const dottedName = @@ -49,16 +55,21 @@ export default function BarèmeSwitch() { } const Container = styled.div` - ${FlexCenter} + text-align: left; + display: flex; + flex-direction: column; flex-wrap: wrap; - justify-content: center; column-gap: ${({ theme }) => theme.spacings.sm}; + width: 100%; +` +const StyledBody = styled(Body)` + margin: ${({ theme }) => theme.spacings.xxs} 0; ` const StyledToggleGroup = styled(ToggleGroup)` + display: flex; > * { display: flex; flex-direction: column; - text-align: left; } ` const StyledRadio = styled(Radio)` diff --git a/site/source/pages/simulateurs/lodeom/components/ZoneSwitch.tsx b/site/source/pages/simulateurs/lodeom/components/ZoneSwitch.tsx index 2d8baff6b..5916fe7b5 100644 --- a/site/source/pages/simulateurs/lodeom/components/ZoneSwitch.tsx +++ b/site/source/pages/simulateurs/lodeom/components/ZoneSwitch.tsx @@ -1,6 +1,9 @@ import { useTranslation } from 'react-i18next' +import { styled } from 'styled-components' import { Radio, ToggleGroup } from '@/design-system' +import { Strong } from '@/design-system/typography' +import { Body } from '@/design-system/typography/paragraphs' import { useBarèmeLodeom } from '@/hooks/useBarèmeLodeom' import { useZoneLodeom } from '@/hooks/useZoneLodeom' @@ -10,18 +13,55 @@ export default function ZoneSwitch() { const { t } = useTranslation() return ( - { - updateBarème() - updateZone(value) - }} - aria-label={t("Zone de l'entreprise")} - > - - {t('Guadeloupe, Guyane, Martinique, La Réunion')} - - {t('Saint-Barthélémy, Saint-Martin')} - + + + + {t( + 'pages.simulateurs.lodeom.zone-switch-label', + "Localisation de l'entreprise :" + )} + + + { + updateBarème() + updateZone(value) + }} + aria-labelledby="zone-switch" + > + + {t('Guadeloupe, Guyane, Martinique, La Réunion')} + + + {t('Saint-Barthélémy, Saint-Martin')} + + + ) } + +const Container = styled.div` + text-align: left; + display: flex; + flex-direction: column; + flex-wrap: wrap; + column-gap: ${({ theme }) => theme.spacings.sm}; + width: 100%; +` +const StyledBody = styled(Body)` + margin: ${({ theme }) => theme.spacings.xxs} 0; +` +const StyledToggleGroup = styled(ToggleGroup)` + display: flex; + > * { + display: flex; + flex-direction: column; + } +` +const StyledRadio = styled(Radio)` + white-space: nowrap; + > span { + width: 100%; + } +` diff --git a/site/source/pages/simulateurs/reduction-generale/components/CongésPayésSwitch.tsx b/site/source/pages/simulateurs/reduction-generale/components/CongésPayésSwitch.tsx index fac2f5855..55cbef09a 100644 --- a/site/source/pages/simulateurs/reduction-generale/components/CongésPayésSwitch.tsx +++ b/site/source/pages/simulateurs/reduction-generale/components/CongésPayésSwitch.tsx @@ -6,7 +6,7 @@ import { styled } from 'styled-components' import { useEngine } from '@/components/utils/EngineContext' import { Radio, ToggleGroup } from '@/design-system' -import { FlexCenter } from '@/design-system/global-style' +import { Strong } from '@/design-system/typography' import { Body } from '@/design-system/typography/paragraphs' import { enregistreLaRéponse } from '@/store/actions/actions' import { réductionGénéraleDottedName } from '@/utils/réductionDeCotisations' @@ -30,9 +30,9 @@ export default function CongésPayésSwitch() { return ( - {engine.getRule(dottedName).title} + {engine.getRule(dottedName).title} : - { setCurrentCongésPayés(value) @@ -40,19 +40,33 @@ export default function CongésPayésSwitch() { }} aria-labelledby="caisse-congés-payés-label" > - {t('Oui')} - {t('Non')} - + {t('Oui')} + {t('Non')} + ) } const Container = styled.div` - ${FlexCenter} + text-align: left; + display: flex; + flex-direction: column; flex-wrap: wrap; - justify-content: center; column-gap: ${({ theme }) => theme.spacings.sm}; + width: 100%; ` const StyledBody = styled(Body)` margin: ${({ theme }) => theme.spacings.xxs} 0; ` +const StyledToggleGroup = styled(ToggleGroup)` + display: flex; + > * { + display: flex; + } +` +const StyledRadio = styled(Radio)` + white-space: nowrap; + > span { + width: 100%; + } +`