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

RGAA : mise en conformité Médias (#2305) 

* feat: Ajoute la transcription de la vidéo vidéo

* feat: Utilise AccompagnyingMessage

* feat: Ajoute composant FoldingMessage qui affiche le transcript

* feat: Ajout d'un paramètre pour empêcher la traduction d'un texte + améliore FoldingMessage
pull/2308/head
Benjamin Arias 2022-10-06 09:18:38 +02:00 committed by GitHub
parent c4c103f013
commit 4a85579a42
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 235 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
site/scripts/i18n/utils.js
View File

@ -97,7 +97,11 @@ export const getUiMissingTranslations = () => {
const missingTranslations = Object.entries(staticKeys)
.filter(([key, valueInSource]) => {
if (key.match(/^\{.*\}$/) || valueInSource === 'NO_TRANSLATION') {
if (
key.match(/^\{.*\}$/) ||
valueInSource === 'NO_TRANSLATION' ||
key.includes('NO_AUTO_TRANSLATION')
) {
return false
}
const keys = key.split(/(?<=[A-zÀ-ü0-9])\.(?=[A-zÀ-ü0-9])/)

67
site/source/components/ui/FoldingMessage.tsx Normal file
View File

@ -0,0 +1,67 @@
import { Message, MessageType } from '@/design-system'
import { Button } from '@/design-system/buttons'
import { Spacing } from '@/design-system/layout'
import { Link } from '@/design-system/typography/link'
import { Intro } from '@/design-system/typography/paragraphs'
import { ReactNode, useState } from 'react'
import { Trans } from 'react-i18next'
import { FromTop } from './animate'
type FoldingMessageProps = {
title: string
children: ReactNode
isDefaultFolded?: boolean
unfoldButtonLabel: string
type?: MessageType | undefined
}
export default function FoldingMessage({
title,
children,
isDefaultFolded = true,
unfoldButtonLabel,
type = 'primary',
...props
}: FoldingMessageProps) {
const [isFolded, setIsFolded] = useState<boolean>(isDefaultFolded)
return (
<Message type={type} {...props}>
<div className="print-hidden">
<Intro as="h2">
<Trans>{title}</Trans>{' '}
{isFolded && (
<Link
onPress={() => setIsFolded(false)}
aria-expanded={false}
aria-controls="warning-text"
>
<Trans i18nKey="simulateurs.warning.plus">
{unfoldButtonLabel}
</Trans>
</Link>
)}
</Intro>
{!isFolded && (
<FromTop>
<div id="warning-text">{children}</div>
<div className="ui__ answer-group print-hidden">
<Button
size="XS"
aria-expanded
aria-controls="warning-text"
light
color="primary"
onPress={() => setIsFolded(true)}
>
<Trans>Fermer</Trans>
</Button>
<Spacing md />
</div>
</FromTop>
)}
</div>
<div className="print-only">{children}</div>
</Message>
)
}

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

@ -7,7 +7,7 @@ import errorIcon from './errorIcon.svg'
import infoIcon from './infoIcon.svg'
import successIcon from './successIcon.svg'
type MessageType = 'primary' | 'secondary' | 'info' | 'error' | 'success'
export type MessageType = 'primary' | 'secondary' | 'info' | 'error' | 'success'
type MessageProps = {
children: React.ReactNode
icon?: boolean

36
site/source/locales/ui-en.yaml
View File

@ -2060,6 +2060,42 @@ sécu:
page:
titre: Social Security
titre: Social security in France
transcript-NO_AUTO_TRANSLATION: "<0>Three minutes to understand the challenges
of social security.</0><1>The purpose of social security is to protect
people living in France when certain events occur during their
lives.</1><2>Its budget consists of expenses mainly in the form of benefits
and of income, financed partly by contributions. Income is managed by the
collection branch made up of the URSSAF agencies. Regarding expenses, there
are four branches. The health insurance branch covers hospital costs,
medecine and consultations. The retirement pension branch registers on each
person's old-age account their income received throughout their working life
using companies online declarations in order to calculate and pay pensions.
the occupational risks branch covers the costs related to occupational
diseases and accidents at work. the family branch provides various benefits
regarding birth and child care and allowances for education and housing for
example. These four branches form the general scheme of the Social Security
system. Besides the general scheme there are specific organizations such as
the MSA for farmers and special schemes.</2><3>All people living in France
help to fund the Social Security system which in return provides cover for
all of them. The principle is that of a \"common pot\" which works through
solidarity each person pays contributions based on their income rather than
on their risks.</3><4>The Social Security system by providing pensions and
paying for medical care has extended life expectancy in France by three
months every year in the past 20 years. This progress leads to financing
difficulties: longer life expectancy implies more pensions and higher health
expenses which unbalance the system. To restore its balance, measures are
being taken especially by extending the contributions duration.</4><5>The
Social Security system is also increasing its services such as childcare
capacity for children aged up to three so their parents can keep working. It
is also developing preventive actions, running immunization campaigns
programs for the early screening of certain diseases, actions for post
Hospital support at home, and information about fall danger among the
elderly.</5><6>Founded seventy years ago, the French Social Security system
has not only enabled the French to live longer but also better it will
continue evolving to build the services that meet their needs you.</6>"
videoTitle: <0>Explanatory video "3 minutes to understand the French Social
Security system"</0>
videoTranscriptTitle: Transcript of the video
taux: rate
taxe: tax
tous les 6 mois: every 6 months

43
site/source/locales/ui-fr.yaml
View File

@ -1697,6 +1697,49 @@ sécu:
travail, chômage ou encore la retraite.</2>
page:
titre: Sécurité sociale
transcript-NO_AUTO_TRANSLATION: "<0>Trois minutes pour comprendre les enjeux de
la sécurité sociale.</0><1>La sécurité sociale a pour objectif de protéger
les personnes qui résident en France face à certains évènements qui
surviennent tout au long de leur vie.</1><2>Son budget est composé dépenses
principalement sous la forme de prestations et de recettes, alimentés en
partie par les contributions. Les recettes sont gérées bar la branche des
recouvrements composé des URSSAF. Pour les dépenses, il existe quatre
branches. La branche Assurance-Maladie permet de couvrir les dépenses
d’hospitalisation, de médicaments et consultation des professionnels de
santé. La branche retraite prend en charge l’inscription des revenus sur le
compte vieillesse de chacun tout au long de sa vie active, à partir des
déclarations internet des entreprises, ce qui permet ensuite de calculer le
montant des retraites et de les verser. La branche accidents du travail
prend en charge les frais liés aux maladies professionnelles et aux
accidents du travail. La branche famille verse différents types de
prestations liées à la naissance, à la garde d’enfant, aux aides à
l’éducation ou au logement par exemple. Ces quatre branches forment le
régime général de la sécurité sociale qui a intégré les indépendants le 1er
janvier 2018. Des organisations spécifiques s’ajoutent au régime général
dont la MSA pour les agriculteurs ou les régimes spéciaux.</2><3>Toutes les
personnes qui résident en France contribuent au financement de la sécurité
sociale qui en retour couvre toute la population. Le principe est celui du
\"pot-commun\" fonctionnant par solidarité. Le montant de la contribution
versée par chaque personne ne dépend pas de ses propres risques, mais de ses
revenus.</3><4>La sécurité sociale, par l’intermédiaire du versement des
retraites et de la prise en charge des soins, a permis l’allongement de
l’espérance de vie de trois mois de plus par an depuis 20 ans. Ces progrès
entraînent des difficultés de financement : l'allongement de la durée de vie
implique des retraites plus longues et des dépenses de santé plus importante
qui déséquilibre le système. Pour rééquilibrer le système des mesures
d'adaptation sont prises notamment sur la durée de cotisation.</4><5>La
sécurité sociale développe également de nouveaux services comme l'ouverture
de places d'accueil pour les jeunes enfants ce qui permet à leurs parents de
continuer à travailler. Elle développe aussi des actions de prévention,
organise des campagnes de vaccination, de dépistage précoce de certaines
maladies, des actions d'accompagnement au retour à domicile après
hospitalisation, ainsi que des campagnes d'information et de prévention sur
les chutes des personnes âgées.</5><6>Née il y a soixante dix ans, la
Sécurité Sociale a permis aux français de vivre plus, mais aussi mieux elle
continuera à évoluer pour construire les services qui correspondent à leurs
besoins.</6>"
videoTitle: <0>Vidéo explicative "3 minutes pour comprendre la Sécurité Sociale"</0>
videoTranscriptTitle: Transcription de la vidéo
tous les 6 mois: tous les 6 mois
trimestriel: trimestriel
trouver:

85
site/source/pages/gerer/sécurité-sociale.tsx
View File

@ -1,8 +1,10 @@
import { FromBottom } from '@/components/ui/animate'
import { H1 } from '@/design-system/typography/heading'
import FoldingMessage from '@/components/ui/FoldingMessage'
import { H1, H2 } from '@/design-system/typography/heading'
import { Body } from '@/design-system/typography/paragraphs'
import { Helmet } from 'react-helmet-async'
import { Trans, useTranslation } from 'react-i18next'
import styled from 'styled-components'
import { TrackPage } from '../../ATInternetTracking'
import Video from './_components/Video'
@ -31,11 +33,90 @@ export default function SocialSecurity() {
la maladie, les accidents du travail, chômage ou encore la retraite.
</Body>
</Trans>
<section style={{ marginTop: '2rem' }}>
<Trans i18nKey="sécu.videoTitle">
<H2>
Vidéo explicative "3 minutes pour comprendre la Sécurité Sociale"
</H2>
</Trans>
<Video />
</section>
<StyledFoldingMessage
title={t('sécu.videoTranscriptTitle', 'Transcription de la vidéo')}
unfoldButtonLabel="Afficher la transcription"
>
<Trans i18nKey="sécu.transcript-NO_AUTO_TRANSLATION">
<Body>
Trois minutes pour comprendre les enjeux de la sécurité sociale.
</Body>
<Body>
La sécurité sociale a pour objectif de protéger les personnes qui
résident en France face à certains évènements qui surviennent tout
au long de leur vie.
</Body>
<Body>
Son budget est composé dépenses principalement sous la forme de
prestations et de recettes, alimentés en partie par les
contributions. Les recettes sont gérées bar la branche des
recouvrements composé des URSSAF. Pour les dépenses, il existe
quatre branches. La branche Assurance-Maladie permet de couvrir
les dépenses d’hospitalisation, de médicaments et consultation des
professionnels de santé. La branche retraite prend en charge
l’inscription des revenus sur le compte vieillesse de chacun tout
au long de sa vie active, à partir des déclarations internet des
entreprises, ce qui permet ensuite de calculer le montant des
retraites et de les verser. La branche accidents du travail prend
en charge les frais liés aux maladies professionnelles et aux
accidents du travail. La branche famille verse différents types de
prestations liées à la naissance, à la garde d’enfant, aux aides à
l’éducation ou au logement par exemple. Ces quatre branches
forment le régime général de la sécurité sociale qui a intégré les
indépendants le 1er janvier 2018. Des organisations spécifiques
s’ajoutent au régime général dont la MSA pour les agriculteurs ou
les régimes spéciaux.
</Body>
<Body>
Toutes les personnes qui résident en France contribuent au
financement de la sécurité sociale qui en retour couvre toute la
population. Le principe est celui du "pot-commun" fonctionnant par
solidarité. Le montant de la contribution versée par chaque
personne ne dépend pas de ses propres risques, mais de ses
revenus.
</Body>
<Body>
La sécurité sociale, par l’intermédiaire du versement des
retraites et de la prise en charge des soins, a permis
l’allongement de l’espérance de vie de trois mois de plus par an
depuis 20 ans. Ces progrès entraînent des difficultés de
financement : l'allongement de la durée de vie implique des
retraites plus longues et des dépenses de santé plus importante
qui déséquilibre le système. Pour rééquilibrer le système des
mesures d'adaptation sont prises notamment sur la durée de
cotisation.
</Body>
<Body>
La sécurité sociale développe également de nouveaux services comme
l'ouverture de places d'accueil pour les jeunes enfants ce qui
permet à leurs parents de continuer à travailler. Elle développe
aussi des actions de prévention, organise des campagnes de
vaccination, de dépistage précoce de certaines maladies, des
actions d'accompagnement au retour à domicile après
hospitalisation, ainsi que des campagnes d'information et de
prévention sur les chutes des personnes âgées.
</Body>
<Body>
Née il y a soixante dix ans, la Sécurité Sociale a permis aux
français de vivre plus, mais aussi mieux elle continuera à évoluer
pour construire les services qui correspondent à leurs besoins.
</Body>
</Trans>
</StyledFoldingMessage>
</FromBottom>
</>
)
}
const StyledFoldingMessage = styled(FoldingMessage)`
margin-top: 2rem;
`