From 16ab3d97dfbb9a7faa760d9c79d1a0233d044924 Mon Sep 17 00:00:00 2001 From: Benjamin Arias Date: Wed, 23 Nov 2022 18:28:31 +0100 Subject: [PATCH] =?UTF-8?q?Mise=20en=20conformit=C3=A9=20RGAA=20:=20Pr?= =?UTF-8?q?=C3=A9sentation=20de=20l'information=20(#2367)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: Add inherit on headings and paragraphs * feat: Ajoute background inherit * feat: Add color inherit * fix : Corrige le style de TextField * feat: Améliore le style focus input + * feat: Ajoute les roles de landmark sur les pages principales * feat: Ajout d'un role sur Offline * feat: Ajoute liens d'évitement * fix: Corrige l'url des liens d'évitement * feat: Retire le lien sur les valeurs * feat: Ajoute le hook useGetFullPath * fix: Ajoute `import` manquant * feat: Cache lien d'évitements au print * fix: Style * fix: persistence-simulation e2e test * fix: simulateur-ae e2e test * fix: demande-mobilité e2e test * chore: Retire classe en doublon * fix: Remove color declaration * fix: Retire ligne de css qui casse le style de payslip * fix: Evite le reload de la page au clic lien d'évitement * feat: Run Prettier on App.tsx * fix: Retire timeout inutile --- .../mon-entreprise/persistence-simulation.js | 12 ++--- .../mon-entreprise/simulateur-ae.ts | 4 +- site/source/App.tsx | 12 ++++- site/source/Provider.tsx | 7 ++- site/source/components/Feedback/Feedback.css | 21 --------- site/source/components/Feedback/index.tsx | 3 -- site/source/components/PaySlip.css | 7 ++- site/source/components/SchemeComparaison.tsx | 3 ++ .../components/Simulation/SimulationGoal.tsx | 6 +-- site/source/components/StackedBarChart.tsx | 1 + site/source/components/charts/PagesCharts.tsx | 2 + .../components/company/SearchDetails.tsx | 1 + .../components/conversation/AnswerList.tsx | 1 + .../conversation/select/SelectTauxRisque.tsx | 1 + .../components/layout/Footer/Footer.tsx | 4 +- site/source/components/layout/Header.tsx | 9 +++- .../search/RulesInfiniteHits/index.tsx | 2 + site/source/components/search/SearchRoot.tsx | 6 ++- .../search/SearchRulesAndSimulators.tsx | 1 + .../components/ui/AnimatedTargetValue.tsx | 1 + site/source/components/utils/markdown.tsx | 4 ++ site/source/design-system/InfoBulle/index.tsx | 2 + site/source/design-system/buttons/Button.tsx | 1 + site/source/design-system/card/Article.tsx | 1 + .../design-system/field/NumberField.tsx | 1 + .../design-system/field/SearchField.tsx | 1 + .../design-system/field/Select/index.tsx | 8 ++++ .../design-system/field/TextAreaField.tsx | 11 +++++ site/source/design-system/field/TextField.tsx | 13 ++++- .../source/design-system/footer/container.tsx | 4 +- site/source/design-system/global-style.ts | 47 +++++++++++-------- site/source/design-system/message/index.tsx | 1 + site/source/design-system/popover/Popover.tsx | 2 +- site/source/design-system/stepper/index.tsx | 1 + site/source/design-system/switch/Switch.tsx | 2 + .../design-system/typography/heading.tsx | 1 + site/source/design-system/typography/index.ts | 1 + site/source/design-system/typography/link.tsx | 3 +- site/source/design-system/typography/list.tsx | 1 + .../design-system/typography/paragraphs.tsx | 1 + site/source/hooks/useGetFullPath.ts | 20 ++++++++ site/source/pages/Budget/Budget.tsx | 4 +- site/source/pages/Landing/Landing.tsx | 11 ++++- site/source/pages/Nouveautes/Nouveautes.tsx | 2 +- site/source/pages/Offline.tsx | 6 ++- .../pages/Simulateurs/ChômagePartiel.tsx | 5 +- .../ExonerationCovid/FormulaireS1S1Bis.tsx | 2 +- .../Simulateurs/ExonerationCovid/Recap.tsx | 1 + .../_components/ExplicationResultatFiscal.tsx | 2 +- .../index.tsx | 1 + .../_components/DéclarationRevenu.tsx | 1 + .../_components/ModeAccompagnement.tsx | 1 + .../gerer/demande-mobilité/PDFDocument.tsx | 1 + .../pages/gerer/demande-mobilité/index.tsx | 1 + site/source/pages/integration/Iframe.tsx | 1 + site/source/pages/integration/iframe.css | 1 + site/source/template.html | 2 +- 57 files changed, 195 insertions(+), 77 deletions(-) delete mode 100644 site/source/components/Feedback/Feedback.css create mode 100644 site/source/hooks/useGetFullPath.ts diff --git a/site/cypress/integration/mon-entreprise/persistence-simulation.js b/site/cypress/integration/mon-entreprise/persistence-simulation.js index cf86e4ecb..9c9bffb09 100644 --- a/site/cypress/integration/mon-entreprise/persistence-simulation.js +++ b/site/cypress/integration/mon-entreprise/persistence-simulation.js @@ -13,9 +13,9 @@ describe('Persistence (simulateur salarié)', function () { it('should persist the current simulation (persistSimulation)', function () { cy.get(inputSelector).first().type('{selectall}42') - cy.contains('Passer').click() - cy.contains('Passer').click() - cy.contains('Passer').click() + cy.contains('button', 'Passer').click() + cy.contains('button', 'Passer').click() + cy.contains('button', 'Passer').click() cy.get('body').should(() => { expect( window.localStorage.getItem( @@ -25,9 +25,9 @@ describe('Persistence (simulateur salarié)', function () { }) cy.visit('/simulateurs/auto-entrepreneur') cy.get(inputSelector).first().type('{selectall}007') - cy.contains('Passer').click() - cy.contains('Passer').click() - cy.contains('Passer').click() + cy.contains('button', 'Passer').click() + cy.contains('button', 'Passer').click() + cy.contains('button', 'Passer').click() cy.visit(encodeURI('/simulateurs/salaire-brut-net')) cy.contains('Retrouver ma simulation').click() cy.get(inputSelector).first().invoke('val').should('match', /42/) diff --git a/site/cypress/integration/mon-entreprise/simulateur-ae.ts b/site/cypress/integration/mon-entreprise/simulateur-ae.ts index 34c39efbb..88484fd8b 100644 --- a/site/cypress/integration/mon-entreprise/simulateur-ae.ts +++ b/site/cypress/integration/mon-entreprise/simulateur-ae.ts @@ -13,8 +13,8 @@ describe('Simulateur auto-entrepreneur', function () { it('should allow to enter the date of creation', function () { cy.get(inputSelector).first().type('{selectall}50000') - cy.contains('Passer').click() - cy.contains('Passer').click() + cy.contains('button', 'Passer').click() + cy.contains('button', 'Passer').click() cy.contains('Début 2022').click() cy.contains('ACRE') }) diff --git a/site/source/App.tsx b/site/source/App.tsx index b7d97757f..0d25782d1 100644 --- a/site/source/App.tsx +++ b/site/source/App.tsx @@ -2,6 +2,7 @@ import { ErrorBoundary } from '@sentry/react' import { FallbackRender } from '@sentry/react/types/errorboundary' import rules from 'modele-social' import { ComponentProps, StrictMode, useMemo } from 'react' +import { useTranslation } from 'react-i18next' import { Route, Routes } from 'react-router-dom' import styled, { css } from 'styled-components' @@ -19,7 +20,9 @@ import { useIsEmbedded } from '@/components/utils/useIsEmbedded' import { Container, Spacing } from '@/design-system/layout' import Provider, { ProviderProps } from './Provider' +import { Link } from './design-system/typography/link' import { useAxeCoreAnalysis } from './hooks/useAxeCoreAnalysis' +import { useGetFullPath } from './hooks/useGetFullPath' import { useSaveAndRestoreScrollPosition } from './hooks/useSaveAndRestoreScrollPosition' import Accessibilité from './pages/Accessibilité' import Budget from './pages/Budget/Budget' @@ -94,6 +97,10 @@ const CatchOffline = ({ error }: ComponentProps) => { const App = () => { const { relativeSitePaths } = useSitePaths() + const { t } = useTranslation() + + const fullPath = useGetFullPath() + useSaveAndRestoreScrollPosition() const isEmbedded = useIsEmbedded() if (!import.meta.env.PROD && import.meta.env.VITE_AXE_CORE_ENABLED) { @@ -106,7 +113,10 @@ const App = () => { return ( {!isEmbedded &&
} -
+ + {t('Passer le contenu')} + +
diff --git a/site/source/Provider.tsx b/site/source/Provider.tsx index 28150b980..afab2c627 100644 --- a/site/source/Provider.tsx +++ b/site/source/Provider.tsx @@ -67,7 +67,12 @@ export default function Provider({ Vous pouvez également nous contacter directement à l'adresse{' '} - + contact@mon-entreprise.beta.gouv.fr {' '} si vous souhaitez partager une remarque. Veuillez nous excuser diff --git a/site/source/components/Feedback/Feedback.css b/site/source/components/Feedback/Feedback.css deleted file mode 100644 index c7d645842..000000000 --- a/site/source/components/Feedback/Feedback.css +++ /dev/null @@ -1,21 +0,0 @@ -.zammad-form > .form-group:nth-of-type(2) { - display: none; -} -.zammad-form > .btn[type='submit'] { - display: inline-block; - padding: 0.4rem 0.8rem; - color: inherit; - text-decoration: none; - border: 1px solid; - /* outline: none; */ - line-height: initial; - display: inline-block; - border-radius: 0.3rem; - transition: all 0.15s; - text-align: center; - text-transform: uppercase; - - font-family: 'Roboto', sans-serif; - font-weight: normal; - cursor: pointer; -} diff --git a/site/source/components/Feedback/index.tsx b/site/source/components/Feedback/index.tsx index e4c4af2c2..1d4439f68 100644 --- a/site/source/components/Feedback/index.tsx +++ b/site/source/components/Feedback/index.tsx @@ -16,9 +16,6 @@ import { CurrentSimulatorDataContext } from '@/pages/Simulateurs/metadata' import * as safeLocalStorage from '../../storage/safeLocalStorage' import { JeDonneMonAvis } from '../JeDonneMonAvis' import { INSCRIPTION_LINK } from '../layout/Footer/InscriptionBetaTesteur' - -import './Feedback.css' - import Form from './FeedbackForm' type PageFeedbackProps = { diff --git a/site/source/components/PaySlip.css b/site/source/components/PaySlip.css index 3bb5feb86..d4fc951f6 100644 --- a/site/source/components/PaySlip.css +++ b/site/source/components/PaySlip.css @@ -19,6 +19,8 @@ } .payslip__container h3 { border-bottom: 1px solid rgba(0, 0, 0, 0.85); + color: #1D458C; + background-color: inherit; print-color-adjust: exact !important; margin: 0; margin-top: 1.5rem; @@ -36,10 +38,13 @@ font-weight: bold; margin-top: 1em; background-color: transparent !important; + color: inherit; } .payslip__container h5 { margin: 0; + color: #1D458C; + background-color: inherit; margin-bottom: 0.5rem; margin-top: 0.5rem; } @@ -72,6 +77,7 @@ .payslip__cotisationsSection a:nth-of-type(2n) + *, .payslip__salarySection a:nth-of-type(2n) + * { background-color: rgba(255, 255, 255, 0.4); + color: inherit; } .payslip__cotisationsSection a:nth-of-type(2n) + * + * { background-color: rgba(255, 255, 255, 0.4); @@ -97,7 +103,6 @@ .payslip__cotisationsSection > h4:nth-child(1), .payslip__cotisationsSection > a, div.payslip__total { - width: 50%; display: inline-block; } .payslip__cotisationsSection > h4:not(:nth-child(1)) { diff --git a/site/source/components/SchemeComparaison.tsx b/site/source/components/SchemeComparaison.tsx index 8a6dbbce0..92fa76be9 100644 --- a/site/source/components/SchemeComparaison.tsx +++ b/site/source/components/SchemeComparaison.tsx @@ -476,11 +476,13 @@ export const StyledGrid = styled.div` & > .green { font-weight: bold; color: limegreen; + background-color: inherit; } & > .red { font-weight: bold; color: red; + background-color: inherit; } & > .no-border { @@ -518,6 +520,7 @@ export const StyledGrid = styled.div` } & > :not(.button)::before { color: ${({ theme }) => theme.colors.bases.primary[700]} !important; + background-color: inherit; opacity: 0.6; } & > .AS::before { diff --git a/site/source/components/Simulation/SimulationGoal.tsx b/site/source/components/Simulation/SimulationGoal.tsx index a033d5757..6ebfcc6e8 100644 --- a/site/source/components/Simulation/SimulationGoal.tsx +++ b/site/source/components/Simulation/SimulationGoal.tsx @@ -6,7 +6,7 @@ import styled from 'styled-components' import { updateSituation } from '@/actions/actions' import { Grid } from '@/design-system/layout' -import { SmallBody } from '@/design-system/typography/paragraphs' +import { Body, SmallBody } from '@/design-system/typography/paragraphs' import { targetUnitSelector } from '@/selectors/simulationSelectors' import RuleLink from '../RuleLink' @@ -124,9 +124,7 @@ export function SimulationGoal({ ) : ( - - {formatValue(evaluation, { displayedUnit: '€' })} - + {formatValue(evaluation, { displayedUnit: '€' })} )} diff --git a/site/source/components/StackedBarChart.tsx b/site/source/components/StackedBarChart.tsx index 04fae27ab..329e89590 100644 --- a/site/source/components/StackedBarChart.tsx +++ b/site/source/components/StackedBarChart.tsx @@ -47,6 +47,7 @@ const BarStackLegend = styled.div` const BarStackLegendItem = styled.div` font-family: ${({ theme }) => theme.fonts.main}; color: #555; + background-color: inherit; strong { display: inline-block; color: #111; diff --git a/site/source/components/charts/PagesCharts.tsx b/site/source/components/charts/PagesCharts.tsx index 3e4691392..8b9ad241f 100644 --- a/site/source/components/charts/PagesCharts.tsx +++ b/site/source/components/charts/PagesCharts.tsx @@ -148,6 +148,7 @@ const ColoredLi = styled(Li)<{ color?: string }>` color && css` color: ${color} !important; + background-color: inherit; `}; } ` @@ -157,6 +158,7 @@ export const StyledLegend = styled.div` theme.darkMode ? theme.colors.extended.dark[600] : theme.colors.extended.grey[100]}; + color: inherit; padding: 0.125rem 1rem; box-shadow: ${({ theme }) => theme.darkMode ? theme.elevationsDarkMode[3] : theme.elevations[3]}; diff --git a/site/source/components/company/SearchDetails.tsx b/site/source/components/company/SearchDetails.tsx index 71a1e4cd9..fd817a90f 100644 --- a/site/source/components/company/SearchDetails.tsx +++ b/site/source/components/company/SearchDetails.tsx @@ -84,6 +84,7 @@ const Highlight = styled.strong` theme.darkMode ? theme.colors.bases.secondary[600] : theme.colors.bases.secondary[100]}; + color: inherit; ` const CompanyContainer = styled.div` diff --git a/site/source/components/conversation/AnswerList.tsx b/site/source/components/conversation/AnswerList.tsx index 055cd9a87..35d0194a2 100644 --- a/site/source/components/conversation/AnswerList.tsx +++ b/site/source/components/conversation/AnswerList.tsx @@ -298,6 +298,7 @@ const StyledAnswerList = styled(Grid)` theme.darkMode ? theme.colors.extended.dark[500] : theme.colors.bases.primary[100]}; + color: inherit; color-adjust: exact !important; outline: solid ${({ theme }) => diff --git a/site/source/components/conversation/select/SelectTauxRisque.tsx b/site/source/components/conversation/select/SelectTauxRisque.tsx index f5a2ba3a1..f6bdad2ff 100644 --- a/site/source/components/conversation/select/SelectTauxRisque.tsx +++ b/site/source/components/conversation/select/SelectTauxRisque.tsx @@ -106,6 +106,7 @@ function SelectComponent({ css={` flex: 2; color: #333; + background-color: inherit; font-size: 1rem; `} > diff --git a/site/source/components/layout/Footer/Footer.tsx b/site/source/components/layout/Footer/Footer.tsx index edc5d4915..f4850c892 100644 --- a/site/source/components/layout/Footer/Footer.tsx +++ b/site/source/components/layout/Footer/Footer.tsx @@ -53,7 +53,7 @@ export default function Footer() { flex: 1; `} /> -