From a2ffdd1c19fbdb46723dd33401e25954e0ac8e2c Mon Sep 17 00:00:00 2001 From: Benjamin Arias Date: Thu, 20 Oct 2022 10:00:40 +0200 Subject: [PATCH] =?UTF-8?q?RGAA=20:=20mise=20en=20conformit=C3=A9=20Tablea?= =?UTF-8?q?ux=20(#2307)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: Ajoute un résumé au sur la page budget * feat: Ajoute un summary + des th * feat: Ajoute un aria-label sur les noms de trimestre * fix: Retire le aria-label sur table * feat: Ajoute un caption au tableau Budget > lecteur d'écran * feat: Ajoute caption sur les deux table modifiés * feat: Ajoute un titre au tableau chomage partiel * feat: Ajoute un caption * feat: Ajoute des th sur les entêtes de lignes * feat: Ajoute des th sur les entêtes de lignes * wip: Ajoute les role et scope qui vont bien * feat: Améliore structure * feat: lecteur évite de lire le tiret + ajout d'attributs * fix: Corrige le style * fix: Style * fix: Style --- site/source/design-system/global-style.ts | 18 ++ site/source/locales/ui-en.yaml | 20 ++ site/source/locales/ui-fr.yaml | 22 ++ site/source/pages/Budget/Budget.tsx | 91 ++++-- .../pages/Simulateurs/ChômagePartiel.tsx | 57 +++- .../ExonerationCovid/FormulaireS1S1Bis.tsx | 7 + .../Simulateurs/ExonerationCovid/Table.tsx | 12 +- .../_components/ExplicationResultatFiscal.tsx | 268 +++++++++++------- 8 files changed, 346 insertions(+), 149 deletions(-) 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; `} > - + + {quarters.map((q) => ( - + ))} - + {categories.map((label) => ( - + {quarters.map((q) => { - const value = budget[selectedYear]?.[q]?.[label] + const value = budget[selectedYear]?.[q.label]?.[label] return ( - ) })} @@ -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() { - + {quarters.map((q) => { const value = arraySum( - Object.values(budget[selectedYear]?.[q] ?? {}) + Object.values(budget[selectedYear]?.[q.label] ?? {}) ) return ( - - + {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 ( - - - + {body.map(([label, ...line], i) => ( - @@ -206,17 +214,22 @@ function ComparaisonTable({ rows: [head, ...body] }: ComparaisonTableProps) { - + + {head.map((label, i) => ( - + ))} + + {body.map(([label, ...line], i) => ( - {line.map((cell, j) => (
+ {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}{q} + {q.label} + TotalTotal
{label} + {label} + - {value - ? formatValue(value, { - displayedUnit: '€', - language, - }) - : '-'} + + {value ? ( + formatValue(value, { + displayedUnit: '€', + language, + }) + ) : ( + + - + + )}
Total HT + Total HT + + {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 + + {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}
+
+ - +
{captionText}
{label} + {label} +
+ - + @@ -278,12 +291,17 @@ const ResultTable = styled.table` width: 100%; border-collapse: collapse; + th { + font-weight: initial; + } + &.ui__.mobile-version { display: none; @media (max-width: 660px) { display: table; } - td { + td, + th { text-align: center; } } @@ -294,22 +312,29 @@ const ResultTable = styled.table` display: table; } - td:nth-child(2) { + td:nth-child(2), + th:nth-child(2) { font-size: 1em; opacity: 0.8; } - td { + td, + th { vertical-align: top; text-align: right; } } - td { + tbody tr { border-top: 1px solid rgba(0, 0, 0, 0.1); + } + + td, + th { padding: 0.8rem 1rem 0; } - td:first-child { + td:first-child, + th:first-child { text-align: left; p { margin-top: 0.2rem; @@ -328,7 +353,9 @@ const ResultTable = styled.table` text-align: left; } - td:nth-child(3) { + td:nth-child(3), + th:nth-child(2), + th:nth-child(3) { font-weight: bold; p { font-weight: initial; diff --git a/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS1S1Bis.tsx b/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS1S1Bis.tsx index 2b043d7a3..1d254fdfd 100644 --- a/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS1S1Bis.tsx +++ b/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS1S1Bis.tsx @@ -93,6 +93,13 @@ export const FormulaireS1S1Bis = ({ onChange }: Props) => { + diff --git a/site/source/pages/Simulateurs/ExonerationCovid/Table.tsx b/site/source/pages/Simulateurs/ExonerationCovid/Table.tsx index 331d55dfe..d2a52c110 100644 --- a/site/source/pages/Simulateurs/ExonerationCovid/Table.tsx +++ b/site/source/pages/Simulateurs/ExonerationCovid/Table.tsx @@ -25,6 +25,16 @@ const Td = styled.td` margin: 0.5rem 0; ` +const ThRow = styled.th` + flex: 2; + word-break: break-word; + margin: 0.5rem 0; + + &:first-child { + flex: 1 1 0%; + } +` + export const Tr = styled.tr` display: flex; flex-direction: column; @@ -189,7 +199,7 @@ export const Row = ({ return ( - + {title} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + )
+ + 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. + +
{title} {items.length > 0 ? (
- 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) +