From 43e8ad327f0e5b4a6b8c93f690b9821f7900f5c7 Mon Sep 17 00:00:00 2001 From: Caroline <4971715+carolineBda@users.noreply.github.com> Date: Thu, 19 Oct 2023 14:48:42 +0200 Subject: [PATCH] =?UTF-8?q?fix(accessibility):=20meilleure=20accessibilit?= =?UTF-8?q?=C3=A9=20sur=20les=20outils=20(#5390)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../fiche-ministere-travail.test.tsx.snap | 544 ++-- .../modeles-de-courriers-[slug].test.tsx.snap | 376 +-- .../pages/outils/[slug].tsx | 8 +- .../src/common/Answer.tsx | 6 +- .../src/common/Article.js | 85 +- .../ReferencesJuridiques.test.js.snap | 3 +- .../src/common/Share.tsx | 11 +- .../__snapshots__/Answer.test.js.snap | 1318 +++++----- .../__snapshots__/Article.test.js.snap | 96 +- .../ServiceRenseignement.test.js.snap | 6 +- .../ServiceRenseignementModal.test.js.snap | 6 +- .../__snapshots__/Custom.test.js.snap | 2 +- .../src/contributions/ContributionGeneric.tsx | 25 +- .../__snapshots__/Contribution.test.tsx.snap | 30 +- .../__snapshots__/index.test.js.snap | 9 +- .../__snapshots__/Search.test.js.snap | 36 +- .../src/conventions/Search/api/error.tsx | 20 +- .../__snapshots__/SearchModal.test.js.snap | 6 +- .../Agreement/components/AgreementSearch.tsx | 3 +- .../Agreement/components/NoEnterprise.tsx | 3 +- .../outils/CommonSteps/Agreement/index.tsx | 10 +- .../Informations/components/PubliQuestion.tsx | 2 +- .../src/outils/Components/RadioQuestion.tsx | 15 +- .../src/outils/Components/SelectQuestion.tsx | 13 +- .../Components/StepList/index.tsx | 1 - .../outils/Components/SimulatorNavigation.tsx | 12 +- .../src/outils/Components/TextQuestion.tsx | 24 +- .../steps/AgreementSelection.tsx | 3 +- .../__snapshots__/index.test.tsx.snap | 1 - .../__snapshots__/Result.test.tsx.snap | 18 +- .../__snapshots__/index.test.tsx.snap | 1 - .../__snapshots__/Result.test.js.snap | 80 +- .../__snapshots__/Status.test.js.snap | 12 +- .../__snapshots__/index.test.tsx.snap | 1 - .../__snapshots__/Result.test.tsx.snap | 9 +- .../agreements/2120-banques/Component.tsx | 2 +- .../Component.tsx | 2 +- .../outils/IndemniteLicenciement/index.tsx | 9 +- .../steps/Resultat/Ineligible.tsx | 9 +- .../steps/Resultat/components/ForMoreInfo.tsx | 2 +- .../Salaires/components/SalaireTempsPlein.tsx | 9 +- .../__tests__/SalaireTempsPlein.test.tsx | 2 +- .../steps/Salaires/index.tsx | 6 +- .../__snapshots__/index.test.tsx.snap | 1 - .../__snapshots__/Salaires.test.js.snap | 54 +- .../__snapshots__/TypeContrat.test.js.snap | 2 +- .../TypeRemuneration.test.js.snap | 2 +- .../__tests__/__snapshots__/CDD.test.js.snap | 8 +- .../__tests__/__snapshots__/CTT.test.js.snap | 8 +- .../__snapshots__/Indemnite.test.js.snap | 2227 ++++++++--------- .../__snapshots__/InfosGenerales.test.js.snap | 20 +- .../__snapshots__/Remuneration.test.js.snap | 104 +- .../AgreementInput/SearchAgreementInput.tsx | 1 - .../AgreementSearch/AgreementNoResult.tsx | 16 +- .../AgreementSearch/AgreementSearch.tsx | 2 +- .../EnterpriseButton.tsx | 7 +- .../SearchEnterpriseInput.tsx | 3 - .../EntrepriseSearchResult.tsx | 10 +- .../EnterpriseSearch/SelectedEnterprise.tsx | 3 +- .../EnterpriseSearch/ShowAgreement.tsx | 2 +- .../EnterpriseSearch/ShowAgreements.tsx | 2 +- .../Agreement/components/ResultList.tsx | 2 +- .../src/outils/common/CurrencyField.js | 2 +- .../src/outils/common/ErrorField.tsx | 4 +- .../outils/common/Feedback/Questionnaire.tsx | 24 +- .../common/Feedback/QuestionnaireAdvanced.tsx | 32 +- .../common/Feedback/QuestionnaireEnd.tsx | 15 +- .../common/Feedback/QuestionnaireItem.tsx | 8 +- .../common/Feedback/QuestionnaireText.tsx | 5 +- .../src/outils/common/Feedback/index.tsx | 57 +- .../outils/common/Feedback/introduction.tsx | 25 +- .../src/outils/common/MathFormula.js | 18 +- .../src/outils/common/Question.tsx | 18 +- .../src/outils/common/StepList.js | 1 - .../__snapshots__/MathFormula.test.js.snap | 387 ++- .../__snapshots__/SelectQuestion.test.js.snap | 4 +- .../__snapshots__/StepList.test.js.snap | 1 - .../__snapshots__/Wizard.test.tsx.snap | 159 +- .../__snapshots__/YesNoQuestion.test.js.snap | 2 +- .../src/outils/common/stepStyles.ts | 12 +- .../Components/Question/Question.tsx | 1 - .../__snapshots__/SearchResults.test.js.snap | 6 +- .../src/Collapse/__snapshots__/test.js.snap | 3 +- packages/react-ui/src/Collapse/index.js | 7 +- packages/react-ui/src/Toast/index.js | 4 +- packages/react-ui/src/field/Input.js | 3 +- packages/react-ui/src/field/InputDate.js | 4 +- .../src/field/__snapshots__/test.js.snap | 10 +- 88 files changed, 3029 insertions(+), 3093 deletions(-) diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/fiche-ministere-travail.test.tsx.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/fiche-ministere-travail.test.tsx.snap index 1466a1504a..a13089ce2b 100644 --- a/packages/code-du-travail-frontend/__tests__/__snapshots__/fiche-ministere-travail.test.tsx.snap +++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/fiche-ministere-travail.test.tsx.snap @@ -3,38 +3,38 @@ exports[` should render 1`] = `
le 04/01/2020, 00:00:00
République française, site officiel du gouvernement. Liberté, égalité, fraternité should render 1`] = `
@@ -144,17 +144,17 @@ exports[` should render 1`] = `
should render 1`] = ` class="sc-iGgWBj cRLRjd" >

should render 1`] = ` Avez-vous trouvé la réponse à votre question ?

@@ -758,13 +766,13 @@ exports[` should render 1`] = `

@@ -329,8 +329,8 @@ exports[` should render answer references 1`] = ` > Renseignez le nom de votre convention collective, le nom de votre entreprise ou son SIRET. - should render answer references 1`] = ` type="search" value="" /> - +

@@ -511,8 +511,8 @@ exports[` should render preselected convention 1`] = ` > Renseignez le nom de votre convention collective, le nom de votre entreprise ou son SIRET. - should render preselected convention 1`] = ` type="search" value="" /> - +

@@ -693,8 +693,8 @@ exports[` should render with both answers 1`] = ` > Renseignez le nom de votre convention collective, le nom de votre entreprise ou son SIRET. - should render with both answers 1`] = ` type="search" value="" /> - +

@@ -850,8 +850,8 @@ exports[` should render with conventions answer 1`] = ` > Renseignez le nom de votre convention collective, le nom de votre entreprise ou son SIRET. - should render with conventions answer 1`] = ` type="search" value="" /> - +

diff --git a/packages/code-du-travail-frontend/src/conventions/Convention/__tests__/__snapshots__/index.test.js.snap b/packages/code-du-travail-frontend/src/conventions/Convention/__tests__/__snapshots__/index.test.js.snap index 704b8afe8d..1a26de7af5 100644 --- a/packages/code-du-travail-frontend/src/conventions/Convention/__tests__/__snapshots__/index.test.js.snap +++ b/packages/code-du-travail-frontend/src/conventions/Convention/__tests__/__snapshots__/index.test.js.snap @@ -3357,8 +3357,7 @@ exports[` renders 1`] = `

@@ -49,8 +49,8 @@ exports[` should show no results when no result 1`] = ` > Renseignez le nom de votre convention collective, le nom de votre entreprise ou son SIRET. - should show no results when no result 1`] = ` type="search" value="9999" /> - +

