diff --git a/site/source/design-system/global-style.ts b/site/source/design-system/global-style.ts index 9e6ba9ecd..077e3548c 100644 --- a/site/source/design-system/global-style.ts +++ b/site/source/design-system/global-style.ts @@ -136,6 +136,24 @@ button:enabled { ${SROnly} } +.visually-hidden { + position: absolute; + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0,0,0,0) !important; + white-space: nowrap !important; + border: 0 !important; +} + +figure { + margin: 0; + padding: 0; +} + .print-only { display: none; } diff --git a/site/source/locales/ui-en.yaml b/site/source/locales/ui-en.yaml index eb45402b9..4c9ae30e5 100644 --- a/site/source/locales/ui-en.yaml +++ b/site/source/locales/ui-en.yaml @@ -269,6 +269,9 @@ Situation personnelle: Personal situation Suivant: Next Supprimer les données sauvegardées.: Delete saved data. Supprimer toute ma situation: Delete my entire situation +Tableau affichant pour chaque mois de la période précédemment sélectionnée le montant de réductions pour la situation sélectionnée.: + Table showing for each month of the previously selected period the amount of + discounts for the selected situation. Taux: Rate Taux calculé: Calculated rate Taux moyen: Average rate @@ -433,6 +436,12 @@ autoentrepreneur: titre: Auto-entrepeneur back: Return to the simulation barème: scale +budget: + tableCaption: Table showing the budget for the year {{year}} by expense item. + The first column shows the current year ({{year}}) on the first line, then + the expense items and finally the total before and after tax. The other + columns show the expenses for each quarter. The last column shows the totals + for each expense item as well as the aggregated total before and after tax. calcul-avec: "Calculation from <1>with :" cancelExample: Back to your situation car dépend de: because it depends on @@ -443,6 +452,9 @@ checklist: showmore: closed: Read more open: Hide details +chomagePartiel: + tableCaption: Table showing net salary and cost to the employer with or without + partial unemployment. cible: target clickexample: Click on a situation to see the result comparaisonRégimes: @@ -820,6 +832,14 @@ entreprise: est un SIREN non diffusible: is a non-distributable SIREN examples: Examples expected: the expected result was +explications: + tableCaption: Table displaying the lines of your tax return associated with the + tax exemptions in place for each type of activity. The first column displays + the different types of activity (BIC, BNC). The second column shows the + lines of your tax return that allow you to determine your taxable income for + each type of activity. The other columns display the exemptions in place as + well as the lines of the tax return or add your exemptions for each type of + activity. facteur: multiplier fail: This test failed feedback: diff --git a/site/source/locales/ui-fr.yaml b/site/source/locales/ui-fr.yaml index 50271d8c3..121bdc368 100644 --- a/site/source/locales/ui-fr.yaml +++ b/site/source/locales/ui-fr.yaml @@ -176,6 +176,9 @@ Situation personnelle: Situation personnelle Suivant: Suivant Supprimer les données sauvegardées.: Supprimer les données sauvegardées. Supprimer toute ma situation: Supprimer toute ma situation +Tableau affichant pour chaque mois de la période précédemment sélectionnée le montant de réductions pour la situation sélectionnée.: + Tableau affichant pour chaque mois de la période précédemment sélectionnée le + montant de réductions pour la situation sélectionnée. Total des retenues: Total des retenues Tout effacer: Tout effacer Tout le site: Tout le site @@ -314,6 +317,13 @@ autoentrepreneur: titre: Auto-entrepreneur titre: Entreprise individuelle ou auto-entrepreneur back: Retourner à la simulation +budget: + tableCaption: Tableau affichant le bugdet de l'année {{year}} par poste de + dépenses. La première colonne affiche l'année en cours ({{year}}) sur la + première ligne puis les postes de dépenses et pour finir le total HT et + total TTC. Les autres colonnes affichent les dépenses pour chaque trimestre. + La dernière colonne affiche les totaux pour chaque poste de dépenses ainsi + que les totaux HT et TTC agrégés. cards: simulator-resource: cta: Accéder au simulateur @@ -321,6 +331,9 @@ checklist: showmore: closed: En savoir plus open: Masquer les détails +chomagePartiel: + tableCaption: Tableau indiquant le salaire net et le coût pour l'employeur avec + ou sans chômage partiel. comparaisonRégimes: ACRE: <0>ACRE<1>1 an <1>(automatique et inconditionnelle)<2>Entre 3 et 4 trimestres <2>(sous conditions d'éligibilité) @@ -592,6 +605,15 @@ entreprise: titre: À faire pour créer votre entreprise titre2: Recommandé avant le début de l'activité est un SIREN non diffusible: est un SIREN non diffusible +explications: + tableCaption: Tableau affichant les lignes de votre liasse fiscale associées aux + exonérations fiscales en place pour chaque type d'activité. La première + colonne affiche les différents types d'activité (BIC, BNC). La deuxième + colonne indique les lignes de votre liasse fiscale qui vous permettent de + déterminer votre résultat fiscal, et ce pour chaque type d'activité. Les + autres colonnes affichent les exonérations en place ainsi que les lignes de + liasse fiscale ou ajouter vos exonérations et ce pour chaque type + d'activité. feedback: beta-testeur: Pour continuer à donner votre avis et accéder aux nouveautés en avant-première, <2>inscrivez-vous sur la liste des beta-testeur diff --git a/site/source/pages/Budget/Budget.tsx b/site/source/pages/Budget/Budget.tsx index 95d5da315..0029438f9 100644 --- a/site/source/pages/Budget/Budget.tsx +++ b/site/source/pages/Budget/Budget.tsx @@ -7,7 +7,7 @@ import { Item, Select } from '@/design-system/field/Select' import { H1, H2 } from '@/design-system/typography/heading' import { formatValue } from 'publicodes' import { useState } from 'react' -import { useTranslation } from 'react-i18next' +import { Trans, useTranslation } from 'react-i18next' import styled from 'styled-components' import { TrackPage } from '../../ATInternetTracking' import Meta from '../../components/utils/Meta' @@ -37,19 +37,25 @@ const arraySum = (arr: number[]) => arr.reduce((a, b) => a + b, 0) export default function Budget() { const years = ['2019', '2020', '2021', '2022'] as const - const quarters = ['T1', 'T2', 'T3', 'T4'] + const quarters = [ + { label: 'T1', 'aria-label': 'Trimestre 1' }, + { label: 'T2', 'aria-label': 'Trimestre 2' }, + { label: 'T3', 'aria-label': 'Trimestre 3' }, + { label: 'T4', 'aria-label': 'Trimestre 4' }, + ] const [selectedYear, setSelectedYear] = useState( years[years.length - 1] ) const categories = [ ...new Set( quarters - .map((q) => Object.keys(budget[selectedYear]?.[q] ?? {})) + .map((q) => Object.keys(budget[selectedYear]?.[q.label] ?? {})) .reduce((acc, curr) => [...acc, ...curr], []) ), ] + const { t, i18n } = useTranslation() - const { language } = useTranslation().i18n + const { language } = i18n return ( <> @@ -91,31 +97,51 @@ export default function Budget() { overflow: auto; `} > - + + + {t( + 'budget.tableCaption', + "Tableau affichant le bugdet de l'année {{year}} par poste de dépenses. La première colonne affiche l'année en cours ({{year}}) sur la première ligne puis les postes de dépenses et pour finir le total HT et total TTC. Les autres colonnes affichent les dépenses pour chaque trimestre. La dernière colonne affiche les totaux pour chaque poste de dépenses ainsi que les totaux HT et TTC agrégés.", + { year: selectedYear } + )} + {selectedYear} {quarters.map((q) => ( - {q} + + {q.label} + ))} - Total + Total {categories.map((label) => ( - {label} + + {label} + {quarters.map((q) => { - const value = budget[selectedYear]?.[q]?.[label] + const value = budget[selectedYear]?.[q.label]?.[label] return ( - - {value - ? formatValue(value, { - displayedUnit: '€', - language, - }) - : '-'} + + {value ? ( + formatValue(value, { + displayedUnit: '€', + language, + }) + ) : ( + + - + + )} ) })} @@ -123,7 +149,7 @@ export default function Budget() { {formatValue( arraySum( quarters.map( - (q) => budget[selectedYear]?.[q]?.[label] ?? 0 + (q) => budget[selectedYear]?.[q.label]?.[label] ?? 0 ) ), { @@ -137,14 +163,16 @@ export default function Budget() { - Total HT + + Total HT + {quarters.map((q) => { const value = arraySum( - Object.values(budget[selectedYear]?.[q] ?? {}) + Object.values(budget[selectedYear]?.[q.label] ?? {}) ) return ( - + {value ? formatValue(value, { displayedUnit: '€', @@ -159,7 +187,7 @@ export default function Budget() { arraySum( quarters.map((q) => arraySum( - Object.values(budget[selectedYear]?.[q] ?? {}) + Object.values(budget[selectedYear]?.[q.label] ?? {}) ) ) ), @@ -171,15 +199,18 @@ export default function Budget() { - Total TTC + + Total TTC + {quarters.map((q) => { const value = Math.round( - arraySum(Object.values(budget[selectedYear]?.[q] ?? {})) * - 1.2 + arraySum( + Object.values(budget[selectedYear]?.[q.label] ?? {}) + ) * 1.2 ) return ( - + {value ? formatValue(value, { displayedUnit: '€', @@ -196,7 +227,9 @@ export default function Budget() { quarters.map( (q) => arraySum( - Object.values(budget[selectedYear]?.[q] ?? {}) + Object.values( + budget[selectedYear]?.[q.label] ?? {} + ) ) * 1.2 ) ) @@ -222,12 +255,14 @@ export default function Budget() { const RessourcesAllocationTable = styled.table` width: 100%; text-align: left; - td { + td, + th { padding: 6px; font-family: ${({ theme }) => theme.fonts.main}; } - td:not(:first-child) { + td:not(:first-child), + th:not(:first-child) { width: 100px; text-align: right; } diff --git a/site/source/pages/Simulateurs/ChômagePartiel.tsx b/site/source/pages/Simulateurs/ChômagePartiel.tsx index 53bd33366..8486c0597 100644 --- a/site/source/pages/Simulateurs/ChômagePartiel.tsx +++ b/site/source/pages/Simulateurs/ChômagePartiel.tsx @@ -11,7 +11,7 @@ import { Li, Ul } from '@/design-system/typography/list' import { DottedName } from 'modele-social' import { formatValue } from 'publicodes' import React, { useEffect, useState } from 'react' -import { useTranslation } from 'react-i18next' +import { Trans, useTranslation } from 'react-i18next' import styled from 'styled-components' declare global { @@ -170,13 +170,21 @@ function ComparaisonTable({ rows: [head, ...body] }: ComparaisonTableProps) { columns.length - 1 ) + const captionText = ( + + Tableau indiquant le salaire net et le coût pour l'employeur avec ou sans + chômage partiel. + + ) + return ( <> + {captionText} - - + + theme.colors.extended.grey[500]}; } + th { + font-weight: initial; + } ` +const exonerationsHeader = 'exonerationsHeader' +const resultatFiscalHeader = 'resultatFiscalHeader' +const zonesHeader = 'zonesHeader' +const madelinHeader = 'madelinHeader' +const plusValueHeader = 'plusValueHeader' +const suramortissementHeader = 'suramortissementHeader' + export function ExplicationsResultatFiscal() { return ( @@ -43,110 +55,156 @@ export function ExplicationsResultatFiscal() { Ajoutez les exonérations (2) - - - - - - Exonérations (2) - - - - - - Résultat fiscal (1) - - - Exonérations liées aux zones / activités - - - Exonérations Madelin et plan d’épargne retraite - - - Exonérations de plus-values à court terme - - Suramortissement productif - - - BIC réel normal - - 2058-A-SD -
- Ligne XN (bénéfice) Ligne XO (déficit) - - - 2058-A-SD -
- Lignes K9 / L6 / ØV / PP / L2 / 1F / PC / L5 / PA / XC / PB - - - 2053-SD -
- Lignes A7 et A8 - - - 2058-A-SD -
- Ligne XG (montant inclus) - - - 2058-A-SD -
- Lignes X9 et YA - - - - BIC réel simplifié - - 2033-B-SD -
- Ligne 370 (bénéfice) Ligne 372 (déficit) - - - 2033 B-SD -
- Lignes 986 / 127 / 991 / 345 / 992 / 987 / 989 / 138 / 990 / 993 - - - 2033-SD -
- Lignes 325 et 327 - - - 2033 B-SD -
- Ligne 350 (montant inclus) - - - 2033 B-SD -
- Lignes 655 et 643 - - - - BNC déclaration contrôlée - - 2035-B-SD -
- Ligne CP (bénéfice) Ligne CR (déficit) - - - 2035-B-SD -
- Lignes CS / AW / CU / CI / AX / CQ - - - 2035-A-SD -
- Lignes BZ et BU - - - 2035-A-SD -
- Ligne CL (montant inclus) - - - + + + + + Tableau affichant les lignes de votre liasse fiscale associées aux + exonérations fiscales en place pour chaque type d'activité. La + première colonne affiche les différents types d'activité (BIC, BNC). + La deuxième colonne indique les lignes de votre liasse fiscale qui + vous permettent de déterminer votre résultat fiscal, et ce pour + chaque type d'activité. Les autres colonnes affichent les + exonérations en place ainsi que les lignes de liasse fiscale ou + ajouter vos exonérations et ce pour chaque type d'activité. + + + + + + + + Exonérations (2) + + + + + + Résultat fiscal (1) + + + Exonérations liées aux zones / activités + + + Exonérations Madelin et plan d’épargne retraite + + + Exonérations de plus-values à court terme + + + Suramortissement productif + + + + + + + BIC réel normal + + + 2058-A-SD +
+ Ligne XN (bénéfice) Ligne XO (déficit) + + + 2058-A-SD +
+ Lignes K9 / L6 / ØV / PP / L2 / 1F / PC / L5 / PA / XC / PB + + + 2053-SD +
+ Lignes A7 et A8 + + + 2058-A-SD +
+ Ligne XG (montant inclus) + + + 2058-A-SD +
+ Lignes X9 et YA + + + + + BIC réel simplifié + + + 2033-B-SD +
+ Ligne 370 (bénéfice) Ligne 372 (déficit) + + + 2033 B-SD +
+ Lignes 986 / 127 / 991 / 345 / 992 / 987 / 989 / 138 / 990 / 993 + + + 2033-SD +
+ Lignes 325 et 327 + + + 2033 B-SD +
+ Ligne 350 (montant inclus) + + + 2033 B-SD +
+ Lignes 655 et 643 + + + + + BNC déclaration contrôlée + + + 2035-B-SD +
+ Ligne CP (bénéfice) Ligne CR (déficit) + + + 2035-B-SD +
+ Lignes CS / AW / CU / CI / AX / CQ + + + 2035-A-SD +
+ Lignes BZ et BU + + + 2035-A-SD +
+ Ligne CL (montant inclus) + + + + )