Mise en conformité RGAA : structuration de l'information (#2356)
* fix: Heading levels * fix: heading level * feat: Améliore structure autres pages * feat: Ajoute as + style * fix: Retropedalage > roles * feat: Ajoute les roles de listes aux ressources utiles * feat: Modifie simulateurs > listes + modifie bouton Card * feat: Add role presentation * feat: Ajoute des role list et listitem manquants * feat: Ajoute roles list * feat: Ajoute roles listpull/2362/head
Benjamin Arias
GitHub
parent
8b023c9069
commit
117f743c43
|
|
@ -79,7 +79,7 @@ salarié . activité partielle . heures chômées:
|
|||
|
||||
salarié . activité partielle . heures travaillées:
|
||||
titre: heures travaillées restantes
|
||||
question: Quelle est le nombre d'heures travaillées sur le mois ?
|
||||
question: Quel est le nombre d'heures travaillées sur le mois ?
|
||||
description: >-
|
||||
Dans le cadre du chômage partiel, le nombre d'heure restantes travaillées. Doit être
|
||||
inférieur au temps contractuel.
|
||||
|
|
|
|||
|
|
@ -109,48 +109,53 @@ const App = () => {
|
|||
titleTemplate={`${t(['site.titleTemplate', '%s - Mon-entreprise'])}`}
|
||||
/>
|
||||
|
||||
<Container>
|
||||
<ErrorBoundary fallback={CatchOffline}>
|
||||
<Routes>
|
||||
<Route
|
||||
path={relativeSitePaths.créer.index + '/*'}
|
||||
element={<Créer />}
|
||||
/>
|
||||
<Route
|
||||
path={relativeSitePaths.gérer.index + '/*'}
|
||||
element={<Gérer />}
|
||||
/>
|
||||
<Route
|
||||
path={relativeSitePaths.simulateurs.index + '/*'}
|
||||
element={<Simulateurs />}
|
||||
/>
|
||||
<Route
|
||||
path={relativeSitePaths.documentation.index + '/*'}
|
||||
element={<Documentation />}
|
||||
/>
|
||||
<Route
|
||||
path={relativeSitePaths.développeur.index + '/*'}
|
||||
element={<Integration />}
|
||||
/>
|
||||
<Route
|
||||
path={relativeSitePaths.nouveautés + '/*'}
|
||||
element={<Nouveautés />}
|
||||
/>
|
||||
<Route path={relativeSitePaths.stats} element={<Stats />} />
|
||||
<Route path={relativeSitePaths.budget} element={<Budget />} />
|
||||
<Route
|
||||
path={relativeSitePaths.accessibilité}
|
||||
element={<Accessibilité />}
|
||||
/>
|
||||
<main>
|
||||
<Container>
|
||||
<ErrorBoundary fallback={CatchOffline}>
|
||||
<Routes>
|
||||
<Route
|
||||
path={relativeSitePaths.créer.index + '/*'}
|
||||
element={<Créer />}
|
||||
/>
|
||||
<Route
|
||||
path={relativeSitePaths.gérer.index + '/*'}
|
||||
element={<Gérer />}
|
||||
/>
|
||||
<Route
|
||||
path={relativeSitePaths.simulateurs.index + '/*'}
|
||||
element={<Simulateurs />}
|
||||
/>
|
||||
<Route
|
||||
path={relativeSitePaths.documentation.index + '/*'}
|
||||
element={<Documentation />}
|
||||
/>
|
||||
<Route
|
||||
path={relativeSitePaths.développeur.index + '/*'}
|
||||
element={<Integration />}
|
||||
/>
|
||||
<Route
|
||||
path={relativeSitePaths.nouveautés + '/*'}
|
||||
element={<Nouveautés />}
|
||||
/>
|
||||
<Route path={relativeSitePaths.stats} element={<Stats />} />
|
||||
<Route path={relativeSitePaths.budget} element={<Budget />} />
|
||||
<Route
|
||||
path={relativeSitePaths.accessibilité}
|
||||
element={<Accessibilité />}
|
||||
/>
|
||||
|
||||
<Route path="/dev/integration-test" element={<IntegrationTest />} />
|
||||
<Route path="/dev/personas" element={<Personas />} />
|
||||
<Route
|
||||
path="/dev/integration-test"
|
||||
element={<IntegrationTest />}
|
||||
/>
|
||||
<Route path="/dev/personas" element={<Personas />} />
|
||||
|
||||
<Route path="*" element={<Route404 />} />
|
||||
</Routes>
|
||||
<Spacing xxl />
|
||||
</ErrorBoundary>
|
||||
</Container>
|
||||
<Route path="*" element={<Route404 />} />
|
||||
</Routes>
|
||||
<Spacing xxl />
|
||||
</ErrorBoundary>
|
||||
</Container>
|
||||
</main>
|
||||
|
||||
{!isEmbedded && <Footer />}
|
||||
</StyledLayout>
|
||||
|
|
|
|||
|
|
@ -96,6 +96,7 @@ export default function BarChartBranch({
|
|||
maximum,
|
||||
description,
|
||||
unit,
|
||||
...props
|
||||
}: BarChartBranchProps) {
|
||||
const [intersectionRef, brancheInViewport] = useDisplayOnIntersecting({
|
||||
threshold: 0.5,
|
||||
|
|
@ -124,7 +125,7 @@ export default function BarChartBranch({
|
|||
return disableAnimation ? (
|
||||
innerBarChartBranch
|
||||
) : (
|
||||
<animated.div ref={intersectionRef} style={style}>
|
||||
<animated.div ref={intersectionRef} style={style} {...props}>
|
||||
{innerBarChartBranch}
|
||||
</animated.div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -30,13 +30,14 @@ export default function Distribution() {
|
|||
const maximum = Math.max(...distribution.map(([, value]) => value))
|
||||
|
||||
return (
|
||||
<div className="distribution-chart__container">
|
||||
<div className="distribution-chart__container" role="list">
|
||||
{distribution.map(([sectionName, value]) => (
|
||||
<DistributionBranch
|
||||
key={sectionName}
|
||||
dottedName={sectionName}
|
||||
value={value}
|
||||
maximum={maximum}
|
||||
role="listitem"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -48,6 +49,7 @@ type DistributionBranchProps = {
|
|||
value: number
|
||||
maximum: number
|
||||
icon?: string
|
||||
role?: string
|
||||
}
|
||||
|
||||
export function DistributionBranch({
|
||||
|
|
@ -55,6 +57,7 @@ export function DistributionBranch({
|
|||
value,
|
||||
icon,
|
||||
maximum,
|
||||
...props
|
||||
}: DistributionBranchProps) {
|
||||
const branche = useContext(EngineContext).getRule(dottedName)
|
||||
|
||||
|
|
@ -66,6 +69,7 @@ export function DistributionBranch({
|
|||
icon={icon ?? branche.rawNode.icônes}
|
||||
description={branche.rawNode.résumé}
|
||||
unit="€"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -110,29 +110,39 @@ export default function PageFeedback({ customMessage }: PageFeedbackProps) {
|
|||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
role="list"
|
||||
>
|
||||
<EmojiButton onClick={() => handleFeedback('mauvais')}>
|
||||
<EmojiButton
|
||||
onClick={() => handleFeedback('mauvais')}
|
||||
role="listitem"
|
||||
>
|
||||
<Emoji
|
||||
emoji="🙁"
|
||||
aria-label="Pas satisfait, envoyer cette réponse"
|
||||
aria-hidden={false}
|
||||
/>
|
||||
</EmojiButton>
|
||||
<EmojiButton onClick={() => handleFeedback('moyen')}>
|
||||
<EmojiButton
|
||||
onClick={() => handleFeedback('moyen')}
|
||||
role="listitem"
|
||||
>
|
||||
<Emoji
|
||||
emoji="😐"
|
||||
aria-label="Moyennement satisfait, envoyer cette réponse"
|
||||
aria-hidden={false}
|
||||
/>
|
||||
</EmojiButton>
|
||||
<EmojiButton onClick={() => handleFeedback('bien')}>
|
||||
<EmojiButton onClick={() => handleFeedback('bien')} role="listitem">
|
||||
<Emoji
|
||||
emoji="🙂"
|
||||
aria-label="Plutôt satisfait, envoyer cette réponse"
|
||||
aria-hidden={false}
|
||||
/>
|
||||
</EmojiButton>
|
||||
<EmojiButton onClick={() => handleFeedback('très bien')}>
|
||||
<EmojiButton
|
||||
onClick={() => handleFeedback('très bien')}
|
||||
role="listitem"
|
||||
>
|
||||
<Emoji
|
||||
emoji="😀"
|
||||
aria-label="Très satisfait, envoyer cette réponse"
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@ export default function MoreInfosOnUs() {
|
|||
return (
|
||||
<>
|
||||
<H2>Plus d'infos sur mon-entreprise</H2>
|
||||
<Grid container spacing={2}>
|
||||
<Grid container spacing={2} role="list">
|
||||
{!pathname.startsWith(absoluteSitePaths.nouveautés) && (
|
||||
<Grid item xs={12} sm={6} md={4}>
|
||||
<Grid item xs={12} sm={6} md={4} role="listitem">
|
||||
<SmallCard
|
||||
icon={<Emoji emoji={'✨'} />}
|
||||
title={<h3>Les nouveautés</h3>}
|
||||
|
|
@ -32,7 +32,7 @@ export default function MoreInfosOnUs() {
|
|||
</Grid>
|
||||
)}
|
||||
{!pathname.startsWith(absoluteSitePaths.stats) && (
|
||||
<Grid item xs={12} sm={6} md={4}>
|
||||
<Grid item xs={12} sm={6} md={4} role="listitem">
|
||||
<SmallCard
|
||||
icon={<Emoji emoji="📊" />}
|
||||
to={absoluteSitePaths.stats}
|
||||
|
|
@ -43,7 +43,7 @@ export default function MoreInfosOnUs() {
|
|||
</Grid>
|
||||
)}
|
||||
{!pathname.startsWith(absoluteSitePaths.budget) && (
|
||||
<Grid item xs={12} sm={6} md={4}>
|
||||
<Grid item xs={12} sm={6} md={4} role="listitem">
|
||||
<SmallCard
|
||||
icon={<Emoji emoji="💶" />}
|
||||
to={absoluteSitePaths.budget}
|
||||
|
|
@ -53,7 +53,7 @@ export default function MoreInfosOnUs() {
|
|||
</SmallCard>
|
||||
</Grid>
|
||||
)}
|
||||
<Grid item xs={12} sm={6} md={4}>
|
||||
<Grid item xs={12} sm={6} md={4} role="listitem">
|
||||
<SmallCard
|
||||
icon={
|
||||
<svg
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
.payslip__container {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
.payslip__container h4 {
|
||||
.payslip__container h3 {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.85);
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
print-color-adjust: exact !important;
|
||||
|
|
@ -28,8 +28,9 @@
|
|||
padding-left: 0.5rem;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.payslip__container h4:first-child {
|
||||
.payslip__container h3:first-child {
|
||||
padding-left: 0;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.payslip__total {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import { Trans, useTranslation } from 'react-i18next'
|
|||
export const SalaireBrutSection = () => {
|
||||
return (
|
||||
<div className="payslip__salarySection">
|
||||
<H4 className="payslip__salaryTitle">
|
||||
<H4 className="payslip__salaryTitle" as="h3">
|
||||
<Trans>Salaire</Trans>
|
||||
</H4>
|
||||
<Line rule="salarié . contrat . salaire brut" />
|
||||
|
|
@ -36,7 +36,7 @@ export const SalaireNetSection = () => {
|
|||
|
||||
return (
|
||||
<div className="payslip__salarySection">
|
||||
<H4 className="payslip__salaryTitle">
|
||||
<H4 className="payslip__salaryTitle" as="h3">
|
||||
<Trans>Salaire net</Trans>
|
||||
</H4>
|
||||
<Line rule="salarié . rémunération . net . imposable" />
|
||||
|
|
|
|||
|
|
@ -409,7 +409,7 @@ export default function SchemeComparaison({
|
|||
Créer mon entreprise en tant que :
|
||||
</Trans>
|
||||
</H3>
|
||||
<AnswerGroup>
|
||||
<AnswerGroup role="list">
|
||||
{[
|
||||
!hideAssimiléSalarié && (
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export function CompanyDetails({
|
|||
spacing={3}
|
||||
>
|
||||
<Grid item xs={12} lg>
|
||||
<H4 data-test-id="currently-selected-company">
|
||||
<H4 data-test-id="currently-selected-company" as="h3">
|
||||
{' '}
|
||||
<Value expression="entreprise . nom" linkToRule={false} />{' '}
|
||||
<Value expression="entreprise . SIREN" linkToRule={false} />
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ export default function Conversation({
|
|||
align-items: baseline;
|
||||
`}
|
||||
>
|
||||
<H3 id="questionHeader">
|
||||
<H3 id="questionHeader" as="h2">
|
||||
{evaluateQuestion(engine, engine.getRule(currentQuestion))}
|
||||
<ExplicableRule
|
||||
aria-label={t('En savoir plus')}
|
||||
|
|
@ -166,7 +166,7 @@ export default function Conversation({
|
|||
) : (
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<TrackPage name="simulation terminée" />
|
||||
<H3>
|
||||
<H3 as="h2">
|
||||
<Emoji emoji="🌟" />{' '}
|
||||
<Trans i18nKey="simulation-end.title">
|
||||
Vous avez complété cette simulation
|
||||
|
|
|
|||
|
|
@ -74,85 +74,91 @@ export default function Footer() {
|
|||
<FooterContainer className="print-hidden">
|
||||
<FooterColumn>
|
||||
{language === 'fr' && (
|
||||
<ul>
|
||||
<li>
|
||||
<Link to={absoluteSitePaths.nouveautés}>
|
||||
Nouveautés <Emoji emoji="✨" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={absoluteSitePaths.stats}>
|
||||
Stats <Emoji emoji="📊" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={absoluteSitePaths.budget}>
|
||||
Budget <Emoji emoji="💶" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to={absoluteSitePaths.nouveautés}>
|
||||
Nouveautés <Emoji emoji="✨" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={absoluteSitePaths.stats}>
|
||||
Stats <Emoji emoji="📊" />
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={absoluteSitePaths.budget}>
|
||||
Budget <Emoji emoji="💶" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</FooterColumn>
|
||||
<FooterColumn>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to={absoluteSitePaths.développeur.index}>
|
||||
<Trans>Intégrer nos simulateurs</Trans>
|
||||
</Link>
|
||||
</li>
|
||||
{language === 'fr' && (
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<InscriptionBetaTesteur />
|
||||
</li>
|
||||
)}
|
||||
{hrefLink && (
|
||||
<li key={hrefLink.hrefLang}>
|
||||
<Link
|
||||
href={hrefLink.href}
|
||||
openInSameWindow
|
||||
lang={hrefLink.hrefLang === 'en' ? 'en' : 'fr'}
|
||||
>
|
||||
{hrefLink.hrefLang === 'fr' ? (
|
||||
<>
|
||||
Passer en français <Emoji emoji="🇫🇷" />
|
||||
</>
|
||||
) : hrefLink.hrefLang === 'en' ? (
|
||||
<>
|
||||
Switch to English <Emoji emoji="🇬🇧" />
|
||||
</>
|
||||
) : (
|
||||
hrefLink.hrefLang
|
||||
)}
|
||||
<Link to={absoluteSitePaths.développeur.index}>
|
||||
<Trans>Intégrer nos simulateurs</Trans>
|
||||
</Link>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
{language === 'fr' && (
|
||||
<li>
|
||||
<InscriptionBetaTesteur />
|
||||
</li>
|
||||
)}
|
||||
{hrefLink && (
|
||||
<li key={hrefLink.hrefLang}>
|
||||
<Link
|
||||
href={hrefLink.href}
|
||||
openInSameWindow
|
||||
lang={hrefLink.hrefLang === 'en' ? 'en' : 'fr'}
|
||||
>
|
||||
{hrefLink.hrefLang === 'fr' ? (
|
||||
<>
|
||||
Passer en français <Emoji emoji="🇫🇷" />
|
||||
</>
|
||||
) : hrefLink.hrefLang === 'en' ? (
|
||||
<>
|
||||
Switch to English <Emoji emoji="🇬🇧" />
|
||||
</>
|
||||
) : (
|
||||
hrefLink.hrefLang
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</nav>
|
||||
</FooterColumn>
|
||||
|
||||
<FooterColumn>
|
||||
<ul>
|
||||
<li>
|
||||
<LegalNotice />
|
||||
</li>
|
||||
<li>
|
||||
<Privacy />
|
||||
</li>
|
||||
{language === 'fr' && (
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<Link
|
||||
to={absoluteSitePaths.accessibilité}
|
||||
aria-label={t(
|
||||
'footer.accessibilitéAriaLabel',
|
||||
'Accessibilité : non conforme, en savoir plus'
|
||||
)}
|
||||
>
|
||||
<Trans i18nKey="footer.accessibilité">
|
||||
Accessibilité : non conforme
|
||||
</Trans>
|
||||
</Link>
|
||||
<LegalNotice />
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
<li>
|
||||
<Privacy />
|
||||
</li>
|
||||
{language === 'fr' && (
|
||||
<li>
|
||||
<Link
|
||||
to={absoluteSitePaths.accessibilité}
|
||||
aria-label={t(
|
||||
'footer.accessibilitéAriaLabel',
|
||||
'Accessibilité : non conforme, en savoir plus'
|
||||
)}
|
||||
>
|
||||
<Trans i18nKey="footer.accessibilité">
|
||||
Accessibilité : non conforme
|
||||
</Trans>
|
||||
</Link>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</nav>
|
||||
</FooterColumn>
|
||||
</FooterContainer>
|
||||
</ThemeProvider>
|
||||
|
|
|
|||
|
|
@ -16,25 +16,27 @@ export default function Header() {
|
|||
} = useTranslation()
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<StyledHeader>
|
||||
<Link
|
||||
to={absoluteSitePaths.index}
|
||||
aria-label={t("Logo mon entreprise, accéder à la page d'accueil")}
|
||||
>
|
||||
<StyledLogo>
|
||||
<Logo />
|
||||
</StyledLogo>
|
||||
</Link>
|
||||
<div
|
||||
css={`
|
||||
flex: 1;
|
||||
`}
|
||||
/>
|
||||
{language === 'fr' && <SearchButton />}
|
||||
</StyledHeader>
|
||||
<BrowserOnly>{language === 'fr' && <NewsBanner />}</BrowserOnly>
|
||||
</Container>
|
||||
<header>
|
||||
<Container>
|
||||
<StyledHeader>
|
||||
<Link
|
||||
to={absoluteSitePaths.index}
|
||||
aria-label={t("Logo mon entreprise, accéder à la page d'accueil")}
|
||||
>
|
||||
<StyledLogo>
|
||||
<Logo />
|
||||
</StyledLogo>
|
||||
</Link>
|
||||
<div
|
||||
css={`
|
||||
flex: 1;
|
||||
`}
|
||||
/>
|
||||
{language === 'fr' && <SearchButton />}
|
||||
</StyledHeader>
|
||||
<BrowserOnly>{language === 'fr' && <NewsBanner />}</BrowserOnly>
|
||||
</Container>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -118,13 +118,14 @@ function Distribution() {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="distribution-chart__container">
|
||||
<div className="distribution-chart__container" role="list">
|
||||
{distribution.map(([sectionName, value]) => (
|
||||
<DistributionBranch
|
||||
key={sectionName}
|
||||
dottedName={sectionName}
|
||||
value={value}
|
||||
maximum={maximum}
|
||||
role="listitem"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -137,6 +138,7 @@ type DistributionBranchProps = {
|
|||
value: number
|
||||
maximum: number
|
||||
icon?: string
|
||||
role?: string
|
||||
}
|
||||
|
||||
function DistributionBranch({
|
||||
|
|
@ -144,6 +146,7 @@ function DistributionBranch({
|
|||
value,
|
||||
icon,
|
||||
maximum,
|
||||
...props
|
||||
}: DistributionBranchProps) {
|
||||
const branche = useEngine().getRule(dottedName)
|
||||
|
||||
|
|
@ -155,6 +158,7 @@ function DistributionBranch({
|
|||
icon={icon ?? branche.rawNode.icônes}
|
||||
description={branche.rawNode.résumé}
|
||||
unit="€"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,17 +34,23 @@ export default function InstitutionsPartenaires() {
|
|||
</H3>
|
||||
<Grid container>
|
||||
<Grid item lg={12} xl={10}>
|
||||
<Message border={false}>
|
||||
<Message border={false} role="list">
|
||||
<WhenApplicable dottedName="dirigeant . indépendant . PL . CNAVPL">
|
||||
<CotisationsUrssaf rule="dirigeant . indépendant . PL . cotisations Urssaf" />
|
||||
<CaisseRetraite />
|
||||
<CotisationsUrssaf
|
||||
rule="dirigeant . indépendant . PL . cotisations Urssaf"
|
||||
role="listitem"
|
||||
/>
|
||||
<CaisseRetraite role="listitem" />
|
||||
</WhenApplicable>
|
||||
<WhenNotApplicable dottedName="dirigeant . indépendant . PL . CNAVPL">
|
||||
<CotisationsUrssaf rule="dirigeant . indépendant . cotisations et contributions" />
|
||||
<CotisationsUrssaf
|
||||
rule="dirigeant . indépendant . cotisations et contributions"
|
||||
role="listitem"
|
||||
/>
|
||||
</WhenNotApplicable>
|
||||
<ImpôtsDGFIP />
|
||||
<ImpôtsDGFIP role="listitem" />
|
||||
<Condition expression="dirigeant . indépendant . PL . PAMC . participation CPAM > 0">
|
||||
<InstitutionLine>
|
||||
<InstitutionLine role="listitem">
|
||||
<InstitutionLogo
|
||||
href="https://www.ameli.fr/assure/droits-demarches/salaries-travailleurs-independants-et-personnes-sans-emploi/emploi-independant-non-salarie/praticien-auxiliaire-medical"
|
||||
target="_blank"
|
||||
|
|
@ -92,16 +98,18 @@ export default function InstitutionsPartenaires() {
|
|||
type CotisationsUrssafProps = {
|
||||
rule: DottedName
|
||||
extraNotice?: JSX.Element
|
||||
role?: string
|
||||
}
|
||||
|
||||
export function CotisationsUrssaf({
|
||||
rule,
|
||||
extraNotice,
|
||||
...props
|
||||
}: CotisationsUrssafProps) {
|
||||
const unit = useSelector(targetUnitSelector)
|
||||
|
||||
return (
|
||||
<InstitutionLine>
|
||||
<InstitutionLine {...props}>
|
||||
<InstitutionLogo
|
||||
href="https://www.urssaf.fr/portail/home.html"
|
||||
target="_blank"
|
||||
|
|
@ -125,12 +133,12 @@ export function CotisationsUrssaf({
|
|||
)
|
||||
}
|
||||
|
||||
export function ImpôtsDGFIP() {
|
||||
export function ImpôtsDGFIP({ role }: { role?: string }) {
|
||||
const unit = useSelector(targetUnitSelector)
|
||||
|
||||
return (
|
||||
<Condition expression="impôt . montant > 0">
|
||||
<InstitutionLine>
|
||||
<InstitutionLine role={role}>
|
||||
<InstitutionLogo
|
||||
href="https://www.impots.gouv.fr"
|
||||
target="_blank"
|
||||
|
|
@ -158,7 +166,7 @@ export function ImpôtsDGFIP() {
|
|||
)
|
||||
}
|
||||
|
||||
function CaisseRetraite() {
|
||||
function CaisseRetraite({ role }: { role?: string }) {
|
||||
const engine = useEngine()
|
||||
const unit = useSelector(targetUnitSelector)
|
||||
const caisses = [
|
||||
|
|
@ -180,7 +188,7 @@ function CaisseRetraite() {
|
|||
|
||||
return (
|
||||
<Condition expression={dottedName} key={caisse}>
|
||||
<InstitutionLine>
|
||||
<InstitutionLine role={role}>
|
||||
<InstitutionLogo
|
||||
href={références && Object.values(références)[0]}
|
||||
target="_blank"
|
||||
|
|
@ -224,7 +232,7 @@ export function InstitutionsPartenairesArtisteAuteur() {
|
|||
<H3>Vos cotisations</H3>
|
||||
<Grid container>
|
||||
<Grid item lg={12}>
|
||||
<Message border={false}>
|
||||
<Message border={false} role="list">
|
||||
<CotisationsUrssaf
|
||||
rule="artiste-auteur . cotisations"
|
||||
extraNotice={
|
||||
|
|
@ -236,9 +244,10 @@ export function InstitutionsPartenairesArtisteAuteur() {
|
|||
</Trans>
|
||||
</Condition>
|
||||
}
|
||||
role="listitem"
|
||||
/>
|
||||
<Condition expression="artiste-auteur . cotisations . IRCEC > 0">
|
||||
<InstitutionLine>
|
||||
<InstitutionLine role="listitem">
|
||||
<InstitutionLogo
|
||||
href="http://www.ircec.fr/"
|
||||
target="_blank"
|
||||
|
|
|
|||
|
|
@ -2,18 +2,25 @@ import { Children, FunctionComponent, ReactNode } from 'react'
|
|||
|
||||
type AnswerGroupProps = {
|
||||
children: ReactNode
|
||||
role?: string
|
||||
}
|
||||
|
||||
const AnswerGroup: FunctionComponent<AnswerGroupProps> = ({ children }) => {
|
||||
const AnswerGroup: FunctionComponent<AnswerGroupProps> = ({
|
||||
children,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
css={`
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
`}
|
||||
{...props}
|
||||
>
|
||||
{Children.map(children, (c, i) => (
|
||||
<div key={`answerGroup-${i}`}>{c}</div>
|
||||
<div key={`answerGroup-${i}`} role="listitem">
|
||||
{c}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ export function Card({
|
|||
const linkProps = useExternalLinkProps(ariaButtonProps)
|
||||
|
||||
const buttonOrLinkProps = useButtonOrLink(ariaButtonProps, ref)
|
||||
delete buttonOrLinkProps.title
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={(theme) => ({ ...theme, darkMode: false })}>
|
||||
|
|
@ -69,7 +70,7 @@ export function Card({
|
|||
</div>
|
||||
{ctaLabel && (
|
||||
// The button is not selectable with keyboard navigation because the whole card already is
|
||||
<CardButton tabIndex={-1} $size="XS" $light $color="primary">
|
||||
<CardButton tabIndex={-1} $size="XS" $light $color="primary" as="div">
|
||||
{ctaLabel}
|
||||
{linkProps.external && <NewWindowLinkIcon />}
|
||||
</CardButton>
|
||||
|
|
|
|||
|
|
@ -11,13 +11,14 @@ export const RadioContext = createContext<RadioGroupState | null>(null)
|
|||
type RadioProps = AriaRadioProps & {
|
||||
hideRadio?: boolean
|
||||
className?: string
|
||||
role?: string
|
||||
}
|
||||
|
||||
export function Radio(props: RadioProps) {
|
||||
const { hideRadio, children } = props
|
||||
|
||||
return (
|
||||
<RadioSkeleton {...props}>
|
||||
<RadioSkeleton role="radio" aria-atomic {...props}>
|
||||
{!hideRadio && <RadioPoint />}
|
||||
<LabelBody $hideRadio={hideRadio}>{children}</LabelBody>
|
||||
</RadioSkeleton>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,10 @@ export function ToggleGroup(props: ToggleGroupProps) {
|
|||
return (
|
||||
<div className={className} {...radioGroupProps}>
|
||||
{label && <span {...labelProps}>{label}</span>}
|
||||
<ToggleGroupContainer hideRadio={props.hideRadio ?? false}>
|
||||
<ToggleGroupContainer
|
||||
hideRadio={props.hideRadio ?? false}
|
||||
role="radiogroup"
|
||||
>
|
||||
<RadioContext.Provider value={state}>{children}</RadioContext.Provider>
|
||||
</ToggleGroupContainer>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ type MessageProps = {
|
|||
type?: MessageType
|
||||
light?: boolean
|
||||
className?: string
|
||||
role?: string
|
||||
}
|
||||
|
||||
export function Message({
|
||||
|
|
@ -24,6 +25,7 @@ export function Message({
|
|||
light = false,
|
||||
children,
|
||||
className,
|
||||
role = undefined,
|
||||
}: MessageProps) {
|
||||
if (typeof children !== 'object') {
|
||||
children = <Body>{children}</Body>
|
||||
|
|
@ -48,7 +50,7 @@ export function Message({
|
|||
) : (
|
||||
<StyledIcon src={baseIcon} alt="" />
|
||||
))}
|
||||
<Wrapper>{children}</Wrapper>
|
||||
<Wrapper role={role}>{children}</Wrapper>
|
||||
</StyledMessage>
|
||||
</ThemeProvider>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5830,7 +5830,7 @@ salarié . activité partielle . heures travaillées:
|
|||
description.fr: Dans le cadre du chômage partiel, le nombre d'heure restantes
|
||||
travaillées. Doit être inférieur au temps contractuel.
|
||||
question.en: '[automatic] What is the number of hours worked during the month?'
|
||||
question.fr: Quelle est le nombre d'heures travaillées sur le mois ?
|
||||
question.fr: Quel est le nombre d'heures travaillées sur le mois ?
|
||||
suggestions.10 h/semaine.en: '[automatic] 10 hrs/week'
|
||||
suggestions.10 h/semaine.fr: 10 h/semaine
|
||||
suggestions.20 h/semaine.en: '[automatic] 20 hrs/week'
|
||||
|
|
|
|||
|
|
@ -466,9 +466,9 @@ export default function CreateCompany({ statut }: CreateCompanyProps) {
|
|||
<Trans>Ressources utiles</Trans> <Emoji emoji="🧰" />
|
||||
</H2>
|
||||
|
||||
<Grid container>
|
||||
<Grid container role="list">
|
||||
{isAutoentrepreneur && (
|
||||
<Grid item xs={12} sm={6} lg={4}>
|
||||
<Grid item xs={12} sm={6} lg={4} role="listitem">
|
||||
<Article
|
||||
title={
|
||||
<h3>
|
||||
|
|
@ -495,7 +495,7 @@ export default function CreateCompany({ statut }: CreateCompanyProps) {
|
|||
</Grid>
|
||||
)}
|
||||
{['EI', 'EIRL', 'EURL'].includes(statut) && (
|
||||
<Grid item xs={12} sm={6} lg={4}>
|
||||
<Grid item xs={12} sm={6} lg={4} role="listitem">
|
||||
<Article
|
||||
title={
|
||||
<h3>
|
||||
|
|
@ -520,7 +520,7 @@ export default function CreateCompany({ statut }: CreateCompanyProps) {
|
|||
</Grid>
|
||||
)}
|
||||
{['SAS', 'SASU'].includes(statut) && (
|
||||
<Grid item xs={12} sm={6} lg={4}>
|
||||
<Grid item xs={12} sm={6} lg={4} role="listitem">
|
||||
<Article
|
||||
title={
|
||||
<h3>
|
||||
|
|
@ -544,7 +544,7 @@ export default function CreateCompany({ statut }: CreateCompanyProps) {
|
|||
</Article>
|
||||
</Grid>
|
||||
)}
|
||||
<Grid item xs={12} sm={6} lg={4}>
|
||||
<Grid item xs={12} sm={6} lg={4} role="listitem">
|
||||
<Article
|
||||
title={
|
||||
<h3>
|
||||
|
|
@ -564,7 +564,7 @@ export default function CreateCompany({ statut }: CreateCompanyProps) {
|
|||
</Grid>
|
||||
|
||||
{i18n.language === 'fr' && isAutoentrepreneur && (
|
||||
<Grid item xs={12} sm={6} lg={4}>
|
||||
<Grid item xs={12} sm={6} lg={4} role="listitem">
|
||||
<Article
|
||||
title={<h3>Guide pratique Urssaf</h3>}
|
||||
href="https://www.autoentrepreneur.urssaf.fr/portail/files/Guides/Metropole/UrssafAutoEntrepreneurMetro.pdf"
|
||||
|
|
@ -578,12 +578,12 @@ export default function CreateCompany({ statut }: CreateCompanyProps) {
|
|||
)}
|
||||
|
||||
{isAutoentrepreneur && (
|
||||
<Grid item xs={12} sm={6} lg={4}>
|
||||
<Grid item xs={12} sm={6} lg={4} role="listitem">
|
||||
<FAQAutoEntrepreneurArticle />
|
||||
</Grid>
|
||||
)}
|
||||
{i18n.language === 'fr' && ['EI', 'EIRL', 'EURL'].includes(statut) && (
|
||||
<Grid item xs={12} sm={6} lg={4}>
|
||||
<Grid item xs={12} sm={6} lg={4} role="listitem">
|
||||
<Article
|
||||
title={<h3>Guide Urssaf pour les travailleur indépendant</h3>}
|
||||
href="https://www.urssaf.fr/portail/files/live/sites/urssaf/files/documents/Diaporama_TI_statuts_hors_AE.pdf"
|
||||
|
|
|
|||
|
|
@ -72,8 +72,8 @@ export default function Créer() {
|
|||
<Trans>Ressources utiles</Trans>
|
||||
</H2>
|
||||
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} sm={6} lg={4}>
|
||||
<Grid container spacing={3} role="list">
|
||||
<Grid item xs={12} sm={6} lg={4} role="listitem">
|
||||
<Card
|
||||
title={t(
|
||||
'créer.ressources.listeStatuts.title',
|
||||
|
|
@ -88,7 +88,7 @@ export default function Créer() {
|
|||
</Trans>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} lg={4}>
|
||||
<Grid item xs={12} sm={6} lg={4} role="listitem">
|
||||
<Card
|
||||
title={t(
|
||||
'créer.ressources.comparaison.title',
|
||||
|
|
@ -104,7 +104,7 @@ export default function Créer() {
|
|||
</Trans>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} lg={4}>
|
||||
<Grid item xs={12} sm={6} lg={4} role="listitem">
|
||||
<Card
|
||||
title={t(
|
||||
'créer.ressources.autoEntrepreneur.title',
|
||||
|
|
|
|||
|
|
@ -31,139 +31,142 @@ export default function Landing() {
|
|||
ogImage="/logo-share.png"
|
||||
/>
|
||||
<Header />
|
||||
<Container>
|
||||
<PageHeader
|
||||
titre={
|
||||
<Trans i18nKey="landing.title">
|
||||
L'assistant officiel des entrepreneurs
|
||||
</Trans>
|
||||
}
|
||||
picture={illustrationSvg}
|
||||
<main>
|
||||
<Container>
|
||||
<PageHeader
|
||||
titre={
|
||||
<Trans i18nKey="landing.title">
|
||||
L'assistant officiel des entrepreneurs
|
||||
</Trans>
|
||||
}
|
||||
picture={illustrationSvg}
|
||||
>
|
||||
<Intro>
|
||||
<Trans i18nKey="landing.subtitle">
|
||||
Les ressources nécessaires pour développer votre activité, du
|
||||
statut juridique à l'embauche.
|
||||
</Trans>
|
||||
</Intro>
|
||||
</PageHeader>
|
||||
</Container>
|
||||
<Container
|
||||
darkMode
|
||||
backgroundColor={(theme) => theme.colors.bases.primary[600]}
|
||||
>
|
||||
<Intro>
|
||||
<Trans i18nKey="landing.subtitle">
|
||||
Les ressources nécessaires pour développer votre activité, du
|
||||
statut juridique à l'embauche.
|
||||
</Trans>
|
||||
</Intro>
|
||||
</PageHeader>
|
||||
</Container>
|
||||
<Container
|
||||
darkMode
|
||||
backgroundColor={(theme) => theme.colors.bases.primary[600]}
|
||||
>
|
||||
<SearchOrCreate />
|
||||
<Spacing xl />
|
||||
</Container>
|
||||
<Container>
|
||||
<Trans i18nKey="landing.outils">
|
||||
<H2>Les outils à votre disposition</H2>
|
||||
<Body>
|
||||
Nous mettons à votre disposition des assistants et simulateurs pour
|
||||
vous aider à la gestion de votre entreprise, anticiper les
|
||||
prélèvements et planifier votre trésorerie en conséquence.
|
||||
</Body>
|
||||
</Trans>
|
||||
|
||||
<Grid
|
||||
container
|
||||
spacing={4}
|
||||
css={`
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
`}
|
||||
>
|
||||
<SimulateurCard {...simulators.salarié} />
|
||||
<SimulateurCard {...simulators['auto-entrepreneur']} />
|
||||
<SimulateurCard {...simulators['profession-libérale']} />
|
||||
<SearchOrCreate />
|
||||
<Spacing xl />
|
||||
</Container>
|
||||
<Container>
|
||||
<Trans i18nKey="landing.outils">
|
||||
<H2>Les outils à votre disposition</H2>
|
||||
<Body>
|
||||
Nous mettons à votre disposition des assistants et simulateurs
|
||||
pour vous aider à la gestion de votre entreprise, anticiper les
|
||||
prélèvements et planifier votre trésorerie en conséquence.
|
||||
</Body>
|
||||
</Trans>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
container
|
||||
spacing={4}
|
||||
css={`
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
`}
|
||||
>
|
||||
<Button
|
||||
size="XL"
|
||||
to={absoluteSitePaths.simulateurs.index}
|
||||
<SimulateurCard {...simulators.salarié} />
|
||||
<SimulateurCard {...simulators['auto-entrepreneur']} />
|
||||
<SimulateurCard {...simulators['profession-libérale']} />
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
css={`
|
||||
white-space: no-wrap;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
`}
|
||||
>
|
||||
<Trans i18nKey="landing.choice.simulators.title">
|
||||
Découvrir tous les simulateurs et assistants
|
||||
<Button
|
||||
size="XL"
|
||||
to={absoluteSitePaths.simulateurs.index}
|
||||
css={`
|
||||
white-space: no-wrap;
|
||||
margin: auto;
|
||||
`}
|
||||
>
|
||||
<Trans i18nKey="landing.choice.simulators.title">
|
||||
Découvrir tous les simulateurs et assistants
|
||||
</Trans>
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Spacing xl />
|
||||
</Container>
|
||||
<Container backgroundColor={(theme) => theme.colors.bases.primary[100]}>
|
||||
<Spacing lg />
|
||||
<Grid
|
||||
container
|
||||
css={`
|
||||
align-items: flex-end;
|
||||
`}
|
||||
>
|
||||
<HideOnMobile item xs={2} md={2}>
|
||||
<img
|
||||
src={illustration2Svg}
|
||||
css={`
|
||||
width: 100%;
|
||||
padding-right: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
`}
|
||||
alt=""
|
||||
/>
|
||||
</HideOnMobile>
|
||||
<Grid item md={10}>
|
||||
<Trans i18nKey="landing.aboutUs">
|
||||
<H2>Qui sommes-nous ?</H2>
|
||||
|
||||
<Body>
|
||||
Nous sommes une petite{' '}
|
||||
<Link
|
||||
aria-label="équipe, accéder à notre page de présentation d'équipe, nouvelle fenêtre"
|
||||
href="https://beta.gouv.fr/startups/mon-entreprise.html#equipe"
|
||||
>
|
||||
équipe
|
||||
</Link>{' '}
|
||||
autonome et pluridisciplinaire au sein de{' '}
|
||||
<Link
|
||||
href="https://www.urssaf.fr"
|
||||
aria-label="l'URSSAF, accéder au site urssaf.fr, nouvelle fenêtre"
|
||||
>
|
||||
l’Urssaf
|
||||
</Link>
|
||||
. Nous avons à cœur d’être au près de vos besoins afin
|
||||
d’améliorer en permanence ce site conformément à l'approche{' '}
|
||||
<Link
|
||||
href="https://beta.gouv.fr/approche/manifeste"
|
||||
aria-label="beta.gouv.fr, accéder au site beta.gouv.fr, nouvelle fenêtre"
|
||||
>
|
||||
beta.gouv.fr
|
||||
</Link>
|
||||
.
|
||||
</Body>
|
||||
|
||||
<Body>
|
||||
Nous avons développé ce site pour accompagner les créateurs
|
||||
d’entreprise dans le développement de leur activité.
|
||||
</Body>
|
||||
|
||||
<Body>
|
||||
Notre objectif est de lever toutes les incertitudes vis à vis
|
||||
de l’administration afin que vous puissiez vous concentrer sur
|
||||
ce qui compte : votre activité.
|
||||
</Body>
|
||||
</Trans>
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Spacing xl />
|
||||
</Container>
|
||||
<Container backgroundColor={(theme) => theme.colors.bases.primary[100]}>
|
||||
<Spacing lg />
|
||||
<Grid
|
||||
container
|
||||
css={`
|
||||
align-items: flex-end;
|
||||
`}
|
||||
>
|
||||
<HideOnMobile item xs={2} md={2}>
|
||||
<img
|
||||
src={illustration2Svg}
|
||||
css={`
|
||||
width: 100%;
|
||||
padding-right: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
`}
|
||||
alt=""
|
||||
/>
|
||||
</HideOnMobile>
|
||||
<Grid item md={10}>
|
||||
<Trans i18nKey="landing.aboutUs">
|
||||
<H2>Qui sommes-nous ?</H2>
|
||||
<Spacing lg />
|
||||
</Container>
|
||||
</main>
|
||||
|
||||
<Body>
|
||||
Nous sommes une petite{' '}
|
||||
<Link
|
||||
aria-label="équipe, accéder à notre page de présentation d'équipe, nouvelle fenêtre"
|
||||
href="https://beta.gouv.fr/startups/mon-entreprise.html#equipe"
|
||||
>
|
||||
équipe
|
||||
</Link>{' '}
|
||||
autonome et pluridisciplinaire au sein de{' '}
|
||||
<Link
|
||||
href="https://www.urssaf.fr"
|
||||
aria-label="l'URSSAF, accéder au site urssaf.fr, nouvelle fenêtre"
|
||||
>
|
||||
l’Urssaf
|
||||
</Link>
|
||||
. Nous avons à cœur d’être au près de vos besoins afin
|
||||
d’améliorer en permanence ce site conformément à l'approche{' '}
|
||||
<Link
|
||||
href="https://beta.gouv.fr/approche/manifeste"
|
||||
aria-label="beta.gouv.fr, accéder au site beta.gouv.fr, nouvelle fenêtre"
|
||||
>
|
||||
beta.gouv.fr
|
||||
</Link>
|
||||
.
|
||||
</Body>
|
||||
|
||||
<Body>
|
||||
Nous avons développé ce site pour accompagner les créateurs
|
||||
d’entreprise dans le développement de leur activité.
|
||||
</Body>
|
||||
|
||||
<Body>
|
||||
Notre objectif est de lever toutes les incertitudes vis à vis de
|
||||
l’administration afin que vous puissiez vous concentrer sur ce
|
||||
qui compte : votre activité.
|
||||
</Body>
|
||||
</Trans>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Spacing lg />
|
||||
</Container>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -79,13 +79,14 @@ function RepartitionCotisations() {
|
|||
<H2>
|
||||
<Trans>À quoi servent mes cotisations ?</Trans>
|
||||
</H2>
|
||||
<div className="distribution-chart__container">
|
||||
<div className="distribution-chart__container" role="list">
|
||||
{cotisations
|
||||
.filter(({ value }) => Boolean(value))
|
||||
.map((cotisation) => (
|
||||
<DistributionBranch
|
||||
key={cotisation.dottedName}
|
||||
maximum={maximum}
|
||||
role="listitem"
|
||||
{...cotisation}
|
||||
/>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -94,13 +94,13 @@ export const ActivitéSelection = ({
|
|||
|
||||
return (
|
||||
<>
|
||||
<Grid container spacing={2}>
|
||||
<Grid container spacing={2} role="list">
|
||||
{activités.map((title) => {
|
||||
const selected = state?.[title].effectuée
|
||||
const answered = activitéRépondue.includes(title)
|
||||
|
||||
return (
|
||||
<Grid key={title} item xs={6} sm={4} md={3}>
|
||||
<Grid key={title} item xs={6} sm={4} md={3} role="listitem">
|
||||
<ActiviteCard
|
||||
title={title}
|
||||
interactive
|
||||
|
|
|
|||
|
|
@ -46,73 +46,132 @@ export default function Simulateurs() {
|
|||
</Intro>
|
||||
</PageHeader>
|
||||
<section>
|
||||
<H2>
|
||||
<H2 id="salarie-employeurs">
|
||||
<Trans>Salariés et employeurs</Trans>
|
||||
</H2>
|
||||
<Grid container spacing={3}>
|
||||
<SimulateurCard {...simulators.salarié} />
|
||||
<SimulateurCard {...simulators['chômage-partiel']} />
|
||||
<Grid
|
||||
role="list"
|
||||
container
|
||||
spacing={3}
|
||||
aria-labelledby="salarie-employeurs"
|
||||
>
|
||||
<SimulateurCard {...simulators.salarié} role="listitem" />
|
||||
<SimulateurCard {...simulators['chômage-partiel']} role="listitem" />
|
||||
</Grid>
|
||||
|
||||
<H3>
|
||||
<H3 id="revenu-dirigeant">
|
||||
<Trans>Revenu du dirigeant par statut</Trans>
|
||||
</H3>
|
||||
<Grid container spacing={3}>
|
||||
<SimulateurCard small {...simulators['auto-entrepreneur']} />
|
||||
<SimulateurCard small {...simulators['entreprise-individuelle']} />
|
||||
<SimulateurCard small {...simulators.eirl} />
|
||||
<SimulateurCard small {...simulators.sasu} />
|
||||
<SimulateurCard small {...simulators.eurl} />
|
||||
<SimulateurCard small {...simulators['comparaison-statuts']} />
|
||||
<Grid
|
||||
container
|
||||
spacing={3}
|
||||
role="list"
|
||||
aria-labelledby="revenu-dirigeant"
|
||||
>
|
||||
<SimulateurCard
|
||||
small
|
||||
{...simulators['auto-entrepreneur']}
|
||||
role="listitem"
|
||||
/>
|
||||
<SimulateurCard
|
||||
small
|
||||
{...simulators['entreprise-individuelle']}
|
||||
role="listitem"
|
||||
/>
|
||||
<SimulateurCard small {...simulators.eirl} role="listitem" />
|
||||
<SimulateurCard small {...simulators.sasu} role="listitem" />
|
||||
<SimulateurCard small {...simulators.eurl} role="listitem" />
|
||||
<SimulateurCard
|
||||
small
|
||||
{...simulators['comparaison-statuts']}
|
||||
role="listitem"
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<H2>
|
||||
<H2 id="travailleurs-ns">
|
||||
<Trans>Travailleurs Non Salariés (TNS)</Trans>
|
||||
</H2>
|
||||
|
||||
<Grid container spacing={3}>
|
||||
<SimulateurCard {...simulators.indépendant} />
|
||||
<SimulateurCard {...simulators['artiste-auteur']} />
|
||||
<SimulateurCard {...simulators['profession-libérale']} />
|
||||
<Grid
|
||||
container
|
||||
spacing={3}
|
||||
role="list"
|
||||
aria-labelledby="travailleurs-ns"
|
||||
>
|
||||
<SimulateurCard {...simulators.indépendant} role="listitem" />
|
||||
<SimulateurCard {...simulators['artiste-auteur']} role="listitem" />
|
||||
<SimulateurCard
|
||||
{...simulators['profession-libérale']}
|
||||
role="listitem"
|
||||
/>
|
||||
</Grid>
|
||||
<>
|
||||
<H3>
|
||||
<H3 id="professions-lib">
|
||||
<Trans>Professions libérales</Trans>
|
||||
</H3>
|
||||
<Grid container spacing={3}>
|
||||
<SimulateurCard small {...simulators['auxiliaire-médical']} />
|
||||
<SimulateurCard small {...simulators['chirurgien-dentiste']} />
|
||||
<SimulateurCard small {...simulators.médecin} />
|
||||
<SimulateurCard small {...simulators['sage-femme']} />
|
||||
<SimulateurCard small {...simulators.pharmacien} />
|
||||
<SimulateurCard small {...simulators.avocat} />
|
||||
<SimulateurCard small {...simulators['expert-comptable']} />
|
||||
<Grid
|
||||
container
|
||||
spacing={3}
|
||||
role="list"
|
||||
aria-labelledby="professions-lib"
|
||||
>
|
||||
<SimulateurCard
|
||||
small
|
||||
{...simulators['auxiliaire-médical']}
|
||||
role="listitem"
|
||||
/>
|
||||
<SimulateurCard
|
||||
small
|
||||
{...simulators['chirurgien-dentiste']}
|
||||
role="listitem"
|
||||
/>
|
||||
<SimulateurCard small {...simulators.médecin} role="listitem" />
|
||||
<SimulateurCard
|
||||
small
|
||||
{...simulators['sage-femme']}
|
||||
role="listitem"
|
||||
/>
|
||||
<SimulateurCard small {...simulators.pharmacien} role="listitem" />
|
||||
<SimulateurCard small {...simulators.avocat} role="listitem" />
|
||||
<SimulateurCard
|
||||
small
|
||||
{...simulators['expert-comptable']}
|
||||
role="listitem"
|
||||
/>
|
||||
</Grid>
|
||||
</>
|
||||
|
||||
<H3>
|
||||
<H3 id="assistants">
|
||||
<Trans>
|
||||
Assistants à la déclaration de revenu 2021 des indépendants
|
||||
</Trans>
|
||||
</H3>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} role="list" aria-labelledby="assistants">
|
||||
<SimulateurCard
|
||||
{...simulators['déclaration-charges-sociales-indépendant']}
|
||||
role="listitem"
|
||||
/>
|
||||
<SimulateurCard
|
||||
{...simulators['exonération-covid']}
|
||||
role="listitem"
|
||||
/>
|
||||
<SimulateurCard {...simulators['exonération-covid']} />
|
||||
<SimulateurCard
|
||||
{...simulators['déclaration-revenu-indépendant-beta']}
|
||||
role="listitem"
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<H2>
|
||||
<H2 id="autres-outils">
|
||||
<Trans>Autres outils</Trans>
|
||||
</H2>
|
||||
<Grid container spacing={3}>
|
||||
<SimulateurCard {...simulators.is} />
|
||||
<SimulateurCard {...simulators.dividendes} />
|
||||
<SimulateurCard {...simulators['économie-collaborative']} />
|
||||
<SimulateurCard {...simulators['demande-mobilité']} />
|
||||
<Grid container spacing={3} role="list" aria-labelledby="autres-outils">
|
||||
<SimulateurCard {...simulators.is} role="listitem" />
|
||||
<SimulateurCard {...simulators.dividendes} role="listitem" />
|
||||
<SimulateurCard
|
||||
{...simulators['économie-collaborative']}
|
||||
role="listitem"
|
||||
/>
|
||||
<SimulateurCard {...simulators['demande-mobilité']} role="listitem" />
|
||||
</Grid>
|
||||
</section>
|
||||
<section>
|
||||
|
|
@ -151,6 +210,7 @@ export function SimulateurCard({
|
|||
iframePath,
|
||||
fromGérer = false,
|
||||
icône,
|
||||
...props
|
||||
}: {
|
||||
shortName: ExtractFromSimuData<'shortName'>
|
||||
meta: ExtractFromSimuData<'meta'>
|
||||
|
|
@ -160,6 +220,7 @@ export function SimulateurCard({
|
|||
icône: ExtractFromSimuData<'icône'>
|
||||
small?: boolean
|
||||
fromGérer?: boolean
|
||||
role?: string
|
||||
}) {
|
||||
const isIframe = useIsEmbedded()
|
||||
const { t } = useTranslation()
|
||||
|
|
@ -167,7 +228,7 @@ export function SimulateurCard({
|
|||
return (
|
||||
<ThemeProvider theme={(theme) => ({ ...theme, darkMode: false })}>
|
||||
{small ? (
|
||||
<Grid item xs={12} sm={6} md={6} lg={4}>
|
||||
<Grid item xs={12} sm={6} md={6} lg={4} {...props}>
|
||||
<SmallCard
|
||||
icon={<Emoji emoji={icône} />}
|
||||
to={{
|
||||
|
|
@ -183,7 +244,7 @@ export function SimulateurCard({
|
|||
/>
|
||||
</Grid>
|
||||
) : (
|
||||
<Grid item xs={12} sm={6} md={6} lg={4}>
|
||||
<Grid item xs={12} sm={6} md={6} lg={4} {...props}>
|
||||
<Card
|
||||
title={shortName}
|
||||
icon={<Emoji emoji={icône} />}
|
||||
|
|
|
|||
|
|
@ -33,27 +33,27 @@ export function NextSteps({ iframePath, nextSteps }: NextStepsProps) {
|
|||
<H2>
|
||||
<Trans>Ressources utiles</Trans>
|
||||
</H2>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} role="list">
|
||||
<Condition expression="dirigeant . auto-entrepreneur">
|
||||
<Grid item xs={12} sm={6} lg={4}>
|
||||
<Grid item xs={12} sm={6} lg={4} role="listitem">
|
||||
<FAQAutoEntrepreneurArticle />
|
||||
</Grid>
|
||||
</Condition>
|
||||
|
||||
{guideUrssaf && language === 'fr' && (
|
||||
<Grid item xs={12} sm={6} lg={4}>
|
||||
<Grid item xs={12} sm={6} lg={4} role="listitem">
|
||||
<GuideURSSAFCard guideUrssaf={guideUrssaf} />
|
||||
</Grid>
|
||||
)}
|
||||
|
||||
{nextSteps?.map((simulatorId) => (
|
||||
<Grid item xs={12} sm={6} lg={4} key={simulatorId}>
|
||||
<Grid item xs={12} sm={6} lg={4} key={simulatorId} role="listitem">
|
||||
<SimulatorRessourceCard simulatorId={simulatorId} />
|
||||
</Grid>
|
||||
))}
|
||||
|
||||
{iframePath && (
|
||||
<Grid item xs={12} sm={6} lg={4}>
|
||||
<Grid item xs={12} sm={6} lg={4} role="listitem">
|
||||
<IframeIntegrationCard
|
||||
iframePath={iframePath}
|
||||
sitePaths={absoluteSitePaths}
|
||||
|
|
|
|||
|
|
@ -10,11 +10,19 @@ export default function SalariéSimulation() {
|
|||
<>
|
||||
<TrackPage chapter1="simulateurs" name="accueil_pamc" />
|
||||
<H2>Quelle profession exercez-vous ?</H2>
|
||||
<div className="ui__ small box-container">
|
||||
<SimulateurCard small {...simulators['auxiliaire-médical']} />
|
||||
<SimulateurCard small {...simulators['chirurgien-dentiste']} />
|
||||
<SimulateurCard small {...simulators.médecin} />
|
||||
<SimulateurCard small {...simulators['sage-femme']} />
|
||||
<div className="ui__ small box-container" role="list">
|
||||
<SimulateurCard
|
||||
small
|
||||
{...simulators['auxiliaire-médical']}
|
||||
role="listitem"
|
||||
/>
|
||||
<SimulateurCard
|
||||
small
|
||||
{...simulators['chirurgien-dentiste']}
|
||||
role="listitem"
|
||||
/>
|
||||
<SimulateurCard small {...simulators.médecin} role="listitem" />
|
||||
<SimulateurCard small {...simulators['sage-femme']} role="listitem" />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -223,7 +223,7 @@ function getSimulatorsData({ t, sitePaths, language }: SimulatorsDataParams) {
|
|||
pour l'option micro-fiscal).
|
||||
</Body>
|
||||
<Body>La formule de calcul complète est donc :</Body>
|
||||
<blockquote>
|
||||
<blockquote role="presentation">
|
||||
<strong>
|
||||
Revenu net = Chiffres d'affaires − Dépenses professionnelles -
|
||||
Cotisations sociales
|
||||
|
|
@ -368,7 +368,7 @@ function getSimulatorsData({ t, sitePaths, language }: SimulatorsDataParams) {
|
|||
économiquement.
|
||||
</Body>
|
||||
<Body>La formule de calcul complète est donc :</Body>
|
||||
<blockquote>
|
||||
<blockquote role="presentation">
|
||||
<strong>
|
||||
Revenu net = Chiffres d'affaires − Cotisations sociales − Dépenses
|
||||
professionnelles
|
||||
|
|
|
|||
|
|
@ -163,7 +163,7 @@ export default function EndBlock({ fields, missingValues }: EndBlockProps) {
|
|||
</Condition>
|
||||
<Suspense
|
||||
fallback={
|
||||
<blockquote>
|
||||
<blockquote role="presentation">
|
||||
<small>Génération du pdf en cours...</small>
|
||||
</blockquote>
|
||||
}
|
||||
|
|
@ -183,7 +183,7 @@ export default function EndBlock({ fields, missingValues }: EndBlockProps) {
|
|||
>
|
||||
{({ url, loading, error }) =>
|
||||
error ? (
|
||||
<blockquote>
|
||||
<blockquote role="presentation">
|
||||
<strong>Erreur lors de la génération du pdf</strong>
|
||||
<br />
|
||||
<small>
|
||||
|
|
@ -192,7 +192,7 @@ export default function EndBlock({ fields, missingValues }: EndBlockProps) {
|
|||
</small>
|
||||
</blockquote>
|
||||
) : loading ? (
|
||||
<blockquote>
|
||||
<blockquote role="presentation">
|
||||
<small>Génération du pdf en cours...</small>
|
||||
</blockquote>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -393,26 +393,26 @@ function Home() {
|
|||
<H2>
|
||||
<Trans>Ressources utiles</Trans>
|
||||
</H2>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} role="list">
|
||||
{dirigeantSimulateur === 'indépendant' && i18n.language === 'fr' && (
|
||||
<Grid item sm={12} md={4}>
|
||||
<MobiliteCard />
|
||||
</Grid>
|
||||
)}
|
||||
<WhenNotApplicable dottedName="entreprise . catégorie juridique . EI . auto-entrepreneur">
|
||||
<Grid item sm={12} md={4}>
|
||||
<Grid item sm={12} md={4} role="listitem">
|
||||
<DemarcheEmbaucheCard />
|
||||
</Grid>
|
||||
</WhenNotApplicable>
|
||||
<WhenApplicable dottedName="entreprise . catégorie juridique . EI . auto-entrepreneur">
|
||||
<Grid item sm={12} md={4}>
|
||||
<Grid item sm={12} md={4} role="listitem">
|
||||
<AutoEntrepreneurCard />
|
||||
</Grid>
|
||||
</WhenApplicable>
|
||||
<Grid item sm={12} md={4}>
|
||||
<Grid item sm={12} md={4} role="listitem">
|
||||
<SecuriteSocialeCard />
|
||||
</Grid>
|
||||
<Grid item sm={12} md={4}>
|
||||
<Grid item sm={12} md={4} role="listitem">
|
||||
<AnnuaireEntreprises />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -215,8 +215,8 @@ export default function Integration() {
|
|||
<H2>
|
||||
<Trans>Liste des intégrations</Trans>
|
||||
</H2>
|
||||
<Grid container id="integrationList" spacing={2}>
|
||||
<Grid item xs={12} md={6} xl={4}>
|
||||
<Grid role="list" container id="integrationList" spacing={2}>
|
||||
<Grid role="listitem" item xs={12} md={6} xl={4}>
|
||||
<Article
|
||||
title="Urssaf"
|
||||
href="https://www.urssaf.fr/portail/home/utile-et-pratique/estimateur-de-cotisations-2019.html?ut=estimateurs"
|
||||
|
|
@ -225,7 +225,7 @@ export default function Integration() {
|
|||
<Logo src={urssafLogo} alt="Logo urssaf.fr" />
|
||||
</Article>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} xl={4}>
|
||||
<Grid role="listitem" item xs={12} md={6} xl={4}>
|
||||
<Article
|
||||
title="CCI de France"
|
||||
href="http://les-aides.fr/embauche"
|
||||
|
|
@ -234,7 +234,7 @@ export default function Integration() {
|
|||
<Logo src={cciLogo} alt="Logo Les-aides.fr" />
|
||||
</Article>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} xl={4}>
|
||||
<Grid role="listitem" item xs={12} md={6} xl={4}>
|
||||
<Article
|
||||
title="Code du travail numérique"
|
||||
href="https://code.travail.gouv.fr/outils/simulateur-embauche"
|
||||
|
|
@ -243,7 +243,7 @@ export default function Integration() {
|
|||
<Logo src={minTraLogo} alt="Logo Ministère du travail" />
|
||||
</Article>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} xl={4}>
|
||||
<Grid role="listitem" item xs={12} md={6} xl={4}>
|
||||
<Article
|
||||
title="Pôle Emploi"
|
||||
href="https://entreprise.pole-emploi.fr/cout-salarie/"
|
||||
|
|
@ -252,7 +252,7 @@ export default function Integration() {
|
|||
<Logo src={poleEmploiLogo} alt="" />
|
||||
</Article>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} xl={4}>
|
||||
<Grid role="listitem" item xs={12} md={6} xl={4}>
|
||||
<Article
|
||||
title="Une idée ?"
|
||||
href="mailto:contact@mon-entreprise.beta.gouv.fr?subject=Proposition de réutilisation"
|
||||
|
|
@ -290,7 +290,7 @@ function EnSavoirPlusCSP() {
|
|||
redimensionnement automatique au contenu affiché.
|
||||
</Body>
|
||||
</Trans>
|
||||
<blockquote>
|
||||
<blockquote role="presentation">
|
||||
Failed to execute 'postMessage' on 'DOMWindow': The target origin
|
||||
provided ('https://mon-entreprise.urssaf.fr') does not match the
|
||||
recipient window's origin
|
||||
|
|
|
|||
Loading…
Reference in New Issue