@@ -99,8 +99,8 @@ exports[` should show spinner when loading 1`] = ` > Renseignez le nom de votre convention collective, le nom de votre entreprise ou son SIRET. - should show spinner when loading 1`] = ` type="search" value="8888" /> - +
@@ -194,8 +194,8 @@ exports[` when input is IDCC, should search conventions 1`] = ` > Renseignez le nom de votre convention collective, le nom de votre entreprise ou son SIRET. - when input is IDCC, should search conventions 1`] = ` type="search" value="1234" /> - +
@@ -291,8 +291,8 @@ exports[` when input is a valid IDCC, should show only the perfect mat > Renseignez le nom de votre convention collective, le nom de votre entreprise ou son SIRET. - when input is a valid IDCC, should show only the perfect mat type="search" value="4567" /> - +
@@ -370,8 +370,8 @@ exports[` when searching by text, should use enterprise API 1`] = ` > Renseignez le nom de votre convention collective, le nom de votre entreprise ou son SIRET. - when searching by text, should use enterprise API 1`] = ` type="search" value="hello" /> - +
diff --git a/packages/code-du-travail-frontend/src/conventions/Search/api/error.tsx b/packages/code-du-travail-frontend/src/conventions/Search/api/error.tsx index ef475f9486..f3d084c6f8 100644 --- a/packages/code-du-travail-frontend/src/conventions/Search/api/error.tsx +++ b/packages/code-du-travail-frontend/src/conventions/Search/api/error.tsx @@ -1,16 +1,14 @@ import React from "react"; -import { InlineError } from "../../../outils/common/ErrorField"; +import { Error } from "../../../outils/common/ErrorField"; export const nafError = ( - - <> - Numéro d’indentification (IDCC) incorrect. Il semblerait que vous ayez - saisi un code APE{" "} - (Activité Principale Exercée) ou{" "} - NAF{" "} - (Nomenclature des Activités Françaises) et dont l’objectif est - d’identifier l’activité principale de l’entreprise. - - + + Numéro d’indentification (IDCC) incorrect. Il semblerait que vous ayez saisi + un code APE (Activité + Principale Exercée) ou{" "} + NAF (Nomenclature + des Activités Françaises) et dont l’objectif est d’identifier l’activité + principale de l’entreprise. + ); diff --git a/packages/code-du-travail-frontend/src/conventions/__tests__/__snapshots__/SearchModal.test.js.snap b/packages/code-du-travail-frontend/src/conventions/__tests__/__snapshots__/SearchModal.test.js.snap index 3361225e92..18c6577f40 100644 --- a/packages/code-du-travail-frontend/src/conventions/__tests__/__snapshots__/SearchModal.test.js.snap +++ b/packages/code-du-travail-frontend/src/conventions/__tests__/__snapshots__/SearchModal.test.js.snap @@ -49,8 +49,8 @@ exports[` should render a popup when click on button 1`] = ` > Renseignez le nom de votre convention collective, le nom de votre entreprise ou son SIRET. - should render a popup when click on button 1`] = ` type="search" value="" /> - +

diff --git a/packages/code-du-travail-frontend/src/outils/CommonSteps/Agreement/components/AgreementSearch.tsx b/packages/code-du-travail-frontend/src/outils/CommonSteps/Agreement/components/AgreementSearch.tsx index 0204cd4d50..539ce9c420 100644 --- a/packages/code-du-travail-frontend/src/outils/CommonSteps/Agreement/components/AgreementSearch.tsx +++ b/packages/code-du-travail-frontend/src/outils/CommonSteps/Agreement/components/AgreementSearch.tsx @@ -33,7 +33,7 @@ const AgreementSearch = ({ if (selectedAgreement) { return ( <> - + Vous avez sélectionné la convention collective :  {selectedAgreement.shortTitle} diff --git a/packages/code-du-travail-frontend/src/outils/CommonSteps/Agreement/components/NoEnterprise.tsx b/packages/code-du-travail-frontend/src/outils/CommonSteps/Agreement/components/NoEnterprise.tsx index 4b2d03696a..767134713f 100644 --- a/packages/code-du-travail-frontend/src/outils/CommonSteps/Agreement/components/NoEnterprise.tsx +++ b/packages/code-du-travail-frontend/src/outils/CommonSteps/Agreement/components/NoEnterprise.tsx @@ -43,7 +43,6 @@ export function NoEnterprise({ onCheckboxChange(!isCheckboxChecked); }} checked={isCheckboxChecked} - tabIndex={1} /> setIsInputVisible(!isInputVisible)} @@ -65,7 +64,7 @@ export function NoEnterprise({ )} {isCheckboxChecked && ( - + Votre convention collective est : diff --git a/packages/code-du-travail-frontend/src/outils/CommonSteps/Agreement/index.tsx b/packages/code-du-travail-frontend/src/outils/CommonSteps/Agreement/index.tsx index 8219616099..8debd7a369 100644 --- a/packages/code-du-travail-frontend/src/outils/CommonSteps/Agreement/index.tsx +++ b/packages/code-du-travail-frontend/src/outils/CommonSteps/Agreement/index.tsx @@ -6,7 +6,7 @@ import { OnSelectAgreementFn, } from "../../common/Agreement/types"; import { Enterprise } from "../../../conventions/Search/api/enterprises.service"; -import { InlineError } from "../../common/ErrorField"; +import { Error } from "../../common/ErrorField"; import { PublicodesSimulator } from "@socialgouv/modeles-social"; import ShowAlert from "../../common/Agreement/RouteSelection/ShowAlert"; import { AgreementSearchValue, CommonAgreementStoreError } from "./store"; @@ -101,7 +101,7 @@ function AgreementStep({ alertAgreementNotSupported={undefined} simulator={simulator} /> - {error?.agreement && {error.agreement}} + {error?.agreement && {error.agreement}} )} {selectedRoute === "enterprise" && ( @@ -127,12 +127,10 @@ function AgreementStep({ }} /> )} - {error?.enterprise && {error.enterprise}} + {error?.enterprise && {error.enterprise}} )} - {error?.errorPublicodes && ( - {error.errorPublicodes} - )} + {error?.errorPublicodes && {error.errorPublicodes}} ); } diff --git a/packages/code-du-travail-frontend/src/outils/CommonSteps/Informations/components/PubliQuestion.tsx b/packages/code-du-travail-frontend/src/outils/CommonSteps/Informations/components/PubliQuestion.tsx index 26ae645446..3990df5cd8 100644 --- a/packages/code-du-travail-frontend/src/outils/CommonSteps/Informations/components/PubliQuestion.tsx +++ b/packages/code-du-travail-frontend/src/outils/CommonSteps/Informations/components/PubliQuestion.tsx @@ -103,7 +103,7 @@ const PubliQuestion: React.FC = ({ error={error} id={name} showRequired - icon={unité === "€" ? icons.Euro : undefined} + text={unité} subLabel={cdtn.precision} dataTestId={name} autoFocus={autoFocus} diff --git a/packages/code-du-travail-frontend/src/outils/Components/RadioQuestion.tsx b/packages/code-du-travail-frontend/src/outils/Components/RadioQuestion.tsx index e5c7de0683..0d46e1ac0d 100644 --- a/packages/code-du-travail-frontend/src/outils/Components/RadioQuestion.tsx +++ b/packages/code-du-travail-frontend/src/outils/Components/RadioQuestion.tsx @@ -3,7 +3,7 @@ import React from "react"; import styled from "styled-components"; import Html from "../../common/Html"; -import { InlineError } from "../common/ErrorField"; +import { Error } from "../common/ErrorField"; import { Question, Tooltip } from "../common/Question"; import { RadioContainer, SmallText } from "../common/stepStyles"; import { SubLabel } from "./SelectQuestion"; @@ -48,7 +48,7 @@ export default function RadioQuestion({ return ( <> - + {label} {subLabel && {subLabel}} @@ -63,15 +63,10 @@ export default function RadioQuestion({ data-testid={`${name} - ${question.label}`} checked={selectedOption === question.value} onChange={() => onChange(question.value)} - tabIndex={1} autoFocus={autoFocus ? index === 0 : false} /> ))} - {error && ( - - {error} - - )} + {error && {error}} {note && {note}} @@ -79,10 +74,6 @@ export default function RadioQuestion({ ); } -export const ErrorWrapper = styled.div` - display: flex; -`; - export const StyledFieldset = styled(Fieldset)` display: contents; `; diff --git a/packages/code-du-travail-frontend/src/outils/Components/SelectQuestion.tsx b/packages/code-du-travail-frontend/src/outils/Components/SelectQuestion.tsx index 6cd23e2267..fb84449aea 100644 --- a/packages/code-du-travail-frontend/src/outils/Components/SelectQuestion.tsx +++ b/packages/code-du-travail-frontend/src/outils/Components/SelectQuestion.tsx @@ -2,7 +2,7 @@ import { Select, theme } from "@socialgouv/cdtn-ui"; import React from "react"; import styled from "styled-components"; import Html from "../../common/Html"; -import { InlineError } from "../common/ErrorField"; +import { Error } from "../common/ErrorField"; import { Question, Tooltip } from "../common/Question"; type Props = { @@ -68,7 +68,6 @@ const SelectQuestion = ({ onChange={(v) => onChange(v.target.value)} value={value} data-testid={name} - tabIndex={1} autoFocus={autoFocus} >

- - + +
+ )} ); diff --git a/packages/code-du-travail-frontend/src/outils/ConventionCollective/steps/AgreementSelection.tsx b/packages/code-du-travail-frontend/src/outils/ConventionCollective/steps/AgreementSelection.tsx index 44fd6fddaa..456157c3ea 100644 --- a/packages/code-du-travail-frontend/src/outils/ConventionCollective/steps/AgreementSelection.tsx +++ b/packages/code-du-travail-frontend/src/outils/ConventionCollective/steps/AgreementSelection.tsx @@ -1,5 +1,5 @@ import { getLabelBySource, SOURCES } from "@socialgouv/cdtn-utils"; -import { Button, FlatList, Paragraph, theme } from "@socialgouv/cdtn-ui"; +import { Button, FlatList, Paragraph, theme, Tile } from "@socialgouv/cdtn-ui"; import Link from "next/link"; import React from "react"; import styled from "styled-components"; @@ -9,7 +9,6 @@ import { ScreenType, useNavContext } from "../common/NavContext"; import { TrackingProps } from "../types"; import { AgreementTile } from "../../common/Agreement/AgreementSearch/AgreementInput/AgreementTile"; import { useRouter } from "next/router"; -import { Tile } from "@socialgouv/cdtn-ui/lib"; type EnterpriseSearchStepProps = { onBackClick: () => void; diff --git a/packages/code-du-travail-frontend/src/outils/DureePreavisDemission/__tests__/__snapshots__/index.test.tsx.snap b/packages/code-du-travail-frontend/src/outils/DureePreavisDemission/__tests__/__snapshots__/index.test.tsx.snap index 0e61293ff7..2bf5400043 100644 --- a/packages/code-du-travail-frontend/src/outils/DureePreavisDemission/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/code-du-travail-frontend/src/outils/DureePreavisDemission/__tests__/__snapshots__/index.test.tsx.snap @@ -95,7 +95,6 @@ exports[` should render 1`] = `
  • should render CC answer 1`] = `

    À partir des éléments que vous avez saisis, la durée du préavis de démission est estimée à :  2 mois * .

    * Le préavis débute le jour où le salarié remet sa lettre de démission en main propre ou à la date de première présentation de la lettre recommandée, peu importe le jour de son retrait par l’employeur. Exemple : si l’employeur reçoit le courrier recommandé le @@ -41,7 +42,7 @@ exports[` should render CC answer 1`] = ` 4 juin . Si le @@ -50,7 +51,7 @@ exports[` should render CC answer 1`] = `
    L’employeur et le salarié peuvent fixer d’un commun accord une date de départ anticipée, libérant ainsi le salarié de l’exécution de la totalité ou d’une partie du préavis. @@ -59,8 +60,7 @@ exports[` should render CC answer 1`] = `

    • should render with O duration 1`] = ` class="sc-dSCufp gAzXIi" >

    Attention il peut exister une durée plus favorable

    @@ -206,28 +206,29 @@ exports[` should render with both CC duration and CDT duration 1`] À partir des éléments que vous avez saisis, la durée du préavis de licenciement est estimée à : 1 mois * .

    * Le préavis débute à la date de première présentation de la notification du licenciement par lettre recommandée, peu importe le jour de son retrait par le salarié. Exemple : si le salarié reçoit le courrier recommandé le @@ -240,7 +241,7 @@ exports[` should render with both CC duration and CDT duration 1`] tombe un samedi, un dimanche, un jour férié ou un jour qui n’est habituellement pas travaillé dans l’entreprise, le salarié effectuera son dernier jour dans l’entreprise le jour ouvrable suivant.
    L’employeur et le salarié peuvent fixer d’un commun accord une date de départ anticipée, libérant ainsi le salarié de l’exécution de la totalité ou d’une partie du préavis. @@ -249,8 +250,7 @@ exports[` should render with both CC duration and CDT duration 1`]

    should render with both CC duration and CDT duration 1`] class="sc-dSCufp gAzXIi" >

    Attention il peut exister une durée plus favorable

    @@ -402,7 +402,8 @@ exports[` should render with only CC duration 1`] = ` Durée du préavis Aucun préavis @@ -412,8 +413,7 @@ exports[` should render with only CC duration 1`] = `
    should render with only CC duration 1`] = ` class="sc-dSCufp gAzXIi" >

    Attention il peut exister une durée plus favorable

    @@ -568,28 +568,29 @@ exports[` should render with when no CC 1`] = ` À partir des éléments que vous avez saisis, la durée du préavis de licenciement est estimée à : 2 mois * .

    * Le préavis débute à la date de première présentation de la notification du licenciement par lettre recommandée, peu importe le jour de son retrait par le salarié. Exemple : si le salarié reçoit le courrier recommandé le @@ -602,7 +603,7 @@ exports[` should render with when no CC 1`] = ` tombe un samedi, un dimanche, un jour férié ou un jour qui n’est habituellement pas travaillé dans l’entreprise, le salarié effectuera son dernier jour dans l’entreprise le jour ouvrable suivant.
    L’employeur et le salarié peuvent fixer d’un commun accord une date de départ anticipée, libérant ainsi le salarié de l’exécution de la totalité ou d’une partie du préavis. @@ -611,8 +612,7 @@ exports[` should render with when no CC 1`] = `

    should render with when no CC 1`] = ` class="sc-dSCufp gAzXIi" >

    Attention il peut exister une durée plus favorable

    @@ -748,28 +748,29 @@ exports[` should render with when unhandled CC 1`] = ` À partir des éléments que vous avez saisis, la durée du préavis de licenciement est estimée à : 2 mois * .

    * Le préavis débute à la date de première présentation de la notification du licenciement par lettre recommandée, peu importe le jour de son retrait par le salarié. Exemple : si le salarié reçoit le courrier recommandé le @@ -782,7 +783,7 @@ exports[` should render with when unhandled CC 1`] = ` tombe un samedi, un dimanche, un jour férié ou un jour qui n’est habituellement pas travaillé dans l’entreprise, le salarié effectuera son dernier jour dans l’entreprise le jour ouvrable suivant.
    L’employeur et le salarié peuvent fixer d’un commun accord une date de départ anticipée, libérant ainsi le salarié de l’exécution de la totalité ou d’une partie du préavis. @@ -791,8 +792,7 @@ exports[` should render with when unhandled CC 1`] = `

    should render with when unhandled CC 1`] = ` class="sc-dSCufp gAzXIi" >

    Attention il peut exister une durée plus favorable

    diff --git a/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/steps/__tests__/__snapshots__/Status.test.js.snap b/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/steps/__tests__/__snapshots__/Status.test.js.snap index 087c34a34c..b0694b0a86 100644 --- a/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/steps/__tests__/__snapshots__/Status.test.js.snap +++ b/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/steps/__tests__/__snapshots__/Status.test.js.snap @@ -3,7 +3,7 @@ exports[` should render 1`] = `
    should render 1`] = ` exports[` should render coefficient 1`] = `
    should render coefficient 1`] = `
    should render coefficient 1`] = ` class="sc-kqGoIF jVxPSE" > @@ -304,7 +304,7 @@ exports[` should render coefficient 1`] = ` exports[` should render seriousMisconduct 1`] = `
    should render seriousMisconduct 1`] = `
    should render 1`] = `
  • should render no results 1`] = `
    should render 1`] = `
    • should render 1`] = `
    should render 1`] = `
    should render 1`] = `
    should render 1`] = `
    should render cdd indemnite with conventional provision message 1`] = `

    Montant

    @@ -11,7 +11,8 @@ exports[` should render cdd indemnite with conventional provisi La prime d'intervention est estimée à :  180  € @@ -21,8 +22,7 @@ exports[` should render cdd indemnite with conventional provisi
    should render cdd indemnite with conventional provisi class="sc-dSCufp gAzXIi" >

    Attention il peut exister un montant plus favorable

    @@ -449,7 +446,7 @@ exports[` should render cdd indemnite with conventional provisi exports[` should render cdd indemnite with no ccn message 1`] = `

    Montant

    @@ -457,7 +454,8 @@ exports[` should render cdd indemnite with no ccn message 1`] = La prime de précarité est estimée à :  300  € @@ -467,8 +465,7 @@ exports[` should render cdd indemnite with no ccn message 1`] =
    should render cdd indemnite with no ccn message 1`] = class="sc-dSCufp gAzXIi" >

    Attention il peut exister un montant plus favorable

    @@ -888,7 +882,7 @@ exports[` should render cdd indemnite with no ccn message 1`] = exports[` should render cdd indemnite with no conventional provision message 1`] = `

    Montant

    @@ -896,7 +890,8 @@ exports[` should render cdd indemnite with no conventional prov La prime de précarité est estimée à :  300  € @@ -906,8 +901,7 @@ exports[` should render cdd indemnite with no conventional prov
    should render cdd indemnite with no conventional prov class="sc-dSCufp gAzXIi" >

    Attention il peut exister un montant plus favorable

    @@ -1337,7 +1328,7 @@ exports[` should render cdd indemnite with no conventional prov exports[` should render cdd indemnite with unhandled cc message 1`] = `

    Montant

    @@ -1345,7 +1336,8 @@ exports[` should render cdd indemnite with unhandled cc message La prime de précarité est estimée à :  300  € @@ -1355,8 +1347,7 @@ exports[` should render cdd indemnite with unhandled cc message
    should render cdd indemnite with unhandled cc message class="sc-dSCufp gAzXIi" >

    Attention il peut exister un montant plus favorable

    @@ -1776,7 +1764,7 @@ exports[` should render cdd indemnite with unhandled cc message exports[` should render ctt indemnite 1`] = `

    Montant

    @@ -1784,7 +1772,8 @@ exports[` should render ctt indemnite 1`] = ` La prime de précarité est estimée à :  300  € @@ -1794,8 +1783,7 @@ exports[` should render ctt indemnite 1`] = `
    should render ctt indemnite 1`] = ` class="sc-dSCufp gAzXIi" >

    Attention il peut exister un montant plus favorable

    diff --git a/packages/code-du-travail-frontend/src/outils/IndemnitePrecarite/steps/__tests__/__snapshots__/InfosGenerales.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemnitePrecarite/steps/__tests__/__snapshots__/InfosGenerales.test.js.snap index 15e53a7d13..3f90f3e296 100644 --- a/packages/code-du-travail-frontend/src/outils/IndemnitePrecarite/steps/__tests__/__snapshots__/InfosGenerales.test.js.snap +++ b/packages/code-du-travail-frontend/src/outils/IndemnitePrecarite/steps/__tests__/__snapshots__/InfosGenerales.test.js.snap @@ -4,7 +4,7 @@ exports[` should render 1`] = `
    should render with CDD 1`] = `
    should render with CDD 1`] = ` class="sc-iapWAC huEEnQ" > @@ -242,7 +242,7 @@ exports[` should render with CDD and not handled ccn 1`] =
    should render with CDD and not handled ccn 1`] = class="sc-iapWAC huEEnQ" > @@ -419,7 +419,7 @@ exports[` should render with CTT 1`] = `
    should render with CTT 1`] = `
    should render with CTT 1`] = `
    should render with CTT 1`] = `
    should render with CTT 1`] = `
    should render multiple inputs 1`] = `
    should render multiple inputs 1`] = `
    should render multiple inputs 1`] = `

    Majorations, indemnités, primes et accessoires compris sauf les remboursements de frais et l’indemnité de congés payés.

    @@ -230,7 +214,7 @@ exports[` should render multiple inputs 1`] = ` exports[` should render one input 1`] = `
    should render one input 1`] = `
    @@ -310,35 +294,27 @@ exports[` should render one input 1`] = `
    -
    - + + € +
    -     +

    Majorations, indemnités, primes et accessoires compris sauf les remboursements de frais et l’indemnité de congés payés.

    diff --git a/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementInput/SearchAgreementInput.tsx b/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementInput/SearchAgreementInput.tsx index fd702dba5d..853dd9504b 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementInput/SearchAgreementInput.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementInput/SearchAgreementInput.tsx @@ -57,7 +57,6 @@ export const SearchAgreementInput = ({ type: "search", value: query, "data-testid": "agreement-search-input", - tabIndex: "1", autoFocus: true, }; return ( diff --git a/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementNoResult.tsx b/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementNoResult.tsx index f43f89000a..68078598f5 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementNoResult.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementNoResult.tsx @@ -1,4 +1,4 @@ -import { SOURCES } from "@socialgouv/cdtn-utils"; +import { Agreement, SOURCES } from "@socialgouv/cdtn-utils"; import { AlertWithIcon, Button, @@ -12,11 +12,9 @@ import Link from "next/link"; import React from "react"; import Spinner from "react-svg-spinner"; import styled from "styled-components"; - -import { Agreement } from "@socialgouv/cdtn-utils"; import { FetchReducerState } from "../components/Suggester"; import { TrackingProps, UserAction } from "../../../ConventionCollective/types"; -import { InlineError } from "../../ErrorField"; +import { Error } from "../../ErrorField"; import { HelpModal } from "../components/Modal"; type Props = { @@ -37,15 +35,11 @@ const AgreementNoResult = ({ onUserAction, state }: Props): JSX.Element => { ); } - if (state.isError) { + if (state.error && state.isError) { if (typeof state.error === "string") { - return ( -
    - {state.error} -
    - ); + return {state.error}; } - return
    {state.error}
    ; + return
    {state.error}
    ; } if (state.data && !state.data.length) { diff --git a/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementSearch.tsx b/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementSearch.tsx index 3896842cff..851b93ba02 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementSearch.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementSearch.tsx @@ -35,7 +35,7 @@ const AgreementSearch = ({ if (selectedAgreement) { return ( <> - + Vous avez sélectionné la convention collective :  + {showTitleWithHighlight ? ( {highlightLabel} diff --git a/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/EntrepriseSearchInput/SearchEnterpriseInput.tsx b/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/EntrepriseSearchInput/SearchEnterpriseInput.tsx index 1e0767d1d1..6b9b20bd67 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/EntrepriseSearchInput/SearchEnterpriseInput.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/EntrepriseSearchInput/SearchEnterpriseInput.tsx @@ -81,7 +81,6 @@ export const SearchEnterpriseInput = ({ autoComplete="off" data-testid="agreement-company-search-input" disabled={isDisabled} - tabIndex={1} /> </Box> <Box> @@ -105,7 +104,6 @@ export const SearchEnterpriseInput = ({ autoComplete="off" data-testid="agreement-postal-code-search-input" disabled={isDisabled} - tabIndex={1} /> <SubmitIcon type="submit" @@ -117,7 +115,6 @@ export const SearchEnterpriseInput = ({ variant="secondary" data-testid="agreement-company-search-button" disabled={isDisabled} - tabIndex={1} > <MobileOnly>Rechercher</MobileOnly> <StyledSearchIcon /> diff --git a/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/EntrepriseSearchResult.tsx b/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/EntrepriseSearchResult.tsx index e0fdaafaad..b21f3c365f 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/EntrepriseSearchResult.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/EntrepriseSearchResult.tsx @@ -10,7 +10,7 @@ import Spinner from "react-svg-spinner"; import styled from "styled-components"; import { FetchReducerState } from "../components/Suggester"; import { TrackingProps, UserAction } from "../../../ConventionCollective/types"; -import { InlineError } from "../../ErrorField"; +import { Error } from "../../ErrorField"; import { ListItem, ResultList } from "../components/ResultList"; import { HelpModal } from "../components/Modal"; import { Enterprise } from "../../../../conventions/Search/api/enterprises.service"; @@ -49,13 +49,9 @@ const EntrepriseSearchResults = ({ if (state.isError) { if (typeof state.error === "string") { - return ( - <Section role="status"> - <InlineError>{state.error}</InlineError> - </Section> - ); + return <Error>{state.error}</Error>; } - return <Section role="status">{state.error}</Section>; + return <Section>{state.error}</Section>; } if (!state.data) { return <></>; diff --git a/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/SelectedEnterprise.tsx b/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/SelectedEnterprise.tsx index a37294cd46..7bf13bcfa0 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/SelectedEnterprise.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/SelectedEnterprise.tsx @@ -16,7 +16,7 @@ const SelectedEnterprise = ({ }: Props): JSX.Element => { return ( <> - <Question required={false} as="p"> + <Question required={false}> Vous avez sélectionné l'entreprise :  </Question> <Selected @@ -25,7 +25,6 @@ const SelectedEnterprise = ({ event.preventDefault(); onRemoveEnterprise(); }} - tabIndex={1} > {enterprise.simpleLabel} </Selected> diff --git a/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/ShowAgreement.tsx b/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/ShowAgreement.tsx index 1189867bfc..3e2af6cf5c 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/ShowAgreement.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/ShowAgreement.tsx @@ -22,7 +22,7 @@ const ShowAgreement = ({ }: Props): JSX.Element => { return ( <> - <Question required={false} as="p"> + <Question required={false}> Une convention collective a été trouvée pour cette entreprise : </Question> <Text fontSize="default" fontWeight="600" variant="secondary"> diff --git a/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/ShowAgreements.tsx b/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/ShowAgreements.tsx index 5654735129..f158203a19 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/ShowAgreements.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Agreement/EnterpriseSearch/ShowAgreements.tsx @@ -31,7 +31,7 @@ const ShowAgreements = ({ return ( <> - <Question required={false} htmlFor="ccn.selected.id" as="p"> + <Question required={false} htmlFor="ccn.selected.id"> {enterprise.conventions.length} conventions collectives ont été trouvées pour cette entreprise, sélectionnez la vôtre :  </Question> diff --git a/packages/code-du-travail-frontend/src/outils/common/Agreement/components/ResultList.tsx b/packages/code-du-travail-frontend/src/outils/common/Agreement/components/ResultList.tsx index 741172bfc5..43a339b696 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Agreement/components/ResultList.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Agreement/components/ResultList.tsx @@ -9,7 +9,7 @@ type Props = { export function ResultList({ query, children }: Props): JSX.Element { const viewMoreButton = (onClick) => ( - <ViewMoreButton small onClick={onClick} tabIndex={1}> + <ViewMoreButton small onClick={onClick}> Voir plus </ViewMoreButton> ); diff --git a/packages/code-du-travail-frontend/src/outils/common/CurrencyField.js b/packages/code-du-travail-frontend/src/outils/common/CurrencyField.js index b228451239..a891d31286 100644 --- a/packages/code-du-travail-frontend/src/outils/common/CurrencyField.js +++ b/packages/code-du-travail-frontend/src/outils/common/CurrencyField.js @@ -37,7 +37,7 @@ function CurrencyField({ {...input} type="number" invalid={touched && invalid} - icon={icons.Euro} + text="€" /> {error && touched && invalid ? ( diff --git a/packages/code-du-travail-frontend/src/outils/common/ErrorField.tsx b/packages/code-du-travail-frontend/src/outils/common/ErrorField.tsx index 2b861554fc..79fd8db950 100644 --- a/packages/code-du-travail-frontend/src/outils/common/ErrorField.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/ErrorField.tsx @@ -27,7 +27,9 @@ const ErrorField = ({ name, errorText }: Props): JSX.Element => ( /> ); -const Error = styled.p` +const Error = styled.p.attrs(() => ({ + role: "alert", +}))` margin: ${theme.spacings.small} 0 ${theme.spacings.base}; color: ${({ theme }) => theme.error}; font-weight: 600; diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/Questionnaire.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/Questionnaire.tsx index edbbc97545..9ff93cd0ee 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/Questionnaire.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/Questionnaire.tsx @@ -1,8 +1,8 @@ import styled from "styled-components"; -import { Button, Heading } from "@socialgouv/cdtn-ui"; +import { Button, Heading, theme } from "@socialgouv/cdtn-ui"; -import { QuestionnaireItem, Status } from "./QuestionnaireItem"; -import { trackFeedback, EVENT_ACTION, FEEDBACK_RESULT } from "./tracking"; +import { QuestionnaireItem } from "./QuestionnaireItem"; +import { EVENT_ACTION, FEEDBACK_RESULT, trackFeedback } from "./tracking"; import { useState } from "react"; type QuestionnaireProps = { @@ -14,10 +14,10 @@ export const Questionnaire = ({ onClick }: QuestionnaireProps): JSX.Element => { const [displayError, setDisplayError] = useState(false); return ( <> - <StyledHeading variant="primary" stripe="left"> + <Heading variant="primary" stripe="left"> Comment s'est passée cette simulation pour vous ? - </StyledHeading> - <StyledQuestionnaireItem + </Heading> + <QuestionnaireItem badEventValue={FEEDBACK_RESULT.NOT_GOOD} averageEventValue={FEEDBACK_RESULT.AVERAGE} goodEventValue={FEEDBACK_RESULT.GOOD} @@ -45,16 +45,6 @@ export const Questionnaire = ({ onClick }: QuestionnaireProps): JSX.Element => { ); }; -const StyledHeading = styled(Heading)` - margin-left: 0; - margin-bottom: 0; - padding-top: 6px; -`; - const StyledButton = styled(Button)` - margin: 12px auto 24px 24px; -`; - -const StyledQuestionnaireItem = styled(QuestionnaireItem)` - padding: 24px; + margin: 0 ${theme.spacings.xmedium}; `; diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx index a1ec4a87b7..db1790bb08 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx @@ -1,4 +1,4 @@ -import { Button, Heading } from "@socialgouv/cdtn-ui"; +import { Button, Heading, theme } from "@socialgouv/cdtn-ui"; import { QuestionnaireItem } from "./QuestionnaireItem"; import { QuestionnaireText } from "./QuestionnaireText"; import styled from "styled-components"; @@ -25,11 +25,11 @@ export const QuestionnaireAdvanced = ({ const [feedbackText, setFeedbackText] = useState<string>(); return ( <> - <StyledHeading variant="primary" stripe="left"> + <Heading variant="primary" stripe="left"> Merci pour votre aide ! Pouvez-vous nous en dire plus ? - </StyledHeading> - <FormContainer> - <StyledQuestionnaireItem + </Heading> + <div> + <QuestionnaireItem badEventValue={FEEDBACK_RESULT.NOT_AT_ALL} averageEventValue={FEEDBACK_RESULT.AVERAGE} goodEventValue={FEEDBACK_RESULT.EASY} @@ -41,7 +41,7 @@ export const QuestionnaireAdvanced = ({ }} dataTestId="simulator" /> - <StyledQuestionnaireItem + <QuestionnaireItem badEventValue={FEEDBACK_RESULT.NOT_AT_ALL} averageEventValue={FEEDBACK_RESULT.AVERAGE} goodEventValue={FEEDBACK_RESULT.YES} @@ -53,7 +53,7 @@ export const QuestionnaireAdvanced = ({ }} dataTestId="questionClarity" /> - <StyledQuestionnaireItem + <QuestionnaireItem badEventValue={FEEDBACK_RESULT.NOT_AT_ALL} averageEventValue={FEEDBACK_RESULT.AVERAGE} goodEventValue={FEEDBACK_RESULT.YES} @@ -71,7 +71,7 @@ export const QuestionnaireAdvanced = ({ onChange={setFeedbackText} dataTestId="more-input" /> - </FormContainer> + </div> <StyledButton variant="primary" onClick={() => { @@ -96,20 +96,6 @@ export const QuestionnaireAdvanced = ({ ); }; -const StyledHeading = styled(Heading)` - margin-left: 0; - margin-bottom: 0; - padding-top: 6px; -`; - const StyledButton = styled(Button)` - margin: 12px auto 24px 24px; -`; - -const FormContainer = styled.div` - padding: 0 24px; -`; - -const StyledQuestionnaireItem = styled(QuestionnaireItem)` - margin: 24px 0; + margin: 0 ${theme.spacings.xmedium}; `; diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireEnd.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireEnd.tsx index 9155f6bc8a..1d4b82b08e 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireEnd.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireEnd.tsx @@ -1,12 +1,12 @@ -import { Heading } from "@socialgouv/cdtn-ui"; +import { Heading, theme } from "@socialgouv/cdtn-ui"; import styled from "styled-components"; export const QuestionnaireEnd = (): JSX.Element => { return ( <> - <StyledHeading variant="primary" stripe="left"> + <Heading variant="primary" stripe="left"> Merci pour votre aide ! - </StyledHeading> + </Heading> <StyledText> Votre évaluation sera étudiée au plus vite par nos équipes </StyledText> @@ -14,11 +14,6 @@ export const QuestionnaireEnd = (): JSX.Element => { ); }; -const StyledHeading = styled(Heading)` - margin-left: 0; - padding-top: 6px; -`; - -const StyledText = styled.span` - margin: 12px auto 24px 24px; +const StyledText = styled.p` + padding: 0 ${theme.spacings.medium}; `; diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireItem.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireItem.tsx index da8f3ff176..1964061bfc 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireItem.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireItem.tsx @@ -39,7 +39,7 @@ export const QuestionnaireItem = ({ }: QuestionnaireItemProps): JSX.Element => { const [status, setStatus] = useState<Status>(); return ( - <div className={className} data-testId={dataTestId}> + <Div className={className} data-testId={dataTestId}> {title && <strong>{title}</strong>} <ButtonContainer> <StyledButton @@ -79,7 +79,7 @@ export const QuestionnaireItem = ({ {displayError && ( <StyledError>Vous devez choisir une des réponses</StyledError> )} - </div> + </Div> ); }; @@ -108,3 +108,7 @@ const StyledButton = styled(Button)` const StyledError = styled.span` color: ${colors.error}; `; + +const Div = styled.div` + padding: 0 ${theme.spacings.xmedium} ${theme.spacings.large}; +`; diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireText.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireText.tsx index acb4a6485e..c03a3ed445 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireText.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireText.tsx @@ -1,4 +1,4 @@ -import { Textarea } from "@socialgouv/cdtn-ui"; +import { Textarea, theme } from "@socialgouv/cdtn-ui"; import styled from "styled-components"; type QuestionnaireItemProps = { @@ -34,6 +34,7 @@ export const QuestionnaireText = ({ const StyledContainer = styled.div` display: flex; flex-direction: column; + padding: 0 ${theme.spacings.xmedium} ${theme.spacings.large}; `; const StyledTextarea = styled(Textarea)` @@ -41,7 +42,7 @@ const StyledTextarea = styled(Textarea)` max-width: 100%; `; -const MaxCharacterText = styled.span` +const MaxCharacterText = styled.p` margin: 12px 0; font-size: 14px; `; diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx index 46356480f8..2fc7c21d02 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx @@ -1,10 +1,11 @@ import styled from "styled-components"; -import { theme, icons, Wrapper } from "@socialgouv/cdtn-ui"; +import { icons, theme, Wrapper } from "@socialgouv/cdtn-ui"; import { Introduction } from "./introduction"; import { useState } from "react"; import { Questionnaire } from "./Questionnaire"; import { QuestionnaireAdvanced } from "./QuestionnaireAdvanced"; import { QuestionnaireEnd } from "./QuestionnaireEnd"; +import { Button } from "@socialgouv/cdtn-ui/lib"; export const Feedback = (): JSX.Element => { const [status, setStatus] = useState< @@ -13,14 +14,26 @@ export const Feedback = (): JSX.Element => { const [closed, setClosed] = useState(false); const [position, setPosition] = useState(0); const [bodyPosition, setBodyPosition] = useState(0); + const closeButton = ( + <CloseButton + variant="naked" + small + narrow + title="fermer la modale" + onClick={() => setClosed(true)} + > + <icons.Close + onClick={() => setClosed(true)} + data-testid="feedbackCloseButton" + title="Fermer la modale" + /> + </CloseButton> + ); return !closed ? ( - <> + <Div> {!status && ( <IntroContainer variant="main"> - <StyledCloseIcon - onClick={() => setClosed(true)} - data-testid="feedbackCloseButton" - /> + {closeButton} <Introduction onClick={() => { setStatus("questionnaire"); @@ -38,10 +51,7 @@ export const Feedback = (): JSX.Element => { setBodyPosition(document.body.getBoundingClientRect().top); }} > - <StyledCloseIcon - onClick={() => setClosed(true)} - data-testid="feedbackCloseButton" - /> + {closeButton} {status === "questionnaire" && ( <Questionnaire onClick={() => { @@ -60,35 +70,38 @@ export const Feedback = (): JSX.Element => { {status === "questionnaireEnd" && <QuestionnaireEnd />} </StyledContainer> )} - </> + </Div> ) : ( <></> ); }; -const { colors } = theme; +const { colors, box } = theme; -const IntroContainer = styled(Wrapper)` +const Div = styled.div` + display: flex; + justify-content: flex-end; +`; + +const IntroContainer = styled.div` border: 1px solid ${colors.secondary}; - border-radius: 6px; - width: 460px; + border-radius: ${box.borderRadius}; + background-color: ${theme.colors.white}; + min-width: 460px; max-width: 100%; - display: flex; - flex-direction: column; - margin: 42px 0 0 auto; - padding: 0 0 28px 0 !important; + padding: 0; position: relative; `; const StyledContainer = styled(IntroContainer)` width: 520px; + padding: ${theme.spacings.xmedium} 0; `; -const StyledCloseIcon = styled(icons.Close)` +const CloseButton = styled(Button)` position: absolute; top: 8px; right: 8px; width: 24px; - cursor: pointer; - z-index: 10; + color: ${({ theme }) => theme.secondary}; `; diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/introduction.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/introduction.tsx index f7366af5f8..a1087d6d05 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/introduction.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/introduction.tsx @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { Button, theme } from "@socialgouv/cdtn-ui"; +import { Button, Paragraph, theme } from "@socialgouv/cdtn-ui"; type IntroductionProps = { onClick: () => void; @@ -7,25 +7,16 @@ type IntroductionProps = { export const Introduction = ({ onClick }: IntroductionProps): JSX.Element => { return ( - <> - <StyledHeading variant="primary"> + <Div> + <Paragraph fontSize="hsmall" fontWeight="600" variant="title"> Votre avis sur ce simulateur nous intéresse - </StyledHeading> - <StyledButton onClick={onClick}>Donner mon avis</StyledButton> - </> + </Paragraph> + <Button onClick={onClick}>Donner mon avis</Button> + </Div> ); }; -const { fonts } = theme; - -const StyledHeading = styled.span` +const Div = styled.div` text-align: center; - color: ${({ theme }) => theme.title}; - font-weight: 600; - font-size: ${fonts.sizes.headings.small}; - margin: 32px auto 20px; -`; - -const StyledButton = styled(Button)` - margin: 0 auto; + padding: ${theme.spacings.large}; `; diff --git a/packages/code-du-travail-frontend/src/outils/common/MathFormula.js b/packages/code-du-travail-frontend/src/outils/common/MathFormula.js index 1c6cc032b9..30b23c59e0 100644 --- a/packages/code-du-travail-frontend/src/outils/common/MathFormula.js +++ b/packages/code-du-travail-frontend/src/outils/common/MathFormula.js @@ -1,7 +1,6 @@ import TeX from "@matejmazur/react-katex"; import PropTypes from "prop-types"; import React from "react"; -import styled from "styled-components"; export const asciiMathToTex = (ascii) => { // multiplications @@ -23,19 +22,16 @@ export const asciiMathToTex = (ascii) => { export const MathFormula = ({ formula }) => { return ( - <StyledFormula> - <TeX block style={{ width: "fit-content", overflow: "auto" }}> - {asciiMathToTex(formula)} - </TeX> - </StyledFormula> + <TeX + title={formula.replace(/\*/g, `x`)} + block + style={{ width: "fit-content", overflow: "auto" }} + > + {asciiMathToTex(formula)} + </TeX> ); }; MathFormula.propTypes = { formula: PropTypes.string.isRequired, }; - -const StyledFormula = styled.div` - display: flex; - width: "fit-content"; -`; diff --git a/packages/code-du-travail-frontend/src/outils/common/Question.tsx b/packages/code-du-travail-frontend/src/outils/common/Question.tsx index 633d9eec1f..d9b21613d2 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Question.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Question.tsx @@ -10,7 +10,6 @@ export type Tooltip = { trackableFn?: (actualVisibility: boolean) => void; }; type Props = { - as?: string; required?: boolean; tooltip?: Tooltip; children: React.ReactNode; @@ -35,10 +34,7 @@ export const Question = ({ {...otherProps} data-testid={"question-label"} > - <Text - fontWeight="600" - fontSize={otherProps.as === "p" ? "default" : "hsmall"} - > + <Text fontWeight="600" fontSize="hsmall"> {children} {required && <Text as="span"> (obligatoire)</Text>} {tooltip && ( @@ -69,18 +65,8 @@ export const Question = ({ ); }; -const { breakpoints, fonts, spacings } = theme; +const { spacings } = theme; const StyledLegend = styled(Legend)` - font-weight: 600; - display: block; margin: ${spacings.small} 0; - cursor: ${(props) => (props.as ? "default" : "pointer")}; - @media (max-width: ${breakpoints.mobile}) { - font-size: ${fonts.sizes.default}; - } - p, - div { - font-weight: 100 !important; - } `; diff --git a/packages/code-du-travail-frontend/src/outils/common/StepList.js b/packages/code-du-travail-frontend/src/outils/common/StepList.js index 179e3811b4..fdf73aeea7 100644 --- a/packages/code-du-travail-frontend/src/outils/common/StepList.js +++ b/packages/code-du-travail-frontend/src/outils/common/StepList.js @@ -20,7 +20,6 @@ export function StepList({ activeIndex = 0, items = [], anchorRef }) { index={index} isActive={activeIndex === index} ref={activeIndex === index ? anchorRef : undefined} - tabIndex={activeIndex === index ? "-1" : undefined} aria-live={activeIndex === index ? "polite" : undefined} title={activeIndex === index ? "onglet actif" : null} > diff --git a/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/MathFormula.test.js.snap b/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/MathFormula.test.js.snap index ab5502e0c1..c5d9a0ee73 100644 --- a/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/MathFormula.test.js.snap +++ b/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/MathFormula.test.js.snap @@ -3,264 +3,261 @@ exports[`<MathFormula /> renders 1`] = ` <div> <div - class="sc-iXzfSG ixShVn" + style="overflow: auto;" + title="1 / 4 x Sref x A x 2" > - <div - style="overflow: auto;" + <span + class="katex-display" > <span - class="katex-display" + class="katex" > <span - class="katex" + class="katex-mathml" > - <span - class="katex-mathml" + <math + display="block" + xmlns="http://www.w3.org/1998/Math/MathML" > - <math - display="block" - xmlns="http://www.w3.org/1998/Math/MathML" - > - <semantics> - <mrow> - <mfrac> - <mn> - 1 - </mn> - <mn> - 4 - </mn> - </mfrac> - <mo> - × - </mo> - <mi> - S - </mi> - <mi> - r - </mi> - <mi> - e - </mi> - <mi> - f - </mi> - <mo> - × - </mo> - <mi> - A - </mi> - <mo> - × - </mo> + <semantics> + <mrow> + <mfrac> <mn> - 2 + 1 </mn> - </mrow> - <annotation - encoding="application/x-tex" - > - \\frac{1}{4} \\times Sref \\times A \\times 2 - </annotation> - </semantics> - </math> - </span> + <mn> + 4 + </mn> + </mfrac> + <mo> + × + </mo> + <mi> + S + </mi> + <mi> + r + </mi> + <mi> + e + </mi> + <mi> + f + </mi> + <mo> + × + </mo> + <mi> + A + </mi> + <mo> + × + </mo> + <mn> + 2 + </mn> + </mrow> + <annotation + encoding="application/x-tex" + > + \\frac{1}{4} \\times Sref \\times A \\times 2 + </annotation> + </semantics> + </math> + </span> + <span + aria-hidden="true" + class="katex-html" + > <span - aria-hidden="true" - class="katex-html" + class="base" > <span - class="base" + class="strut" + style="height:2.0074em;vertical-align:-0.686em;" + /> + <span + class="mord" > <span - class="strut" - style="height:2.0074em;vertical-align:-0.686em;" + class="mopen nulldelimiter" /> <span - class="mord" + class="mfrac" > <span - class="mopen nulldelimiter" - /> - <span - class="mfrac" + class="vlist-t vlist-t2" > <span - class="vlist-t vlist-t2" + class="vlist-r" > <span - class="vlist-r" + class="vlist" + style="height:1.3214em;" > <span - class="vlist" - style="height:1.3214em;" + style="top:-2.314em;" > <span - style="top:-2.314em;" + class="pstrut" + style="height:3em;" + /> + <span + class="mord" > - <span - class="pstrut" - style="height:3em;" - /> <span class="mord" > - <span - class="mord" - > - 4 - </span> + 4 </span> </span> + </span> + <span + style="top:-3.23em;" + > <span - style="top:-3.23em;" - > - <span - class="pstrut" - style="height:3em;" - /> - <span - class="frac-line" - style="border-bottom-width:0.04em;" - /> - </span> + class="pstrut" + style="height:3em;" + /> + <span + class="frac-line" + style="border-bottom-width:0.04em;" + /> + </span> + <span + style="top:-3.677em;" + > + <span + class="pstrut" + style="height:3em;" + /> <span - style="top:-3.677em;" + class="mord" > - <span - class="pstrut" - style="height:3em;" - /> <span class="mord" > - <span - class="mord" - > - 1 - </span> + 1 </span> </span> </span> - <span - class="vlist-s" - > - ​ - </span> </span> <span - class="vlist-r" + class="vlist-s" > - <span - class="vlist" - style="height:0.686em;" - > - <span /> - </span> + ​ + </span> + </span> + <span + class="vlist-r" + > + <span + class="vlist" + style="height:0.686em;" + > + <span /> </span> </span> </span> - <span - class="mclose nulldelimiter" - /> - </span> - <span - class="mspace" - style="margin-right:0.2222em;" - /> - <span - class="mbin" - > - × </span> <span - class="mspace" - style="margin-right:0.2222em;" + class="mclose nulldelimiter" /> </span> <span - class="base" + class="mspace" + style="margin-right:0.2222em;" + /> + <span + class="mbin" > - <span - class="strut" - style="height:0.8889em;vertical-align:-0.1944em;" - /> - <span - class="mord mathnormal" - style="margin-right:0.05764em;" - > - S - </span> - <span - class="mord mathnormal" - > - re - </span> - <span - class="mord mathnormal" - style="margin-right:0.10764em;" - > - f - </span> - <span - class="mspace" - style="margin-right:0.2222em;" - /> - <span - class="mbin" - > - × - </span> - <span - class="mspace" - style="margin-right:0.2222em;" - /> + × </span> <span - class="base" + class="mspace" + style="margin-right:0.2222em;" + /> + </span> + <span + class="base" + > + <span + class="strut" + style="height:0.8889em;vertical-align:-0.1944em;" + /> + <span + class="mord mathnormal" + style="margin-right:0.05764em;" > - <span - class="strut" - style="height:0.7667em;vertical-align:-0.0833em;" - /> - <span - class="mord mathnormal" - > - A - </span> - <span - class="mspace" - style="margin-right:0.2222em;" - /> - <span - class="mbin" - > - × - </span> - <span - class="mspace" - style="margin-right:0.2222em;" - /> + S </span> <span - class="base" + class="mord mathnormal" > - <span - class="strut" - style="height:0.6444em;" - /> - <span - class="mord" - > - 2 - </span> + re + </span> + <span + class="mord mathnormal" + style="margin-right:0.10764em;" + > + f + </span> + <span + class="mspace" + style="margin-right:0.2222em;" + /> + <span + class="mbin" + > + × + </span> + <span + class="mspace" + style="margin-right:0.2222em;" + /> + </span> + <span + class="base" + > + <span + class="strut" + style="height:0.7667em;vertical-align:-0.0833em;" + /> + <span + class="mord mathnormal" + > + A + </span> + <span + class="mspace" + style="margin-right:0.2222em;" + /> + <span + class="mbin" + > + × + </span> + <span + class="mspace" + style="margin-right:0.2222em;" + /> + </span> + <span + class="base" + > + <span + class="strut" + style="height:0.6444em;" + /> + <span + class="mord" + > + 2 </span> </span> </span> </span> - </div> + </span> </div> </div> `; diff --git a/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/SelectQuestion.test.js.snap b/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/SelectQuestion.test.js.snap index 418849f24b..cccb02f4b7 100644 --- a/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/SelectQuestion.test.js.snap +++ b/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/SelectQuestion.test.js.snap @@ -6,7 +6,7 @@ exports[`<SelectQuestion /> should render with default value 1`] = ` class="sc-iapWAC huEEnQ" > <legend - class="sc-gdyeKB TWbCy sc-lnPyaJ mBNCq" + class="sc-gdyeKB TWbCy sc-lnPyaJ hbIKxD" data-testid="question-label" for="input-foo" > @@ -90,7 +90,7 @@ exports[`<SelectQuestion /> should render with selectedValue value 1`] = ` class="sc-iapWAC huEEnQ" > <legend - class="sc-gdyeKB TWbCy sc-lnPyaJ mBNCq" + class="sc-gdyeKB TWbCy sc-lnPyaJ hbIKxD" data-testid="question-label" for="input-foo" > diff --git a/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/StepList.test.js.snap b/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/StepList.test.js.snap index 441bd1294a..aea713e662 100644 --- a/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/StepList.test.js.snap +++ b/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/StepList.test.js.snap @@ -39,7 +39,6 @@ exports[`<StepList /> should render 1`] = ` <li aria-live="polite" class="sc-iapWAC fhvlwJ" - tabindex="-1" title="onglet actif" > <span diff --git a/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/Wizard.test.tsx.snap b/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/Wizard.test.tsx.snap index 8afa8946f1..8787a4a536 100644 --- a/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/Wizard.test.tsx.snap +++ b/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/Wizard.test.tsx.snap @@ -6,35 +6,35 @@ exports[`<Wizard /> should call navigate the previous step when click on précé class="sc-iGgWBj biWgIW" > <form - class="sc-camqpD hZvLtm" + class="sc-kbdlSk CXQkJ" > <div - class="sc-bOQTJJ dHEPea" + class="sc-hYmls jKkoYJ" > <div - class="sc-gEkIjz dDsXGK" + class="sc-eXsaLi bdWhoM" > <h1 - class="sc-eXsaLi jcPJdF" + class="sc-bOQTJJ hoVrPf" > test H1 </h1> </div> </div> <div - class="sc-iGgWBj sc-kgOKUu cWzIZL dTskMB" + class="sc-iGgWBj sc-fKWMtX cWzIZL bcBkxu" > <span - class="sc-bfhvDw jnggxr" + class="sc-kgOKUu bjvUoK" > Étape <span - class="sc-cMa-dbN byVUiP" + class="sc-bfhvDw kYFtQY" > s </span> <span - class="sc-fUBkdm fFFpEK" + class="sc-cMa-dbN gAIJdP" >   1/2 @@ -45,22 +45,21 @@ exports[`<Wizard /> should call navigate the previous step when click on précé > <li aria-live="polite" - class="sc-hBtRBD eGwkwu" - tabindex="-1" + class="sc-fUBkdm kTxRgT" title="onglet actif" > <span - class="sc-hYmls jVGokf" + class="sc-hBtRBD bUvebq" > 1 </span> First Step </li> <li - class="sc-hBtRBD ccHFNw" + class="sc-fUBkdm jQjOBp" > <span - class="sc-hYmls kGneDw" + class="sc-hBtRBD zIbRN" > 2 </span> @@ -72,15 +71,15 @@ exports[`<Wizard /> should call navigate the previous step when click on précé Premiere Etape </p> <div - class="sc-lbJcrp fsWMsG" + class="sc-iLsKjm eOFMyx" > <button - class="sc-kOPcWz cefBoA sc-iLsKjm sc-eifrsQ eQYdHK ehoSxM" + class="sc-kOPcWz cefBoA sc-epALIP sc-lbJcrp dyTjwR innUxH" > Commencer <svg aria-hidden="true" - class="sc-fKWMtX bKjPaG" + class="sc-eifrsQ dsvLPn" fill="none" viewBox="0 0 28 15" xmlns="http://www.w3.org/2000/svg" @@ -103,35 +102,35 @@ exports[`<Wizard /> should handle initialState.stepIndex 1`] = ` class="sc-iGgWBj biWgIW" > <form - class="sc-camqpD hZvLtm" + class="sc-kbdlSk CXQkJ" > <div - class="sc-bOQTJJ dHEPea" + class="sc-hYmls jKkoYJ" > <div - class="sc-gEkIjz dDsXGK" + class="sc-eXsaLi bdWhoM" > <h1 - class="sc-eXsaLi jcPJdF" + class="sc-bOQTJJ hoVrPf" > test H1 </h1> </div> </div> <div - class="sc-iGgWBj sc-kgOKUu cWzIZL dTskMB" + class="sc-iGgWBj sc-fKWMtX cWzIZL bcBkxu" > <span - class="sc-bfhvDw jnggxr" + class="sc-kgOKUu bjvUoK" > Étape <span - class="sc-cMa-dbN byVUiP" + class="sc-bfhvDw kYFtQY" > s </span> <span - class="sc-fUBkdm fFFpEK" + class="sc-cMa-dbN gAIJdP" >   2/2 @@ -141,10 +140,10 @@ exports[`<Wizard /> should handle initialState.stepIndex 1`] = ` class="sc-cfxfcM kMmTaI" > <li - class="sc-hBtRBD ccHFNw" + class="sc-fUBkdm jQjOBp" > <span - class="sc-hYmls kGneDw" + class="sc-hBtRBD zIbRN" > 1 </span> @@ -152,12 +151,11 @@ exports[`<Wizard /> should handle initialState.stepIndex 1`] = ` </li> <li aria-live="polite" - class="sc-hBtRBD eGwkwu" - tabindex="-1" + class="sc-fUBkdm kTxRgT" title="onglet actif" > <span - class="sc-hYmls jVGokf" + class="sc-hBtRBD bUvebq" > 2 </span> @@ -180,16 +178,16 @@ exports[`<Wizard /> should handle initialState.stepIndex 1`] = ` /> </label> <div - class="sc-lbJcrp fsWMsG" + class="sc-iLsKjm eOFMyx" > <button - class="sc-kOPcWz dSQWfG sc-iLsKjm eQYdHK" + class="sc-kOPcWz dSQWfG sc-epALIP dyTjwR" type="button" > Précédent </button> <button - class="sc-kOPcWz gWtlVM sc-iLsKjm eQYdHK" + class="sc-kOPcWz gWtlVM sc-epALIP dyTjwR" type="button" > Imprimer le résultat @@ -206,35 +204,35 @@ exports[`<Wizard /> should handle initialValues 1`] = ` class="sc-iGgWBj biWgIW" > <form - class="sc-camqpD hZvLtm" + class="sc-kbdlSk CXQkJ" > <div - class="sc-bOQTJJ dHEPea" + class="sc-hYmls jKkoYJ" > <div - class="sc-gEkIjz dDsXGK" + class="sc-eXsaLi bdWhoM" > <h1 - class="sc-eXsaLi jcPJdF" + class="sc-bOQTJJ hoVrPf" > test H1 </h1> </div> </div> <div - class="sc-iGgWBj sc-kgOKUu cWzIZL dTskMB" + class="sc-iGgWBj sc-fKWMtX cWzIZL bcBkxu" > <span - class="sc-bfhvDw jnggxr" + class="sc-kgOKUu bjvUoK" > Étape <span - class="sc-cMa-dbN byVUiP" + class="sc-bfhvDw kYFtQY" > s </span> <span - class="sc-fUBkdm fFFpEK" + class="sc-cMa-dbN gAIJdP" >   1/3 @@ -245,32 +243,31 @@ exports[`<Wizard /> should handle initialValues 1`] = ` > <li aria-live="polite" - class="sc-hBtRBD eGwkwu" - tabindex="-1" + class="sc-fUBkdm kTxRgT" title="onglet actif" > <span - class="sc-hYmls jVGokf" + class="sc-hBtRBD bUvebq" > 1 </span> First Step </li> <li - class="sc-hBtRBD ccHFNw" + class="sc-fUBkdm jQjOBp" > <span - class="sc-hYmls kGneDw" + class="sc-hBtRBD zIbRN" > 2 </span> Second Step </li> <li - class="sc-hBtRBD ccHFNw" + class="sc-fUBkdm jQjOBp" > <span - class="sc-hYmls kGneDw" + class="sc-hBtRBD zIbRN" > 3 </span> @@ -282,15 +279,15 @@ exports[`<Wizard /> should handle initialValues 1`] = ` Premiere Etape </p> <div - class="sc-lbJcrp fsWMsG" + class="sc-iLsKjm eOFMyx" > <button - class="sc-kOPcWz cefBoA sc-iLsKjm sc-eifrsQ eQYdHK ehoSxM" + class="sc-kOPcWz cefBoA sc-epALIP sc-lbJcrp dyTjwR innUxH" > Commencer <svg aria-hidden="true" - class="sc-fKWMtX bKjPaG" + class="sc-eifrsQ dsvLPn" fill="none" viewBox="0 0 28 15" xmlns="http://www.w3.org/2000/svg" @@ -313,35 +310,35 @@ exports[`<Wizard /> should navigate to the second step when click on Commencer 1 class="sc-iGgWBj biWgIW" > <form - class="sc-camqpD hZvLtm" + class="sc-kbdlSk CXQkJ" > <div - class="sc-bOQTJJ dHEPea" + class="sc-hYmls jKkoYJ" > <div - class="sc-gEkIjz dDsXGK" + class="sc-eXsaLi bdWhoM" > <h1 - class="sc-eXsaLi jcPJdF" + class="sc-bOQTJJ hoVrPf" > test H1 </h1> </div> </div> <div - class="sc-iGgWBj sc-kgOKUu cWzIZL dTskMB" + class="sc-iGgWBj sc-fKWMtX cWzIZL bcBkxu" > <span - class="sc-bfhvDw jnggxr" + class="sc-kgOKUu bjvUoK" > Étape <span - class="sc-cMa-dbN byVUiP" + class="sc-bfhvDw kYFtQY" > s </span> <span - class="sc-fUBkdm fFFpEK" + class="sc-cMa-dbN gAIJdP" >   2/2 @@ -351,10 +348,10 @@ exports[`<Wizard /> should navigate to the second step when click on Commencer 1 class="sc-cfxfcM kMmTaI" > <li - class="sc-hBtRBD ccHFNw" + class="sc-fUBkdm jQjOBp" > <span - class="sc-hYmls kGneDw" + class="sc-hBtRBD zIbRN" > 1 </span> @@ -362,12 +359,11 @@ exports[`<Wizard /> should navigate to the second step when click on Commencer 1 </li> <li aria-live="polite" - class="sc-hBtRBD eGwkwu" - tabindex="-1" + class="sc-fUBkdm kTxRgT" title="onglet actif" > <span - class="sc-hYmls jVGokf" + class="sc-hBtRBD bUvebq" > 2 </span> @@ -390,16 +386,16 @@ exports[`<Wizard /> should navigate to the second step when click on Commencer 1 /> </label> <div - class="sc-lbJcrp fsWMsG" + class="sc-iLsKjm eOFMyx" > <button - class="sc-kOPcWz dSQWfG sc-iLsKjm eQYdHK" + class="sc-kOPcWz dSQWfG sc-epALIP dyTjwR" type="button" > Précédent </button> <button - class="sc-kOPcWz gWtlVM sc-iLsKjm eQYdHK" + class="sc-kOPcWz gWtlVM sc-epALIP dyTjwR" type="button" > Imprimer le résultat @@ -416,35 +412,35 @@ exports[`<Wizard /> should render a step 1`] = ` class="sc-iGgWBj biWgIW" > <form - class="sc-camqpD hZvLtm" + class="sc-kbdlSk CXQkJ" > <div - class="sc-bOQTJJ dHEPea" + class="sc-hYmls jKkoYJ" > <div - class="sc-gEkIjz dDsXGK" + class="sc-eXsaLi bdWhoM" > <h1 - class="sc-eXsaLi jcPJdF" + class="sc-bOQTJJ hoVrPf" > test H1 </h1> </div> </div> <div - class="sc-iGgWBj sc-kgOKUu cWzIZL dTskMB" + class="sc-iGgWBj sc-fKWMtX cWzIZL bcBkxu" > <span - class="sc-bfhvDw jnggxr" + class="sc-kgOKUu bjvUoK" > Étape <span - class="sc-cMa-dbN byVUiP" + class="sc-bfhvDw kYFtQY" > s </span> <span - class="sc-fUBkdm fFFpEK" + class="sc-cMa-dbN gAIJdP" >   1/2 @@ -455,22 +451,21 @@ exports[`<Wizard /> should render a step 1`] = ` > <li aria-live="polite" - class="sc-hBtRBD eGwkwu" - tabindex="-1" + class="sc-fUBkdm kTxRgT" title="onglet actif" > <span - class="sc-hYmls jVGokf" + class="sc-hBtRBD bUvebq" > 1 </span> First Step </li> <li - class="sc-hBtRBD ccHFNw" + class="sc-fUBkdm jQjOBp" > <span - class="sc-hYmls kGneDw" + class="sc-hBtRBD zIbRN" > 2 </span> @@ -482,15 +477,15 @@ exports[`<Wizard /> should render a step 1`] = ` Premiere Etape </p> <div - class="sc-lbJcrp fsWMsG" + class="sc-iLsKjm eOFMyx" > <button - class="sc-kOPcWz cefBoA sc-iLsKjm sc-eifrsQ eQYdHK ehoSxM" + class="sc-kOPcWz cefBoA sc-epALIP sc-lbJcrp dyTjwR innUxH" > Commencer <svg aria-hidden="true" - class="sc-fKWMtX bKjPaG" + class="sc-eifrsQ dsvLPn" fill="none" viewBox="0 0 28 15" xmlns="http://www.w3.org/2000/svg" diff --git a/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/YesNoQuestion.test.js.snap b/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/YesNoQuestion.test.js.snap index 19b629cf97..6020c10e1d 100644 --- a/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/YesNoQuestion.test.js.snap +++ b/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/YesNoQuestion.test.js.snap @@ -3,7 +3,7 @@ exports[`<YesNoQuestion /> should render 1`] = ` <div> <legend - class="sc-gdyeKB TWbCy sc-lnPyaJ mBNCq" + class="sc-gdyeKB TWbCy sc-lnPyaJ hbIKxD" data-testid="question-label" > <span diff --git a/packages/code-du-travail-frontend/src/outils/common/stepStyles.ts b/packages/code-du-travail-frontend/src/outils/common/stepStyles.ts index 0618512bc6..044a16b866 100644 --- a/packages/code-du-travail-frontend/src/outils/common/stepStyles.ts +++ b/packages/code-du-travail-frontend/src/outils/common/stepStyles.ts @@ -28,20 +28,18 @@ export const SectionTitle = styled.h2` font-family: "Open Sans", sans-serif; `; -export const Highlight = styled.strong` +export const HighlightResult = styled.strong.attrs(() => ({ + role: "alert", +}))` color: ${({ theme }) => theme.primary}; font-weight: 700; - font-size: ${fonts.sizes.headings.small}; + font-size: ${fonts.sizes.headings.xmedium}; white-space: pre-line; @media (max-width: ${breakpoints.mobile}) { - font-size: ${fonts.sizes.default}; + font-size: ${fonts.sizes.medium}; } `; -export const HighlightResult = styled(Highlight)` - font-size: 1.5em; -`; - export const SmallText = styled.p` color: ${colors.paragraph}; font-size: ${fonts.sizes.small}; diff --git a/packages/code-du-travail-frontend/src/questionnaire/Components/Question/Question.tsx b/packages/code-du-travail-frontend/src/questionnaire/Components/Question/Question.tsx index 725ce949bf..2c10772376 100644 --- a/packages/code-du-travail-frontend/src/questionnaire/Components/Question/Question.tsx +++ b/packages/code-du-travail-frontend/src/questionnaire/Components/Question/Question.tsx @@ -6,7 +6,6 @@ import { Fieldset, Legend, Text } from "@socialgouv/cdtn-ui"; import { InfoBulle } from "../../../outils/common/InfoBulle"; import { trackClickHelp } from "../../tracking"; import React, { useContext } from "react"; -import { Paragraph } from "@socialgouv/cdtn-ui/lib"; type QuestionProps = { widgetMode: boolean; diff --git a/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchResults.test.js.snap b/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchResults.test.js.snap index 226c376cb5..fb4b07d88d 100644 --- a/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchResults.test.js.snap +++ b/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchResults.test.js.snap @@ -136,7 +136,7 @@ exports[`<SearchResults/> should render results 1`] = ` class="sc-eulNck bCoRam" > <p - class="sc-jGKxIK jvUYCL" + class="sc-jGKxIK QfhnJ" > Consulter @@ -207,7 +207,7 @@ exports[`<SearchResults/> should render results 1`] = ` class="sc-eulNck bCoRam" > <p - class="sc-jGKxIK jvUYCL" + class="sc-jGKxIK QfhnJ" > Consulter @@ -302,7 +302,7 @@ exports[`<SearchResults/> should render results 1`] = ` class="sc-eulNck bCoRam" > <p - class="sc-jGKxIK jvUYCL" + class="sc-jGKxIK QfhnJ" > Consulter diff --git a/packages/react-ui/src/Collapse/__snapshots__/test.js.snap b/packages/react-ui/src/Collapse/__snapshots__/test.js.snap index 3d2ffc6f5d..cb0e26d204 100644 --- a/packages/react-ui/src/Collapse/__snapshots__/test.js.snap +++ b/packages/react-ui/src/Collapse/__snapshots__/test.js.snap @@ -5,8 +5,7 @@ exports[`<Collapse /> renders 1`] = ` <div> <button aria-expanded="false" - class="sc-feUZmu bOvDPL sc-hzhJZQ jezzmW" - tabindex="1" + class="sc-feUZmu bOvDPL sc-hzhJZQ eOoNgs" type="button" > <svg diff --git a/packages/react-ui/src/Collapse/index.js b/packages/react-ui/src/Collapse/index.js index 7260211a0b..a33d19509b 100644 --- a/packages/react-ui/src/Collapse/index.js +++ b/packages/react-ui/src/Collapse/index.js @@ -12,7 +12,6 @@ export const Collapse = ({ onClickHandler, textProps, className, - autoFocus = false, }) => { const [active, setActive] = React.useState(false); const [height, setHeight] = React.useState("0px"); @@ -32,10 +31,6 @@ export const Collapse = ({ variant="naked" narrow type="button" - // eslint-disable-next-line jsx-a11y/no-autofocus - autoFocus={autoFocus} - // eslint-disable-next-line jsx-a11y/tabindex-no-positive - tabIndex={1} > <AccordionArrow aria-hidden="true" /> <StyledText noMargin fontSize="hsmall" fontWeight="600" {...textProps}> @@ -73,6 +68,7 @@ const StyledLink = styled(Button)` &[aria-expanded="true"] { color: ${({ theme }) => theme.paragraph}; } + padding: 0; `; const StyledText = styled.span` @@ -81,7 +77,6 @@ const StyledText = styled.span` `; Collapse.propTypes = { - autoFocus: PropTypes.boolean, children: PropTypes.node.isRequired, className: PropTypes.string, onClickHandler: PropTypes.func, diff --git a/packages/react-ui/src/Toast/index.js b/packages/react-ui/src/Toast/index.js index 03dab0a1e9..1e1beb90b6 100644 --- a/packages/react-ui/src/Toast/index.js +++ b/packages/react-ui/src/Toast/index.js @@ -3,7 +3,7 @@ import React, { useEffect } from "react"; import { X } from "react-feather"; import styled, { css } from "styled-components"; -import { Button } from "../Button/index.js"; +import { Button } from "../Button"; import { fromBottom, fromLeft, fromRight, fromTop } from "../keyframes.js"; import { box, spacings } from "../theme"; @@ -28,7 +28,6 @@ export const Toast = ({ children, onRemove, timeout, variant, ...props }) => { small aria-label="Fermer" onClick={onRemove} - tabIndex={props.tabIndex} > <StyledX aria-hidden="true" variant={variant} /> </Button> @@ -48,7 +47,6 @@ Toast.propTypes = { onRemove: PropTypes.func, shadow: PropTypes.bool, squared: PropTypes.bool, - tabIndex: PropTypes.number, timeout: PropTypes.number, variant: PropTypes.oneOf(["primary", "secondary"]), wide: PropTypes.bool, diff --git a/packages/react-ui/src/field/Input.js b/packages/react-ui/src/field/Input.js index 80de458074..eeafa95672 100644 --- a/packages/react-ui/src/field/Input.js +++ b/packages/react-ui/src/field/Input.js @@ -63,9 +63,8 @@ Input.defaultProps = { export const INPUT_HEIGHT = "5.4rem"; -const StyledWrapper = styled.span` +const StyledWrapper = styled.div` position: relative; - display: inline-block; @media (max-width: ${breakpoints.mobile}) { width: 100%; } diff --git a/packages/react-ui/src/field/InputDate.js b/packages/react-ui/src/field/InputDate.js index b13af2b378..77a17a739f 100644 --- a/packages/react-ui/src/field/InputDate.js +++ b/packages/react-ui/src/field/InputDate.js @@ -165,7 +165,7 @@ const StyledInput = styled.input` border-color: transparent; outline: none; border-radius: ${box.borderRadius}; - width: 160px; + width: 15rem; @media (max-width: ${breakpoints.mobile}) { width: 100%; } @@ -181,7 +181,7 @@ const StyledDiv = styled.div` justify-content: center; align-items: center; cursor: pointer; - width: 40px; + width: 4rem; height: 100%; `; diff --git a/packages/react-ui/src/field/__snapshots__/test.js.snap b/packages/react-ui/src/field/__snapshots__/test.js.snap index 0bb0255bc5..2642472bdd 100644 --- a/packages/react-ui/src/field/__snapshots__/test.js.snap +++ b/packages/react-ui/src/field/__snapshots__/test.js.snap @@ -2,14 +2,14 @@ exports[`<Input /> should render input field 1`] = ` <div> - <span - class="sc-eqUAAy gDroom" + <div + class="sc-eqUAAy kfObaO" > <input class="sc-fqkvVR bbxaek" name="input" /> - </span> + </div> </div> `; @@ -36,13 +36,13 @@ exports[`<InputDate /> should render input date field 1`] = ` class="sc-iGgWBj kZPIXv" > <input - class="sc-gsFSXq heEHNM" + class="sc-gsFSXq iEYecB" name="input_date" placeholder="jj/mm/aaaa" value="" /> <div - class="sc-kAyceB koiqfG" + class="sc-kAyceB cLXjdA" > <div class="sc-jXbUNg dPutyI"