betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

Mise en conformité RGAA : Présentation de l'information (#2367) 

* 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
pull/2398/head
Benjamin Arias 2022-11-23 18:28:31 +01:00 committed by GitHub
parent ee2422c34f
commit 16ab3d97df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
57 changed files with 195 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
site/cypress/integration/mon-entreprise/persistence-simulation.js
View File

@ -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/)

4
site/cypress/integration/mon-entreprise/simulateur-ae.ts
View File

@ -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')
})

12
site/source/App.tsx
View File

@ -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<FallbackRender>) => {
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 (
<StyledLayout isEmbedded={isEmbedded}>
{!isEmbedded && <Header />}
<main>
<Link href={`${fullPath}#footer`} className="skip-link print-hidden">
{t('Passer le contenu')}
</Link>
<main role="main" id="main">
<Container>
<ErrorBoundary fallback={CatchOffline}>
<Routes>

7
site/source/Provider.tsx
View File

@ -67,7 +67,12 @@ export default function Provider({
</Intro>
<Body>
Vous pouvez également nous contacter directement à l'adresse{' '}
<Link href="mailto:contact@mon-entreprise.beta.gouv.fr">
<Link
href="mailto:contact@mon-entreprise.beta.gouv.fr"
aria-label={t(
'Envoyer un courriel à contact@mon-entreprise.beta.gouv.fr, nouvelle fenêtre'
)}
>
contact@mon-entreprise.beta.gouv.fr
</Link>{' '}
si vous souhaitez partager une remarque. Veuillez nous excuser

21
site/source/components/Feedback/Feedback.css
View File

@ -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;
}

3
site/source/components/Feedback/index.tsx
View File

@ -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 = {

7
site/source/components/PaySlip.css
View File

@ -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)) {

3
site/source/components/SchemeComparaison.tsx
View File

@ -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 {

6
site/source/components/Simulation/SimulationGoal.tsx
View File

@ -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({
</Grid>
) : (
<Grid item>
<RuleLink dottedName={dottedName} excludeFromTabOrder>
{formatValue(evaluation, { displayedUnit: '€' })}
</RuleLink>
<Body>{formatValue(evaluation, { displayedUnit: '€' })}</Body>
</Grid>
)}
</Grid>

1
site/source/components/StackedBarChart.tsx
View File

@ -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;

2
site/source/components/charts/PagesCharts.tsx
View File

@ -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]};

1
site/source/components/company/SearchDetails.tsx
View File

@ -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`

1
site/source/components/conversation/AnswerList.tsx
View File

@ -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 }) =>

1
site/source/components/conversation/select/SelectTauxRisque.tsx
View File

@ -106,6 +106,7 @@ function SelectComponent({
css={`
flex: 2;
color: #333;
background-color: inherit;
font-size: 1rem;
`}
>

4
site/source/components/layout/Footer/Footer.tsx
View File

@ -53,7 +53,7 @@ export default function Footer() {
flex: 1;
`}
/>
<footer>
<footer role="contentinfo" id="footer">
<Container
backgroundColor={(theme) =>
theme.darkMode
@ -80,7 +80,7 @@ export default function Footer() {
<Container backgroundColor={(theme) => theme.colors.bases.primary[700]}>
<ThemeProvider theme={(theme) => ({ ...theme, darkMode: true })}>
<FooterContainer className="print-hidden">
<FooterContainer className="print-hidden" role="navigation">
<FooterColumn>
{language === 'fr' && (
<nav>

9
site/source/components/layout/Header.tsx
View File

@ -9,12 +9,16 @@ import { Container } from '@/design-system/layout'
import { Switch } from '@/design-system/switch'
import { Link } from '@/design-system/typography/link'
import { useDarkMode } from '@/hooks/useDarkMode'
import { useGetFullPath } from '@/hooks/useGetFullPath'
import { useSitePaths } from '@/sitePaths'
import NewsBanner from './NewsBanner'
export default function Header() {
const { absoluteSitePaths } = useSitePaths()
const fullPath = useGetFullPath()
const {
i18n: { language },
t,
@ -23,7 +27,10 @@ export default function Header() {
const [darkMode, setDarkMode] = useDarkMode()
return (
<header>
<header role="banner">
<Link href={`${fullPath}#main`} className="skip-link">
{t('Aller au contenu')}
</Link>
<Container>
<StyledHeader role="banner">
<Link

2
site/source/components/search/RulesInfiniteHits/index.tsx
View File

@ -18,11 +18,13 @@ const StyledRuleLink = styled(RuleLink)`
${SmallBody}, ${Body} {
margin: 0;
color: inherit;
background-color: inherit;
}
${Body} {
font-weight: 600;
color: inherit;
background-color: inherit;
}
`

6
site/source/components/search/SearchRoot.tsx
View File

@ -1,7 +1,11 @@
import { InstantSearch, InstantSearchProps } from 'react-instantsearch-dom'
import styled from 'styled-components'
export const SearchRoot = styled(InstantSearch)<InstantSearchProps>`
interface SearchType extends InstantSearchProps {
role?: string
}
export const SearchRoot = styled(InstantSearch)<SearchType>`
& .ais-Highlight-highlighted,
& .ais-Snippet-highlighted {
background-color: rgba(84, 104, 255, 0.1);

1
site/source/components/search/SearchRulesAndSimulators.tsx
View File

@ -37,6 +37,7 @@ export default function SearchRulesAndSimulators({
<SearchRoot
indexName={`${ALGOLIA_INDEX_PREFIX}rules`}
searchClient={searchClient}
role="search"
>
<SearchBox {...searchProps} />

1
site/source/components/ui/AnimatedTargetValue.tsx
View File

@ -90,6 +90,7 @@ const StyledEvaporate = styled.div`
z-index: 3;
right: ${({ theme }) => theme.spacings.sm};
color: ${({ theme }) => theme.colors.bases.secondary[400]};
background-color: inherit;
top: 0;
opacity: 0;
animation: ${evaporateAnimation} 2.5s linear;

4
site/source/components/utils/markdown.tsx
View File

@ -84,6 +84,7 @@ const Code = styled.code`
theme.darkMode
? theme.colors.extended.dark[600]
: theme.colors.extended.grey[300]};
color: inherit;
border-radius: 0.25rem;
`
@ -94,12 +95,14 @@ const Pre = styled.pre`
theme.darkMode
? theme.colors.extended.dark[600]
: theme.colors.extended.grey[300]};
color: inherit;
border-radius: 0.25rem;
& ${Code} {
overflow: initial;
padding: 0;
background-color: initial;
color: inherit;
border-radius: initial;
}
`
@ -226,6 +229,7 @@ export function HeadingWithAnchorLink({
transform: translateX(-100%);
padding-right: 6px;
color: var(--lighterTextColor);
background-color: inherit;
text-decoration: none;
font-size: 0.8em;
}

2
site/source/design-system/InfoBulle/index.tsx
View File

@ -3,6 +3,7 @@ import styled from 'styled-components'
const QuestionMark = styled.span`
color: var(--color);
background-color: inherit;
border: 1px solid var(--color);
display: inline-block;
font-weight: bold;
@ -32,6 +33,7 @@ const InfoBulleText = styled.span`
border-radius: 3px;
font-family: 'Roboto';
background-color: white;
color: inherit;
transition: opacity 0.2s, transform 0.2s;
opacity: 0;
box-shadow: 0px 2px 4px -1px rgba(41, 117, 209, 0.2),

1
site/source/design-system/buttons/Button.tsx
View File

@ -189,6 +189,7 @@ export const StyledButton = styled.button<StyledButtonProps>`
$light
? css`
color: rgba(255, 255, 255, 25%);
background-color: inherit;
opacity: 1;
`
: /* White color (dark background mode) */

1
site/source/design-system/card/Article.tsx
View File

@ -88,6 +88,7 @@ const StyledHeader = styled(H4)`
theme.darkMode
? theme.colors.bases.primary[200]
: theme.colors.bases.primary[600]};
background-color: inherit;
`
const StyledChevron = styled(Chevron)`

1
site/source/design-system/field/NumberField.tsx
View File

@ -141,6 +141,7 @@ const StyledNumberFieldContainer = styled(StyledContainer)`
const StyledUnit = styled(StyledSuffix)`
color: ${({ theme }) => theme.colors.extended.grey[600]};
background-color: inherit;
padding-left: 0 !important;
white-space: nowrap;
`

1
site/source/design-system/field/SearchField.tsx
View File

@ -112,5 +112,6 @@ const StyledClearButton = styled.button`
darkMode &&
css`
color: white !important;
background-color: inherit;
`}
`

8
site/source/design-system/field/Select/index.tsx
View File

@ -34,6 +34,7 @@ export const Label = styled.label`
css`
@media not print {
color: ${theme.colors.extended.grey[100]} !important;
background-color: inherit;
}
`}
`
@ -53,6 +54,7 @@ const Button = styled.button<ButtonProps>`
border: none;
width: 100%;
background: none;
color: inherit;
font-family: ${({ theme }) => theme.fonts.main};
height: 100%;
outline: none;
@ -63,6 +65,7 @@ const Button = styled.button<ButtonProps>`
css`
@media not print {
color: ${theme.colors.extended.grey[100]} !important;
background-color: inherit;
}
`}
`
@ -118,10 +121,12 @@ export const Wrapper = styled.div<WrapperProps>`
}
:focus-within ${Button} {
color: ${({ theme }) => theme.colors.bases.primary[800]};
background-color: inherit;
}
:focus-within + ${Button} {
color: ${({ theme }) => theme.colors.bases.primary[800]};
background-color: inherit;
}
${({ hasLabel }) =>
@ -129,9 +134,11 @@ export const Wrapper = styled.div<WrapperProps>`
css`
${Button}:not(:focus):placeholder-shown {
color: transparent;
background-color: inherit;
}
${Button}:not(:focus):placeholder-shown + ${Button} {
color: transparent;
background-color: inherit;
}
`}
@ -150,6 +157,7 @@ export const Wrapper = styled.div<WrapperProps>`
}
&&& label {
color: ${theme.colors.extended.error[400]};
background-color: inherit;
}
`}

11
site/source/design-system/field/TextAreaField.tsx
View File

@ -75,12 +75,14 @@ export const StyledTextArea = styled.textarea`
`}
color: ${({ theme }) =>
theme.colors.extended.grey[theme.darkMode ? 200 : 600]};
background-color: inherit;
}
${({ theme }) =>
theme.darkMode &&
css`
@media not print {
color: ${theme.colors.extended.grey[100]} !important;
background-color: inherit;
}
`}
`
@ -102,6 +104,7 @@ export const StyledLabel = styled.label`
css`
@media not print {
color: ${theme.colors.extended.grey[100]} !important;
background-color: inherit;
}
`}
`
@ -115,6 +118,7 @@ export const StyledDescription = styled(ExtraSmallBody)`
export const StyledErrorMessage = styled(StyledDescription)`
color: ${({ theme }) => theme.colors.extended.error[400]} !important;
background-color: inherit;
`
export const StyledSuffix = styled.span`
@ -152,9 +156,12 @@ export const StyledTextAreaContainer = styled.div<{
: theme.darkMode
? theme.colors.bases.primary[100]
: theme.colors.bases.primary[700]};
outline-offset: ${({ theme }) => theme.spacings.xxs};
outline-width: ${({ theme }) => theme.spacings.xxs};
}
:focus-within ${StyledLabel} {
color: ${({ theme }) => theme.colors.bases.primary[800]};
background-color: inherit;
}
:focus-within + ${StyledDescription} {
@ -162,6 +169,7 @@ export const StyledTextAreaContainer = styled.div<{
!theme.darkMode &&
css`
color: ${theme.colors.bases.primary[800]};
background-color: inherit;
`}
}
@ -170,9 +178,11 @@ export const StyledTextAreaContainer = styled.div<{
css`
${StyledTextArea}:not(:focus):placeholder-shown {
color: transparent;
background-color: inherit;
}
${StyledTextArea}:not(:focus):placeholder-shown + ${StyledSuffix} {
color: transparent;
background-color: inherit;
}
`}
@ -191,6 +201,7 @@ export const StyledTextAreaContainer = styled.div<{
}
&&& label {
color: ${theme.colors.extended.error[400]};
background-color: inherit;
}
`}

13
site/source/design-system/field/TextField.tsx
View File

@ -70,12 +70,14 @@ export const StyledInput = styled.input`
`}
color: ${({ theme }) =>
theme.colors.extended.grey[theme.darkMode ? 200 : 600]};
background-color: transparent;
}
${({ theme }) =>
theme.darkMode &&
css`
@media not print {
color: ${theme.colors.extended.grey[100]} !important;
background-color: transparent;
}
`}
`
@ -97,6 +99,7 @@ export const StyledLabel = styled.label`
css`
@media not print {
color: ${theme.colors.extended.grey[100]} !important;
background-color: transparent;
}
`}
`
@ -110,6 +113,7 @@ export const StyledDescription = styled(ExtraSmallBody)`
export const StyledErrorMessage = styled(StyledDescription)`
color: ${({ theme }) => theme.colors.extended.error[400]} !important;
background-color: inherit;
`
export const StyledSuffix = styled.span`
@ -145,11 +149,14 @@ export const StyledInputContainer = styled.div<{
hasError
? theme.colors.extended.error[400]
: theme.darkMode
? theme.colors.bases.primary[100]
? theme.colors.bases.primary[400]
: theme.colors.bases.primary[700]};
outline-offset: ${({ theme }) => theme.spacings.xxs};
outline-width: ${({ theme }) => theme.spacings.xxs};
}
:focus-within ${StyledLabel} {
color: ${({ theme }) => theme.colors.bases.primary[800]};
background-color: transparent;
}
:focus-within + ${StyledDescription} {
@ -157,6 +164,7 @@ export const StyledInputContainer = styled.div<{
!theme.darkMode &&
css`
color: ${theme.colors.bases.primary[800]};
background-color: transparent;
`}
}
@ -165,9 +173,11 @@ export const StyledInputContainer = styled.div<{
css`
${StyledInput}:not(:focus):placeholder-shown {
color: transparent;
background-color: transparent;
}
${StyledInput}:not(:focus):placeholder-shown + ${StyledSuffix} {
color: transparent;
background-color: transparent;
}
`}
@ -186,6 +196,7 @@ export const StyledInputContainer = styled.div<{
}
&&& label {
color: ${theme.colors.extended.error[400]};
background-color: transparent;
}
`}

4
site/source/design-system/footer/container.tsx
View File

@ -10,14 +10,16 @@ const StyledGrid = styled(Grid)`
type FooterContainerProps = {
children: ReactNode
className?: string
role?: string
}
export const FooterContainer = ({
children,
className,
role,
}: FooterContainerProps) => {
return (
<StyledGrid className={className} container>
<StyledGrid className={className} container role={role}>
{children}
</StyledGrid>
)

47
site/source/design-system/global-style.ts
View File

@ -1,15 +1,15 @@
import { createGlobalStyle, css } from 'styled-components'
export const SROnly = css`
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap; /* added line */
border: 0;
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; /* added line */
border: 0 !important;
`
/*
* Les @font-face sont généré avec https://google-webfonts-helper.herokuapp.com/
@ -137,17 +137,25 @@ button:enabled {
${SROnly}
}
.visually-hidden {
.skip-link {
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;
width: 1px;
height: 1px;
margin: 0;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
.skip-link:focus {
z-index: 999;
width: auto;
height: auto;
clip: auto;
background-color: #2E5FB6;
color: #FFFFFF;
padding: 1rem;
}
figure {
@ -194,7 +202,6 @@ figure {
font-size: 0.9rem;
}
}
`
export const FocusStyle = css`

1
site/source/design-system/message/index.tsx
View File

@ -84,6 +84,7 @@ const StyledMessage = styled.div<
h5,
h6 {
color: ${(colorSpace as Palette)[700] ?? colorSpace[600]};
background-color: inherit;
}
`
}}

2
site/source/design-system/popover/Popover.tsx
View File

@ -216,7 +216,7 @@ const CloseButton = styled.button`
display: inline-flex;
align-items: center;
background: none;
background: inherit;
border: none;
color: ${({ theme }) =>

1
site/source/design-system/stepper/index.tsx
View File

@ -125,6 +125,7 @@ const StyledStep = styled(Link)<{ $active: boolean }>`
$active
? css`
color: ${theme.colors.bases.primary[800]};
background-color: inherit;
`
: css`
font-weight: inherit;

2
site/source/design-system/switch/Switch.tsx
View File

@ -35,6 +35,7 @@ const StyledSpan = styled.span<StyledProps>`
border-radius: inherit;
box-shadow: 0px 3px 1px 0px #0000000f, 0px 3px 8px 0px #00000026;
background-color: #ffffff;
color: inherit;
`
const StyledSwitch = styled.span<StyledProps>`
@ -45,6 +46,7 @@ const StyledSwitch = styled.span<StyledProps>`
checked
? theme.colors.bases.primary[700]
: theme.colors.extended.grey[500]};
color: inherit;
font-family: ${({ theme }) => theme.fonts.main};
padding: 0.2rem;
margin: 0 ${({ theme }) => theme.spacings.xxs};

1
site/source/design-system/typography/heading.tsx
View File

@ -8,6 +8,7 @@ const baseHeading = css`
theme.darkMode
? theme.colors.extended.grey[100]
: theme.colors.bases.primary[700]};
background-color: inherit;
`
export const HeadingUnderline = css`

1
site/source/design-system/typography/index.ts
View File

@ -13,6 +13,7 @@ export const U = styled.u`
`
export const Code = styled.code`
background-color: #eee;
color: inherit;
padding: 0.25rem;
border-radius: 0.25rem;
`

3
site/source/design-system/typography/link.tsx
View File

@ -24,6 +24,7 @@ export const StyledLink = styled.a<{ $isDisabled?: boolean }>`
$isDisabled
? theme.colors.extended.grey[600]
: theme.colors.bases.primary[700]};
background-color: inherit;
${({ theme }) =>
theme.darkMode &&
css`
@ -38,11 +39,11 @@ export const StyledLink = styled.a<{ $isDisabled?: boolean }>`
`}
font-family: ${({ theme }) => theme.fonts.main};
font-weight: 700;
text-decoration: underline;
padding: 0;
font-size: inherit;
background: none;
border: none;
text-decoration: none;
border-radius: ${({ theme }) => theme.box.borderRadius};
&:hover {
${({ $isDisabled }) => !$isDisabled && StyledLinkHover}

1
site/source/design-system/typography/list.tsx
View File

@ -45,6 +45,7 @@ export const Ul = styled.ul<ListProps>`
width: ${({ theme }) => theme.spacings.lg};
text-align: center;
color: ${({ theme }) => theme.colors.bases.secondary[400]};
background-color: inherit;
margin-bottom: ${({ theme }) => theme.spacings.xs};
}
`

1
site/source/design-system/typography/paragraphs.tsx
View File

@ -4,6 +4,7 @@ export const baseParagraphStyle = css`
font-family: ${({ theme }) => theme.fonts.main};
font-weight: normal;
color: ${({ theme }) => theme.colors.extended.grey[800]};
background-color: inherit;
${({ theme }) =>
theme.darkMode &&
css`

20
site/source/hooks/useGetFullPath.ts Normal file
View File

@ -0,0 +1,20 @@
import { useTranslation } from 'react-i18next'
import { useLocation } from 'react-router-dom'
import { isDevelopment } from './../utils'
const DEVELOPMENT_BASE_PATHS = {
fr: '/mon-entreprise',
en: '/infrance',
}
export const useGetFullPath = () => {
const { i18n } = useTranslation()
const { pathname } = useLocation()
const language = i18n.language as 'fr' | 'en'
const pathStart = isDevelopment() ? DEVELOPMENT_BASE_PATHS[language] : '/'
return `${pathStart}${pathname !== '/' ? pathname : ''}`
}

4
site/source/pages/Budget/Budget.tsx
View File

@ -100,7 +100,7 @@ export default function Budget() {
`}
>
<RessourcesAllocationTable role="table">
<caption className="visually-hidden">
<caption className="sr-only">
{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.",
@ -275,6 +275,7 @@ const RessourcesAllocationTable = styled.table`
theme.darkMode
? theme.colors.extended.dark[600]
: theme.colors.bases.primary[200]};
color: inherit;
}
thead,
@ -284,5 +285,6 @@ const RessourcesAllocationTable = styled.table`
tfoot tr:last-child {
color: ${({ theme }) => theme.colors.bases.primary[500]};
background-color: inherit;
}
`

11
site/source/pages/Landing/Landing.tsx
View File

@ -1,4 +1,4 @@
import { Trans } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import styled from 'styled-components'
import PageHeader from '@/components/PageHeader'
@ -10,6 +10,7 @@ import { Container, Grid, Spacing } from '@/design-system/layout'
import { H2 } from '@/design-system/typography/heading'
import { Link } from '@/design-system/typography/link'
import { Body, Intro } from '@/design-system/typography/paragraphs'
import { useGetFullPath } from '@/hooks/useGetFullPath'
import { useSitePaths } from '@/sitePaths'
import { TrackPage } from '../../ATInternetTracking'
@ -22,6 +23,9 @@ import illustrationSvg from './illustration.svg'
export default function Landing() {
const simulators = useSimulatorsData()
const { absoluteSitePaths } = useSitePaths()
const { t } = useTranslation()
const fullPath = useGetFullPath()
return (
<>
@ -33,7 +37,10 @@ export default function Landing() {
ogImage="/logo-share.png"
/>
<Header />
<main>
<Link href={`${fullPath}#footer`} className="skip-link print-hidden">
{t('Passer le contenu')}
</Link>
<main role="main" id="main">
<Container>
<PageHeader
titre={

2
site/source/pages/Nouveautes/Nouveautes.tsx
View File

@ -104,7 +104,7 @@ export default function Nouveautés() {
</Select>
</MobileGridItem>
<DesktopGridItem>
<Sidebar>
<Sidebar role="navigation">
{data.map(({ name }, index) => (
<li key={name}>
<SidebarLink to={getPath(index)}>{name}</SidebarLink>

6
site/source/pages/Offline.tsx
View File

@ -4,7 +4,11 @@ import { Body, Intro } from '@/design-system/typography/paragraphs'
export default function Offline() {
return (
<Grid container css={{ justifyContent: 'center', margin: '10rem 0' }}>
<Grid
container
css={{ justifyContent: 'center', margin: '10rem 0' }}
role="main"
>
<Grid item md={8} sm={12}>
<Message type="info" css={{ margin: '1rem 0' }}>
<Intro>Vous êtes actuellement hors ligne.</Intro>

5
site/source/pages/Simulateurs/ChômagePartiel.tsx
View File

@ -181,7 +181,7 @@ function ComparaisonTable({ rows: [head, ...body] }: ComparaisonTableProps) {
return (
<>
<ResultTable className="ui__ mobile-version">
<caption className="visually-hidden">{captionText}</caption>
<caption className="sr-only">{captionText}</caption>
<thead>
<tr>
<th id="emptyTh1"></th>
@ -215,7 +215,7 @@ function ComparaisonTable({ rows: [head, ...body] }: ComparaisonTableProps) {
</tbody>
</ResultTable>
<ResultTable>
<caption className="visually-hidden">{captionText}</caption>
<caption className="sr-only">{captionText}</caption>
<thead>
<tr>
{head.map((label, i) => (
@ -366,5 +366,6 @@ const ResultTable = styled.table`
td:last-child,
th:last-child {
background: var(--lighterColor);
color: inherit;
}
`

2
site/source/pages/Simulateurs/ExonerationCovid/FormulaireS1S1Bis.tsx
View File

@ -100,7 +100,7 @@ export const FormulaireS1S1Bis = ({ onChange }: Props) => {
/>
</H3>
<Table>
<caption className="visually-hidden">
<caption className="sr-only">
<Trans>
Tableau affichant pour chaque mois de la période précédemment
sélectionnée le montant de réductions pour la situation

1
site/source/pages/Simulateurs/ExonerationCovid/Recap.tsx
View File

@ -10,6 +10,7 @@ export const Recap = styled.div`
return css`linear-gradient(60deg, ${colorPalette[800]} 0%, ${colorPalette[600]} 100%);`
}};
color: inherit;
border-radius: 0.25rem;
padding: 1.5rem;
${baseParagraphStyle}

2
site/source/pages/gerer/declaration-charges-sociales-independant/_components/ExplicationResultatFiscal.tsx
View File

@ -58,7 +58,7 @@ export function ExplicationsResultatFiscal() {
</Ul>
<StyledTable role="table">
<caption className="visually-hidden">
<caption className="sr-only">
<Trans i18nKey="explications.tableCaption">
Tableau affichant les lignes de votre liasse fiscale associées aux
exonérations fiscales en place pour chaque type d'activité. La

1
site/source/pages/gerer/declaration-charges-sociales-independant/index.tsx
View File

@ -119,6 +119,7 @@ export default function AideDéclarationIndépendant() {
<SmallBody
css={`
color: #ff2d96;
background-color: inherit;
`}
>
Cette aide à la déclaration concerne uniquement les

1
site/source/pages/gerer/declaration-revenu-independants/_components/DéclarationRevenu.tsx
View File

@ -311,6 +311,7 @@ const StyledCase = styled.span`
border: 1px solid ${({ theme }) => theme.colors.bases.primary[800]};
border-top: none;
background-color: white;
color: inherit;
padding: ${({ theme }) =>
css`
${theme.spacings.xxs} ${theme.spacings.sm}

1
site/source/pages/gerer/declaration-revenu-independants/_components/ModeAccompagnement.tsx
View File

@ -123,6 +123,7 @@ const AccompagnementSwitch = styled.div`
margin-bottom: ${theme.spacings.md};
* {
color: ${theme.colors.bases.primary[800]};
background-color: inherit;
}
`}
`

1
site/source/pages/gerer/demande-mobilité/PDFDocument.tsx
View File

@ -97,6 +97,7 @@ const styles = StyleSheet.create({
body: {
paddingTop: 35,
color: '#18457B',
backgroundColor: '#FFFFFF',
lineHeight: 1.5,
paddingBottom: 65,
paddingHorizontal: 35,

1
site/source/pages/gerer/demande-mobilité/index.tsx
View File

@ -157,6 +157,7 @@ function FormulairePublicodes() {
<SmallBody
css={`
color: #ff2d96;
background-color: inherit;
`}
>
{description}

1
site/source/pages/integration/Iframe.tsx
View File

@ -375,6 +375,7 @@ function IntegrationCode({
em {
font-weight: 300;
color: ${darkMode ? 'white' : 'black'};
background-color: inherit;
}
`}
>

1
site/source/pages/integration/iframe.css
View File

@ -56,6 +56,7 @@ section#integrations a {
#contribution article h2 {
font-weight: 600;
color: #3c4963;
background-color: inherit;
}
#contribution article p {

2
site/source/template.html
View File

@ -291,7 +291,7 @@
<h3>
Si besoin, vous pouvez en installer un nouveau depuis
<a
style="color: #2975d1"
style="color: #2975d1; background-color: inherit"
href="https://outdatedbrowser.com/fr"
aria-label="cette page, visiter outdatedbrowser.com, nouvelle fenêtre"
>cette page</a