From 6364fc20e3e5a6466e7ef40a7f063909c2f66bae Mon Sep 17 00:00:00 2001 From: Caroline <4971715+carolineBda@users.noreply.github.com> Date: Tue, 28 Jan 2025 11:31:24 +0100 Subject: [PATCH 1/3] =?UTF-8?q?fix(autocomplete):=20r=C3=A9utilisation=20d?= =?UTF-8?q?u=20composant=20autocomplete=20sur=20la=20home,=20accentuation?= =?UTF-8?q?=20du=20contraste=20quand=20on=20parcours=20les=20suggestions?= =?UTF-8?q?=20au=20clavier=20(#6429)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modules/Location/LocationSearchInput.tsx | 10 +- .../common/Autocomplete/Autocomplete.tsx | 91 +++++------ .../AgreementSearch/AgreementSearchInput.tsx | 89 +++++----- .../EnterpriseAgreementSearchInput.tsx | 11 +- .../modules/home/Components/HomeSearch.tsx | 152 ++++++------------ .../src/modules/home/Search.tsx | 15 +- .../home/__tests__/HomeSearch.test.tsx | 32 ++-- .../__snapshots__/index.test.tsx.snap | 91 ++++++----- .../src/modules/layout/header/SearchInput.tsx | 23 +-- .../__snapshots__/HeaderDsfr.test.tsx.snap | 2 +- 10 files changed, 224 insertions(+), 292 deletions(-) diff --git a/packages/code-du-travail-frontend/src/modules/Location/LocationSearchInput.tsx b/packages/code-du-travail-frontend/src/modules/Location/LocationSearchInput.tsx index 214b34adb2..a98f688af2 100644 --- a/packages/code-du-travail-frontend/src/modules/Location/LocationSearchInput.tsx +++ b/packages/code-du-travail-frontend/src/modules/Location/LocationSearchInput.tsx @@ -1,13 +1,9 @@ "use client"; import { ApiGeoResult, searchCities } from "./searchCities"; -import { - Autocomplete, - AutocompleteProps, -} from "../common/Autocomplete/Autocomplete"; +import { Autocomplete, AutocompleteProps } from "../common/Autocomplete"; import { useState } from "react"; type Props = Pick, "classes"> & { - className?: string; onLocationChange?: (location: ApiGeoResult | undefined) => void; defaultValue?: ApiGeoResult; }; @@ -20,9 +16,7 @@ const detectIfPostalCode = (postalCodeOrName: string): boolean => { }; export const LocationSearchInput = ({ - className, onLocationChange, - classes, defaultValue, }: Props) => { const [postalCode, setPostalCode] = useState(); @@ -34,7 +28,6 @@ export const LocationSearchInput = ({ return ( - className={className} onChange={(value) => { if (onLocationChange) onLocationChange(value); }} @@ -47,7 +40,6 @@ export const LocationSearchInput = ({ label={<>Code postal ou Ville (optionnel)} state={"default"} dataTestId={"locationSearchAutocomplete"} - classes={classes} displayNoResult defaultValue={defaultValue} /> diff --git a/packages/code-du-travail-frontend/src/modules/common/Autocomplete/Autocomplete.tsx b/packages/code-du-travail-frontend/src/modules/common/Autocomplete/Autocomplete.tsx index 8fc85583ff..87025e2a27 100644 --- a/packages/code-du-travail-frontend/src/modules/common/Autocomplete/Autocomplete.tsx +++ b/packages/code-du-travail-frontend/src/modules/common/Autocomplete/Autocomplete.tsx @@ -8,6 +8,7 @@ import { useState } from "react"; import Spinner from "../Spinner.svg"; import { css } from "@styled-system/css"; import { redirect } from "next/navigation"; +import Link from "../Link"; export type AutocompleteProps = InputProps & { onChange?: (value: K | undefined) => void; @@ -23,7 +24,6 @@ export type AutocompleteProps = InputProps & { }; export const Autocomplete = ({ - className, onChange, onSearch, onError, @@ -35,7 +35,6 @@ export const Autocomplete = ({ state, stateRelatedMessage, hintText, - classes, dataTestId, displayNoResult, defaultValue, @@ -69,7 +68,7 @@ export const Autocomplete = ({ }); return ( <> -
+
({ label={label} state={state} stateRelatedMessage={stateRelatedMessage} - classes={classes} />
    ({ {value.length > 1 && (isOpen && suggestions.length ? suggestions.map((item, index) => ( - <> -
  • - -
    • - + + ) : ( + <>{displayLabel(item)} + )} + )) : displayNoResult && !selectedResult && ( - <> -
  • - - Aucun résultat - -
    • - +
  • Aucun résultat
    • ))}
@@ -197,23 +177,17 @@ export const Autocomplete = ({ ); }; -const autocompleteContainer = css({ - position: "relative", -}); - -const autocompleteListContainer = css({ +export const autocompleteListContainer = css({ position: "absolute", - w: "calc(100% - 1rem)", - zIndex: 100, + w: "100%", + zIndex: 10, bg: "var(--background-default-grey)", + listStyleType: "none!", }); -const autocompleteButton = css({ - textAlign: "left", -}); - -const buttonActive = css({ - backgroundColor: "rgb(246, 246, 246)", +export const suggestion = css({ + cursor: "pointer", + color: "var(--text-action-high-blue-france)", }); const addonBlock = css({ @@ -225,10 +199,19 @@ const addonBlock = css({ const buttonClose = css({ _before: { - width: "18px !important", - height: "18px !important", + width: "18px!", + height: "18px!", }, _hover: { - backgroundColor: "unset !important", + backgroundColor: "unset!", }, }); + +export const isHighlighted = css({ + bg: "var(--background-default-grey-hover)", + fontWeight: "bold", +}); + +const link = css({ + backgroundImage: "none!", +}); diff --git a/packages/code-du-travail-frontend/src/modules/convention-collective/AgreementSearch/AgreementSearchInput.tsx b/packages/code-du-travail-frontend/src/modules/convention-collective/AgreementSearch/AgreementSearchInput.tsx index ed9cd79d88..165d18c69e 100644 --- a/packages/code-du-travail-frontend/src/modules/convention-collective/AgreementSearch/AgreementSearchInput.tsx +++ b/packages/code-du-travail-frontend/src/modules/convention-collective/AgreementSearch/AgreementSearchInput.tsx @@ -4,7 +4,7 @@ import Alert from "@codegouvfr/react-dsfr/Alert"; import { getRouteBySource, SOURCES } from "@socialgouv/cdtn-utils"; import { useState } from "react"; -import { Autocomplete } from "../../common/Autocomplete/Autocomplete"; +import { Autocomplete } from "../../common/Autocomplete"; import { Agreement } from "../../../outils/types"; import { searchAgreement } from "../search"; import { useAgreementSearchTracking } from "../tracking"; @@ -56,50 +56,51 @@ export const AgreementSearchInput = ({ onSearch }: Props) => { Précisez et sélectionnez votre convention collective
- - dataTestId="AgreementSearchAutocomplete" - className={fr.cx("fr-col-12", "fr-mb-0")} - hintText="Ex : transport routier ou 1486" - label={ - <> - Nom de la convention collective ou son numéro - d’identification IDCC (4 chiffres) - - } - state={getInputState()} - stateRelatedMessage={getStateMessage()} - displayLabel={(item) => { - return item ? `${item.shortTitle} (IDCC ${item.num})` : ""; - }} - lineAsLink={(item) => { - return `/${getRouteBySource(SOURCES.CCN)}/${item.slug}`; - }} - onChange={(agreement) => { - if (agreement) { - emitSelectEvent(`idcc${agreement.id}`); - } - }} - search={searchAgreement} - onSearch={(query, agreements) => { - if (query) { - emitAgreementSearchInputEvent(query); - } - if (onSearch) onSearch(query, agreements); - if (!query) { - setSearchState("noSearch"); - } else if (!agreements.length && query.length <= 2) { - setSearchState("lowSearch"); - } else if (!agreements.length && query.length > 2) { - setSearchState("notFoundSearch"); - } else { - setSearchState("fullSearch"); +
+ + dataTestId="AgreementSearchAutocomplete" + hintText="Ex : transport routier ou 1486" + label={ + <> + Nom de la convention collective ou son numéro d’identification + IDCC (4 chiffres) + } - }} - onError={(message) => { - setSearchState("errorSearch"); - setError(message); - }} - /> + state={getInputState()} + stateRelatedMessage={getStateMessage()} + displayLabel={(item) => { + return item ? `${item.shortTitle} (IDCC ${item.num})` : ""; + }} + lineAsLink={(item) => { + return `/${getRouteBySource(SOURCES.CCN)}/${item.slug}`; + }} + onChange={(agreement) => { + if (agreement) { + emitSelectEvent(`idcc${agreement.id}`); + } + }} + search={searchAgreement} + onSearch={(query, agreements) => { + if (query) { + emitAgreementSearchInputEvent(query); + } + if (onSearch) onSearch(query, agreements); + if (!query) { + setSearchState("noSearch"); + } else if (!agreements.length && query.length <= 2) { + setSearchState("lowSearch"); + } else if (!agreements.length && query.length > 2) { + setSearchState("notFoundSearch"); + } else { + setSearchState("fullSearch"); + } + }} + onError={(message) => { + setSearchState("errorSearch"); + setError(message); + }} + /> +
{searchState === "notFoundSearch" && ( - + > + +
diff --git a/packages/code-du-travail-frontend/src/modules/home/Components/HomeSearch.tsx b/packages/code-du-travail-frontend/src/modules/home/Components/HomeSearch.tsx index 01cd3a8b88..52ca40d104 100644 --- a/packages/code-du-travail-frontend/src/modules/home/Components/HomeSearch.tsx +++ b/packages/code-du-travail-frontend/src/modules/home/Components/HomeSearch.tsx @@ -3,107 +3,67 @@ import * as Sentry from "@sentry/nextjs"; import { fr } from "@codegouvfr/react-dsfr"; import { Button } from "@codegouvfr/react-dsfr/Button"; import { css } from "@styled-system/css"; -import { useCombobox } from "downshift"; import { fetchSuggestResults } from "../../layout/header/fetchSuggestResults"; +import { Autocomplete } from "../../common/Autocomplete"; import { SUGGEST_MAX_RESULTS } from "../../../config"; import { useLayoutTracking } from "../../layout/tracking"; +import { useRouter } from "next/navigation"; -type Props = { - onSearchSubmit: (text: string) => void; -}; - -export const HomeSearch = (props: Props) => { +export const HomeSearch = () => { const [query, setQuery] = useState(""); const [suggestions, setSuggestions] = useState([]); const { emitSuggestionEvent } = useLayoutTracking(); + const router = useRouter(); - const { - isOpen, - getMenuProps, - getInputProps, - highlightedIndex, - getItemProps, - getLabelProps, - } = useCombobox({ - items: suggestions, - onInputValueChange: async ({ inputValue }) => { - setQuery(inputValue); - try { - const results = await fetchSuggestResults(inputValue).then((items) => - items.slice(0, SUGGEST_MAX_RESULTS) - ); - setSuggestions(results); - } catch (error) { - console.error("Echec lors de la récupération des suggestions", error); - Sentry.captureMessage("Echec lors de la récupération des suggestions"); - } - }, - onSelectedItemChange(changes) { - const suggestion = changes.selectedItem; - if (suggestion) { - emitSuggestionEvent(query, suggestion, suggestions); - props.onSearchSubmit(suggestion); - } - }, - initialInputValue: query, - }); + const onSubmit = () => { + router.push(getSearchUrl(query)); + }; - const handleKeyDown = (event: React.KeyboardEvent) => { - if (event.key === "Enter") { - event.preventDefault(); - props.onSearchSubmit(query); - } + const getSearchUrl = (text: string) => { + return `/recherche?q=${encodeURIComponent(text)}`; }; + const search = async (inputValue: string) => { + const results = await fetchSuggestResults(inputValue).then((items) => + items.slice(0, SUGGEST_MAX_RESULTS) + ); + setSuggestions(results); + return results; + }; + const onError = (error: string) => { + console.error("Echec lors de la récupération des suggestions", error); + Sentry.captureMessage("Echec lors de la récupération des suggestions"); + }; + const onSelectedItemChange = (value) => { + if (value) { + setQuery(value); + emitSuggestionEvent(query, value, suggestions); + } + }; return ( -
-
- - -
    - {isOpen && - suggestions.map((item, index) => ( -
  • - {item} -
    • - ))} -
-
+ + hintText="par exemple : congés payés, durée de préavis" + label={<>Recherchez par mots-clés} + displayLabel={(item) => item ?? ""} + onInputValueChange={(value) => { + setQuery(value); + }} + onChange={onSelectedItemChange} + search={search} + onError={onError} + dataTestId={"search-input"} + lineAsLink={getSearchUrl} + />
-
+ ); }; const buttonStyle = css({ mdDown: { - width: "100% !important", - display: "flex !important", - justifyContent: "center !important", + width: "100%!", + justifyContent: "center!", }, }); - -const list = css({ - pos: "absolute", - w: "100%", - zIndex: 100, - bg: "var(--background-default-grey)", - listStyleType: "none !important", - padding: "0!", - margin: "0!", -}); - -const suggestion = css({ - cursor: "pointer", - color: "var(--text-action-high-blue-france)", - textAlign: "left", - _hover: { bg: "var(--background-default-grey-hover)" }, -}); - -const isHighlighted = css({ - background: "var(--background-default-grey-hover)", -}); diff --git a/packages/code-du-travail-frontend/src/modules/home/Search.tsx b/packages/code-du-travail-frontend/src/modules/home/Search.tsx index 61ec925d12..63566fc05c 100644 --- a/packages/code-du-travail-frontend/src/modules/home/Search.tsx +++ b/packages/code-du-travail-frontend/src/modules/home/Search.tsx @@ -4,16 +4,9 @@ import { fr } from "@codegouvfr/react-dsfr"; import { css } from "@styled-system/css"; import Image from "next/image"; import { HomeSearch } from "./Components"; -import { useRouter } from "next/navigation"; import IllustrationHomePrincipal from "./picto/IllustrationHomePrincipal.svg"; export const Search = () => { - const router = useRouter(); - - const onSearchSubmit = (text: string) => { - router.push(`/recherche?q=${encodeURIComponent(text)}`); - }; - return (
@@ -26,7 +19,7 @@ export const Search = () => { >

- Bienvenue sur
+ Bienvenue sur{" "} @@ -36,7 +29,7 @@ export const Search = () => {

Obtenez les réponses à vos questions sur le droit du travail.

- +

{ }; const mainContainer = css({ - background: "var(--blue-cumulus-925-125)", + bg: "var(--blue-cumulus-925-125)", }); const displayBlock = css({ - display: "inline-block", + display: "block", }); diff --git a/packages/code-du-travail-frontend/src/modules/home/__tests__/HomeSearch.test.tsx b/packages/code-du-travail-frontend/src/modules/home/__tests__/HomeSearch.test.tsx index 394cbba4ea..de06ccee17 100644 --- a/packages/code-du-travail-frontend/src/modules/home/__tests__/HomeSearch.test.tsx +++ b/packages/code-du-travail-frontend/src/modules/home/__tests__/HomeSearch.test.tsx @@ -1,7 +1,7 @@ import { HomeSearch } from "../Components"; -import { render, waitFor } from "@testing-library/react"; +import { fireEvent, render, waitFor } from "@testing-library/react"; import React from "react"; -import { byTestId } from "testing-library-selector"; +import { byTestId, byLabelText } from "testing-library-selector"; import { fetchSuggestResults } from "../../layout/header/fetchSuggestResults"; import { useLayoutTracking } from "../../layout/tracking"; import { UserAction } from "../../../common"; @@ -9,6 +9,23 @@ import { UserAction } from "../../../common"; jest.mock("../../layout/header/fetchSuggestResults"); jest.mock("../../layout/tracking"); +jest.mock("../../layout/header/fetchSuggestResults"); +jest.mock("../../layout/tracking"); +let onSearchSubmitHasBeenCalled = false; +let redirectUrl; +jest.mock("next/navigation", () => { + return { + redirect: jest.fn((url) => { + onSearchSubmitHasBeenCalled = true; + redirectUrl = url; + }), + useRouter: () => { + return { + push: jest.fn(), + }; + }, + }; +}); describe("", () => { it("should show suggestions and send event tracking", async () => { const suggestions = [ @@ -30,14 +47,7 @@ describe("", () => { emitSuggestionEvent: emitSuggestionEventMock, }); - let onSearchSubmitHasBeenCalled = false; - const { getByText } = render( - { - onSearchSubmitHasBeenCalled = true; - }} - /> - ); + const { getByText } = render(); const userAction = new UserAction(); userAction.setInput(byTestId("search-input").get(), "congés"); @@ -52,7 +62,9 @@ describe("", () => { expect(getByText("congés payés et maladie")).toBeInTheDocument(); userAction.click(congesSansSolde); + fireEvent.submit(byTestId("search-input").get()); expect(onSearchSubmitHasBeenCalled).toBeTruthy(); + expect(redirectUrl).toEqual("/recherche?q=cong%C3%A9s%20sans%20solde"); expect(emitSuggestionEventMock).toHaveBeenCalledWith( "congés", "congés sans solde", diff --git a/packages/code-du-travail-frontend/src/modules/home/__tests__/__snapshots__/index.test.tsx.snap b/packages/code-du-travail-frontend/src/modules/home/__tests__/__snapshots__/index.test.tsx.snap index 1d75864a6e..330124520d 100644 --- a/packages/code-du-travail-frontend/src/modules/home/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/code-du-travail-frontend/src/modules/home/__tests__/__snapshots__/index.test.tsx.snap @@ -23,10 +23,10 @@ exports[` should match snapshot 1`] = `

- Bienvenue sur -
+ Bienvenue sur + le Code du travail numérique @@ -36,7 +36,7 @@ exports[` should match snapshot 1`] = ` > Obtenez les réponses à vos questions sur le droit du travail.

-
should match snapshot 1`] = ` >
should match snapshot 1`] = ` >
should match snapshot 1`] = ` Voir tous les outils @@ -277,7 +296,7 @@ exports[` should match snapshot 1`] = ` >
should match snapshot 1`] = ` Voir tous les modèles de documents @@ -358,7 +377,7 @@ exports[` should match snapshot 1`] = ` >
should match snapshot 1`] = ` Voir toutes les fiches pratiques @@ -440,7 +459,7 @@ exports[` should match snapshot 1`] = ` >
should match snapshot 1`] = ` Voir toutes les conventions collectives @@ -569,7 +588,7 @@ exports[` should match snapshot 1`] = ` Voir tous les thèmes diff --git a/packages/code-du-travail-frontend/src/modules/layout/header/SearchInput.tsx b/packages/code-du-travail-frontend/src/modules/layout/header/SearchInput.tsx index 3549ffe921..60c3e84bbe 100644 --- a/packages/code-du-travail-frontend/src/modules/layout/header/SearchInput.tsx +++ b/packages/code-du-travail-frontend/src/modules/layout/header/SearchInput.tsx @@ -5,6 +5,11 @@ import { SUGGEST_MAX_RESULTS } from "../../../config"; import { fr } from "@codegouvfr/react-dsfr"; import { css } from "@styled-system/css"; import { useLayoutTracking } from "../tracking"; +import { + autocompleteListContainer, + isHighlighted, + suggestion, +} from "../../common/Autocomplete"; type Props = { id: string; @@ -61,7 +66,7 @@ export const SearchInput = (props: Props) => { />
    {isOpen && @@ -71,7 +76,7 @@ export const SearchInput = (props: Props) => { item, index, className: `${fr.cx("fr-p-3v")} ${suggestion} ${ - highlightedIndex === index && suggestionHover + highlightedIndex === index ? isHighlighted : "" }`, })} key={`${item}${index}`} @@ -83,21 +88,7 @@ export const SearchInput = (props: Props) => { ); }; - const list = css({ - pos: "absolute", top: "2.5rem", - w: "100%", - zIndex: 100, - bg: "var(--background-default-grey)", -}); - -const suggestion = css({ - cursor: "pointer", - color: "var(--text-action-high-blue-france)", textAlign: "left", }); - -const suggestionHover = css({ - bg: "var(--background-default-grey-hover)", -}); diff --git a/packages/code-du-travail-frontend/src/modules/layout/header/__tests__/__snapshots__/HeaderDsfr.test.tsx.snap b/packages/code-du-travail-frontend/src/modules/layout/header/__tests__/__snapshots__/HeaderDsfr.test.tsx.snap index 77a23dce1d..25c9013489 100644 --- a/packages/code-du-travail-frontend/src/modules/layout/header/__tests__/__snapshots__/HeaderDsfr.test.tsx.snap +++ b/packages/code-du-travail-frontend/src/modules/layout/header/__tests__/__snapshots__/HeaderDsfr.test.tsx.snap @@ -119,7 +119,7 @@ exports[`
    should match snapshot 1`] = ` />
      From a53f878a108d7f799ed627657c76100a5f8872dc Mon Sep 17 00:00:00 2001 From: Caroline <4971715+carolineBda@users.noreply.github.com> Date: Tue, 28 Jan 2025 16:54:00 +0100 Subject: [PATCH 2/3] =?UTF-8?q?feat(A=20propos):=20migration=20au=20DSFR?= =?UTF-8?q?=20des=20pages=20A=20propos=20et=20D=C3=A9claration=20d'accessi?= =?UTF-8?q?bilit=C3=A9=20(#6440)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__snapshots__/a-propos.test.tsx.snap | 744 ------------------ .../app/a-propos/page.tsx | 20 + .../app/accessibilite/page.tsx | 20 + .../integration/light/landing-pages.spec.ts | 12 +- .../pages/a-propos.tsx | 153 ---- .../pages/accessibilite.tsx | 327 -------- .../a-propos/__tests__/About.test.tsx} | 6 +- .../__snapshots__/About.test.tsx.snap | 151 ++++ .../src/modules/a-propos/index.tsx | 136 ++++ .../__tests__/Accessibilite.test.tsx | 10 + .../__snapshots__/Accessibilite.test.tsx.snap | 361 +++++++++ .../src/modules/accessibilite/index.tsx | 288 +++++++ .../src/modules/common/Link.tsx | 1 + .../src/modules/config/DefaultLayout.tsx | 6 +- .../src/modules/config/StartDsfrDark.tsx | 16 - .../src/modules/config/StartDsfrSystem.tsx | 16 - .../src/modules/layout/ContainerWidget.tsx | 11 +- .../modules/layout/footer/FooterBottom.tsx | 4 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../modules/privacy-policy/TrackApproval.tsx | 7 +- .../src/modules/privacy-policy/index.tsx | 4 +- .../widgets/WidgetWithIframeResizer.tsx | 9 - 22 files changed, 1011 insertions(+), 1293 deletions(-) delete mode 100644 packages/code-du-travail-frontend/__tests__/__snapshots__/a-propos.test.tsx.snap create mode 100644 packages/code-du-travail-frontend/app/a-propos/page.tsx create mode 100644 packages/code-du-travail-frontend/app/accessibilite/page.tsx delete mode 100644 packages/code-du-travail-frontend/pages/a-propos.tsx delete mode 100644 packages/code-du-travail-frontend/pages/accessibilite.tsx rename packages/code-du-travail-frontend/{__tests__/a-propos.test.tsx => src/modules/a-propos/__tests__/About.test.tsx} (65%) create mode 100644 packages/code-du-travail-frontend/src/modules/a-propos/__tests__/__snapshots__/About.test.tsx.snap create mode 100644 packages/code-du-travail-frontend/src/modules/a-propos/index.tsx create mode 100644 packages/code-du-travail-frontend/src/modules/accessibilite/__tests__/Accessibilite.test.tsx create mode 100644 packages/code-du-travail-frontend/src/modules/accessibilite/__tests__/__snapshots__/Accessibilite.test.tsx.snap create mode 100644 packages/code-du-travail-frontend/src/modules/accessibilite/index.tsx delete mode 100644 packages/code-du-travail-frontend/src/modules/config/StartDsfrDark.tsx delete mode 100644 packages/code-du-travail-frontend/src/modules/config/StartDsfrSystem.tsx diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/a-propos.test.tsx.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/a-propos.test.tsx.snap deleted file mode 100644 index fde24b629d..0000000000 --- a/packages/code-du-travail-frontend/__tests__/__snapshots__/a-propos.test.tsx.snap +++ /dev/null @@ -1,744 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` should render 1`] = ` -
      -
      -
      -
      -
      - le 04/01/2020, 00:00:00 -
      -
      - - République française, site officiel du gouvernement. Liberté, égalité, fraternité - - - - - - - -
      -
      -
      - - - -
      -
      - -
      - -
      -
      -
      -
      -
      -
      -

      - - À propos -

      -

      - Apprenez-en plus sur notre histoire, notre équipe et nos méthodes -

      -
      -
      -
      -

      - - Qu’est-ce que le Code du travail numérique ? -

      -
      -

      - Le Code du travail numérique est un service public en ligne et gratuit vous permettant d’obtenir des réponses personnalisées sur le droit de travail. -

      -

      - L’ouverture officielle du site a eu lieu le 1 - - er - - janvier 2020. -

      -

      - Pourquoi le Code du travail numérique ? -

      -

      - Aujourd’hui, seul un public expert maîtrise la complexité du droit du travail et de ses différentes sources (code du travail, conventions collectives, accords d’entreprises, etc.). La technicité du sujet le rend également peu accessible pour les salariés et les employeurs. Or, le droit est d’autant plus facilement appliqué et respecté qu’il est connu et compris. -

      -

      - La décision de créer le Code du travail numérique a donc été prise et inscrite dans - - - les ordonnances sur le renforcement du dialogue social de 2017. - -

      -

      - À qui ce service s’adresse-t-il ? -

      -

      - Le Code du travail numérique s’adresse à tous les salariés et employeurs de droit privé relevant du code du travail. Les fonctionnaires et les indépendants ne sont par exemple pas concernés. Plus d’informations à ce sujet dans notre - - - page d’introduction au droit du travail. - -

      -

      - Que peut-on trouver sur le site ? -

      -

      - Le Code du travail numérique rassemble différents contenus sur le droit du travail ainsi que des réponses personnalisées selon votre situation. -

      -

      - Plus précisément, vous retrouverez sur le site : -

      -
        -
      • - des réponses génériques sur le droit du travail dans un langage accessible ; -
        • -
      • - des réponses personnalisées selon votre convention collective ; -
        • -
      • - des simulateurs permettant d’estimer des durées de préavis, des montants d’indemnités… ; -
        • -
      • - des modèles de courrier. -
        • -
      -
      -

      - - Qui sommes-nous ? -

      -
      -

      - Notre équipe -

      -

      - Nous sommes une équipe pluridisciplinaire d’une dizaine de personnes composée de développeurs web, designers d’interface et d’expérience, juristes, inspecteurs du travail, spécialistes de la donnée… L’ensemble des agents du ministère du Travail contribue également au produit en rédigeant des contenus et en assurant la validité juridique des réponses. -

      -

      - Le Code du travail numérique est un service public initié par - - - le ministère du Travail - - , conçu et développé au sein de - - - la fabrique des Ministères sociaux - - - en partenariat avec la communauté - - - beta.gouv.fr - - . -

      -

      - Nos méthodes -

      -

      - Le service est développé en lien étroit avec les utilisateurs (employeurs et salariés) et les praticiens du droit du travail (services du ministère du Travail en région, conseillers du salarié, maisons d’accès au droit, professeurs en droit du travail...). -

      -

      - Le site sur lequel vous naviguez est en évolution continue et s’enrichit régulièrement de nouveaux contenus et de nouvelles fonctionnalités. Nous vous invitons à - - - nous contacter - - - si vous souhaitez nous faire part d’une proposition d’amélioration ! -

      -
      -
      -
      -
      -
      - -
      -
      -
      -`; diff --git a/packages/code-du-travail-frontend/app/a-propos/page.tsx b/packages/code-du-travail-frontend/app/a-propos/page.tsx new file mode 100644 index 0000000000..b3b03f2802 --- /dev/null +++ b/packages/code-du-travail-frontend/app/a-propos/page.tsx @@ -0,0 +1,20 @@ +import { DsfrLayout } from "../../src/modules/layout"; +import { generateDefaultMetadata } from "../../src/modules/common/metas"; +import { About } from "../../src/modules/a-propos"; + +export const metadata = generateDefaultMetadata({ + title: "À propos", + description: + "Service public gratuit pour faciliter l'accès au droit du travail. Obtenez une réponse détaillée à vos questions.", + path: "/a-propos", +}); + +function Index() { + return ( + + + + ); +} + +export default Index; diff --git a/packages/code-du-travail-frontend/app/accessibilite/page.tsx b/packages/code-du-travail-frontend/app/accessibilite/page.tsx new file mode 100644 index 0000000000..dcd152c2cf --- /dev/null +++ b/packages/code-du-travail-frontend/app/accessibilite/page.tsx @@ -0,0 +1,20 @@ +import { DsfrLayout } from "../../src/modules/layout"; +import { generateDefaultMetadata } from "../../src/modules/common/metas"; +import { About } from "../../src/modules/a-propos"; +import { Accessibilite } from "../../src/modules/accessibilite"; + +export const metadata = generateDefaultMetadata({ + title: "Déclaration d'accessibilité", + description: "Accessibilité du site du Code du travail numérique", + path: "/accessibilite", +}); + +function Index() { + return ( + + + + ); +} + +export default Index; diff --git a/packages/code-du-travail-frontend/cypress/integration/light/landing-pages.spec.ts b/packages/code-du-travail-frontend/cypress/integration/light/landing-pages.spec.ts index e159bcde3e..9effca3ebe 100644 --- a/packages/code-du-travail-frontend/cypress/integration/light/landing-pages.spec.ts +++ b/packages/code-du-travail-frontend/cypress/integration/light/landing-pages.spec.ts @@ -12,11 +12,21 @@ describe("Landing pages", () => { it("je vois la page à propos", () => { cy.visit("/a-propos"); - + cy.findByRole("heading", { level: 1 }).should("have.text", "À propos"); cy.contains("Qu’est-ce que le Code du travail numérique"); cy.contains("Qui sommes-nous"); }); + it("je vois la page déclaration d'accessibilité", () => { + cy.visit("/accessibilite"); + cy.findByRole("heading", { level: 1 }).should( + "have.text", + "Déclaration d'accessibilité" + ); + cy.contains("État de conformité"); + cy.contains("[75%] des critères du RGAA version 4.1 sont respectés"); + }); + it("je vois la page droit du travail", () => { cy.visit("/droit-du-travail"); diff --git a/packages/code-du-travail-frontend/pages/a-propos.tsx b/packages/code-du-travail-frontend/pages/a-propos.tsx deleted file mode 100644 index 447e7eb580..0000000000 --- a/packages/code-du-travail-frontend/pages/a-propos.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import { - Container, - Heading, - PageTitle, - Section, - theme, - Title, - Wrapper, -} from "@socialgouv/cdtn-ui"; -import Link from "next/link"; -import React from "react"; - -import Metas from "../src/common/Metas"; -import { Layout } from "../src/layout/Layout"; - -const About = () => { - return ( - - -
      - - - À propos - - - - Qu’est-ce que le Code du travail numérique ? - -

      - Le Code du travail numérique est un service public en ligne et - gratuit vous permettant d’obtenir des réponses personnalisées sur - le droit de travail. -

      -

      - L’ouverture officielle du site a eu lieu le 1er janvier - 2020. -

      - Pourquoi le Code du travail numérique ? -

      - Aujourd’hui, seul un public expert maîtrise la complexité du droit - du travail et de ses différentes sources (code du travail, - conventions collectives, accords d’entreprises, etc.). La - technicité du sujet le rend également peu accessible pour les - salariés et les employeurs. Or, le droit est d’autant plus - facilement appliqué et respecté qu’il est connu et compris. -

      -

      - La décision de créer le Code du travail numérique a donc été prise - et inscrite dans{" "} - - les ordonnances sur le renforcement du dialogue social de 2017. - -

      - À qui ce service s’adresse-t-il ? -

      - Le Code du travail numérique s’adresse à tous les salariés et - employeurs de droit privé relevant du code du travail. Les - fonctionnaires et les indépendants ne sont par exemple pas - concernés. Plus d’informations à ce sujet dans notre{" "} - - page d’introduction au droit du travail. - -

      - Que peut-on trouver sur le site ? -

      - Le Code du travail numérique rassemble différents contenus sur le - droit du travail ainsi que des réponses personnalisées selon votre - situation. -

      -

      Plus précisément, vous retrouverez sur le site :

      -
        -
      • - des réponses génériques sur le droit du travail dans un langage - accessible ; -
        • -
      • - des réponses personnalisées selon votre convention - collective ; -
        • -
      • - des simulateurs permettant d’estimer des durées de préavis, des - montants d’indemnités… ; -
        • -
      • des modèles de courrier.
        • -
      - Qui sommes-nous ? - Notre équipe -

      - Nous sommes une équipe pluridisciplinaire d’une dizaine de - personnes composée de développeurs web, designers d’interface et - d’expérience, juristes, inspecteurs du travail, spécialistes de la - donnée… L’ensemble des agents du ministère du Travail contribue - également au produit en rédigeant des contenus et en assurant la - validité juridique des réponses. -

      -

      - Le Code du travail numérique est un service public initié par{" "} - - le ministère du Travail - - , conçu et développé au sein de{" "} - - la fabrique des Ministères sociaux - {" "} - en partenariat avec la communauté{" "} - - beta.gouv.fr - - . -

      - Nos méthodes -

      - Le service est développé en lien étroit avec les utilisateurs - (employeurs et salariés) et les praticiens du droit du travail - (services du ministère du Travail en région, conseillers du - salarié, maisons d’accès au droit, professeurs en droit du - travail...). -

      -

      - Le site sur lequel vous naviguez est en évolution continue et - s’enrichit régulièrement de nouveaux contenus et de nouvelles - fonctionnalités. Nous vous invitons à{" "} - - nous contacter - {" "} - si vous souhaitez nous faire part d’une proposition - d’amélioration ! -

      -       -       -
      -       - ); -}; -export default About; diff --git a/packages/code-du-travail-frontend/pages/accessibilite.tsx b/packages/code-du-travail-frontend/pages/accessibilite.tsx deleted file mode 100644 index bc66b74c44..0000000000 --- a/packages/code-du-travail-frontend/pages/accessibilite.tsx +++ /dev/null @@ -1,327 +0,0 @@ -import { - Container, - PageTitle, - Section, - theme, - Title, - Wrapper, -} from "@socialgouv/cdtn-ui"; -import React from "react"; - -import { A11yLink } from "../src/common/A11yLink"; -import Metas from "../src/common/Metas"; -import { Layout } from "../src/layout/Layout"; - -const Accessibilite = () => { - return ( - - -
      - - Déclaration d'accessibilité - -

      - Le Ministère du travail, de l’emploi et de l’insertion s’engage à - rendre son service accessible conformément à l’article 47 de la - loi n° 2005-102 du 11 février 2005. -

      -

      - À cette fin, il met en œuvre la stratégie et les actions - suivantes : -

        -
      • - La réalisation d’un audit de conformité le 19 mai de l’année - 2021 -
        • -
      • - La réalisation d’un contre-audit d’ici la fin du premier - semestre 2024 -
        • -
      • - La mise en œuvre des recommandations pour maintenir l’objectif - de 75% -
        • -
      -

      -

      - Cette déclaration d’accessibilité s’applique au site Internet - code.travail.gouv.fr. -

      - État de conformité -

      - Le site Internet code.travail.gouv.fr est en conformité partielle - avec le référentiel général d’amélioration de l’accessibilité - (RGAA) « version 4.1 ». -

      -

      - Nous tâchons de rendre dès la conception, ce site accessible à - toutes et à tous. -

      - - Résultat des tests - -

      L’audit de conformité réalisé par Alter Way révèle que :

      -
        -
      • [75%] des critères du RGAA version 4.1 sont respectés
        • -
      - - Non-conformité -
        -
      • - Critère 5.7. Pour chaque tableau de données, la technique - appropriée permettant d’associer chaque cellule avec ses - en-têtes est-elle utilisée (hors cas particuliers) ? -
        • -
      • - Critère 7.1. Chaque script est-il, si nécessaire, compatible - avec les technologies d’assistance ? -
        • -
      • - Critère 7.3. Chaque script est-il contrôlable par le clavier et - par tout dispositif de pointage (hors cas particuliers) ? -
        • -
      • - Critère 7.5. Dans chaque page web, les messages de statut - sont-ils correctement restitués par les technologies - d’assistance ? -
        • -
      • - Critère 11.4. Dans chaque formulaire, chaque étiquette de champ - et son champ associé sont-ils accolés (hors cas - particuliers) ? -
        • -
      • - Critère 11.10. Dans chaque formulaire, le contrôle de saisie - est-il utilisé de manière pertinente (hors cas particuliers) ? -
        • -
      • - Critère 12.6. Les zones de regroupement de contenus présentes - dans plusieurs pages web (zones d’en-tête, de navigation - principale, de contenu principal, de pied de page et de moteur - de recherche) peuvent-elles être atteintes ou évitées ? -
        • -
      • - Critère 12.8. Dans chaque page web, l’ordre de tabulation est-il - cohérent ? -
        • -
      - - Établissement de cette déclaration d’accessibilité - -

      - Cette déclaration a été établie le 12 avril 2021. Elle a été mise - à jour le 20/10/2023. -

      - - Technologies utilisées pour la réalisation du Code du travail - numérique - -
        -
      • HTML5
        • -
      • WAI-ARIA
        • -
      • CSS
        • -
      • JavaScript
        • -
      - - Environnement de test - -

      - Les vérifications de restitution de contenus ont été réalisées sur - la base de la combinaison fournie par la base de référence du RGAA - 4.1, avec les versions suivantes : -

      -
        -
      • Firefox
        • -
      • NVDA
        • -
      - - Outils pour évaluer l’accessibilité - -

      - Les vérifications de restitution de contenus ont été réalisées sur - la base de la combinaison fournie par la base de référence du RGAA - 4.1, avec les versions suivantes : -

      -
        -
      • wave
        • -
      • web developper toolbar
        • -
      • headings maps
        • -
      • wcag color contrast checker
        • -
      • - - Validateur w3c - -
        • -
      - - Pages du site ayant fait l’objet de la vérification de conformité - -
        -
      1. - Page d'accueil :{" "} - - https://code.travail.gouv.fr/ - -
        2. -
      2. - Page mentions légales :{" "} - - https://code.travail.gouv.fr/mentions-legales - -
        3. -
      3. - Page droit du travail :{" "} - - https://code.travail.gouv.fr/droit-du-travail - -
        4. -
      4. - Page boîte à outils :{" "} - - https://code.travail.gouv.fr/outils - -
        5. -
      5. - Page service-public :{" "} - - https://code.travail.gouv.fr/fiche-service-public/arret-maladie-indemnites-journalieres-versees-au-salarie - -
        6. -
      6. - Page information :{" "} - - https://code.travail.gouv.fr/information/covid-19-reagir-en-cas-de-contamination-dans-lentreprise-protocole-national - -
        7. -
      7. - Page statistiques :{" "} - - https://code.travail.gouv.fr/stats - -
        8. -
      8. - Page thème :{" "} - - https://code.travail.gouv.fr/themes/contrat-de-travail - -
        9. -
      9. - Page recherche :{" "} - - https://code.travail.gouv.fr/recherche?q=cong%C3%A9s+pay%C3%A9s - -
        10. -
      10. - Page modèle de courrier :{" "} - - https://code.travail.gouv.fr/modeles-de-courriers/rupture-du-contrat-en-periode-dessai-a-linitiative-du-salarie - -
        11. -
      11. - Page dossier :{" "} - - https://code.travail.gouv.fr/dossiers/ministere-du-travail-notre-dossier-sur-le-coronavirus - -
        12. -
      12. - Page contribution :{" "} - - https://code.travail.gouv.fr/contribution/les-conges-pour-evenements-familiaux - -
        13. -
      13. - Page outil :{" "} - - https://code.travail.gouv.fr/outils/indemnite-licenciement - -
        14. -
      14. - Page glossaire :{" "} - - https://code.travail.gouv.fr/glossaire - -
        15. -
      - Amélioration et contact -

      - Si vous n’arrivez pas à accéder à un contenu ou à un service, vous - pouvez contacter le responsable du site Internet - code.travail.gouv.fr pour être orienté vers une alternative - accessible ou obtenir le contenu sous une autre forme. -

      -

      - E-mail :{" "} - - codedutravailnumerique@travail.gouv.fr - -

      -

      Nous essayons de répondre le plus rapidement possible.

      - Voies de recours -

      Cette procédure est à utiliser dans le cas suivant.

      -

      - Vous avez signalé au responsable du site internet un défaut - d’accessibilité qui vous empêche d’accéder à un contenu ou à un - des services du portail et vous n’avez pas obtenu de réponse - satisfaisante. -

      -

      - Vous pouvez : -

        -
      • - - Écrire un message au Défenseur des droits - -
        • -
      • - - Contacter le délégué du Défenseur des droits dans votre - région - -
        • -
      • - Envoyer un courrier par la poste (gratuit, ne pas mettre de - timbre) :
        - Défenseur des droits
        - Libre réponse 71120
        - 75342 Paris CEDEX 07 -
        • -
      -

      - - En savoir plus sur l’accessibilité - -

      - Pour en savoir plus sur la politique d’accessibilité numérique de - l’État :
      - - https://accessibilite.numerique.gouv.fr - -

      -       -       -
      -       - ); -}; -export default Accessibilite; diff --git a/packages/code-du-travail-frontend/__tests__/a-propos.test.tsx b/packages/code-du-travail-frontend/src/modules/a-propos/__tests__/About.test.tsx similarity index 65% rename from packages/code-du-travail-frontend/__tests__/a-propos.test.tsx rename to packages/code-du-travail-frontend/src/modules/a-propos/__tests__/About.test.tsx index 21dcc338ca..e8d1222ab5 100644 --- a/packages/code-du-travail-frontend/__tests__/a-propos.test.tsx +++ b/packages/code-du-travail-frontend/src/modules/a-propos/__tests__/About.test.tsx @@ -1,9 +1,9 @@ import { render } from "@testing-library/react"; - -import About from "../pages/a-propos"; +import React from "react"; +import { About } from ".."; describe("", () => { - it("should render", () => { + it("should match snapshot", () => { const { container } = render(); expect(container).toMatchSnapshot(); }); diff --git a/packages/code-du-travail-frontend/src/modules/a-propos/__tests__/__snapshots__/About.test.tsx.snap b/packages/code-du-travail-frontend/src/modules/a-propos/__tests__/__snapshots__/About.test.tsx.snap new file mode 100644 index 0000000000..b1b5da2b00 --- /dev/null +++ b/packages/code-du-travail-frontend/src/modules/a-propos/__tests__/__snapshots__/About.test.tsx.snap @@ -0,0 +1,151 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should match snapshot 1`] = ` +
      +
      +
      +

      + À propos +

      +

      + Apprenez-en plus sur notre histoire, notre équipe et nos méthodes +

      +

      + Qu’est-ce que le Code du travail numérique ? +

      +

      + Le Code du travail numérique est un service public en ligne et gratuit vous permettant d’obtenir des réponses personnalisées sur le droit de travail. +

      +

      + L’ouverture officielle du site a eu lieu le 1 + + er + + janvier 2020. +

      +

      + Pourquoi le Code du travail numérique ? +

      +

      + Aujourd’hui, seul un public expert maîtrise la complexité du droit du travail et de ses différentes sources (code du travail, conventions collectives, accords d’entreprises, etc.). La technicité du sujet le rend également peu accessible pour les salariés et les employeurs. Or, le droit est d’autant plus facilement appliqué et respecté qu’il est connu et compris. +

      +

      + La décision de créer le Code du travail numérique a donc été prise et inscrite dans + + + les ordonnances sur le renforcement du dialogue social de 2017. + +

      +

      + À qui ce service s’adresse-t-il ? +

      +

      + Le Code du travail numérique s’adresse à tous les salariés et employeurs de droit privé relevant du code du travail. Les fonctionnaires et les indépendants ne sont par exemple pas concernés. Plus d’informations à ce sujet dans notre + + + page d’introduction au droit du travail. + +

      +

      + Que peut-on trouver sur le site ? +

      +

      + Le Code du travail numérique rassemble différents contenus sur le droit du travail ainsi que des réponses personnalisées selon votre situation. +

      +

      + Plus précisément, vous retrouverez sur le site : +

      +
        +
      • + des réponses génériques sur le droit du travail dans un langage accessible ; +
        • +
      • + des réponses personnalisées selon votre convention collective ; +
        • +
      • + des simulateurs permettant d’estimer des durées de préavis, des montants d’indemnités… ; +
        • +
      • + des modèles de courrier. +
        • +
      +

      + Qui sommes-nous ? +

      +

      + Notre équipe +

      +

      + Nous sommes une équipe pluridisciplinaire d’une dizaine de personnes composée de développeurs web, designers d’interface et d’expérience, juristes, inspecteurs du travail, spécialistes de la donnée… L’ensemble des agents du ministère du Travail contribue également au produit en rédigeant des contenus et en assurant la validité juridique des réponses. +

      +

      + Le Code du travail numérique est un service public initié par + + + le ministère du Travail + + , conçu et développé au sein de + + + la fabrique des Ministères sociaux + + + en partenariat avec la communauté + + + beta.gouv.fr + + . +

      +

      + Nos méthodes +

      +

      + Le service est développé en lien étroit avec les utilisateurs (employeurs et salariés) et les praticiens du droit du travail (services du ministère du Travail en région, conseillers du salarié, maisons d’accès au droit, professeurs en droit du travail...). +

      +

      + Le site sur lequel vous naviguez est en évolution continue et s’enrichit régulièrement de nouveaux contenus et de nouvelles fonctionnalités. Nous vous invitons à + + + nous contacter + + + si vous souhaitez nous faire part d’une proposition d’amélioration ! +

      +
      +
      +
      +`; diff --git a/packages/code-du-travail-frontend/src/modules/a-propos/index.tsx b/packages/code-du-travail-frontend/src/modules/a-propos/index.tsx new file mode 100644 index 0000000000..cc33fec4d5 --- /dev/null +++ b/packages/code-du-travail-frontend/src/modules/a-propos/index.tsx @@ -0,0 +1,136 @@ +import { Container } from "../layout/Container"; +import Link from "../common/Link"; +import { fr } from "@codegouvfr/react-dsfr"; + +export const About = () => { + return ( + +

      À propos

      +

      + Apprenez-en plus sur notre histoire, notre équipe et nos méthodes +

      + +

      Qu’est-ce que le Code du travail numérique ?

      +

      + Le Code du travail numérique est un service public en ligne et gratuit + vous permettant d’obtenir des réponses personnalisées sur le droit de + travail. +

      +

      + L’ouverture officielle du site a eu lieu le 1er janvier 2020. +

      +

      Pourquoi le Code du travail numérique ?

      +

      + Aujourd’hui, seul un public expert maîtrise la complexité du droit du + travail et de ses différentes sources (code du travail, conventions + collectives, accords d’entreprises, etc.). La technicité du sujet le + rend également peu accessible pour les salariés et les employeurs. Or, + le droit est d’autant plus facilement appliqué et respecté qu’il est + connu et compris. +

      +

      + La décision de créer le Code du travail numérique a donc été prise et + inscrite dans{" "} + + les ordonnances sur le renforcement du dialogue social de 2017. + +

      +

      À qui ce service s’adresse-t-il ?

      +

      + Le Code du travail numérique s’adresse à tous les salariés et employeurs + de droit privé relevant du code du travail. Les fonctionnaires et les + indépendants ne sont par exemple pas concernés. Plus d’informations à ce + sujet dans notre{" "} + + page d’introduction au droit du travail. + +

      +

      Que peut-on trouver sur le site ?

      +

      + Le Code du travail numérique rassemble différents contenus sur le droit + du travail ainsi que des réponses personnalisées selon votre situation. +

      +

      Plus précisément, vous retrouverez sur le site :

      +
        +
      • + des réponses génériques sur le droit du travail dans un langage + accessible ; +
        • +
      • + des réponses personnalisées selon votre convention collective ; +
        • +
      • + des simulateurs permettant d’estimer des durées de préavis, des + montants d’indemnités… ; +
        • +
      • des modèles de courrier.
        • +
      +

      Qui sommes-nous ?

      +

      Notre équipe

      +

      + Nous sommes une équipe pluridisciplinaire d’une dizaine de personnes + composée de développeurs web, designers d’interface et d’expérience, + juristes, inspecteurs du travail, spécialistes de la donnée… L’ensemble + des agents du ministère du Travail contribue également au produit en + rédigeant des contenus et en assurant la validité juridique des + réponses. +

      +

      + Le Code du travail numérique est un service public initié par{" "} + + le ministère du Travail + + , conçu et développé au sein de{" "} + + la fabrique des Ministères sociaux + {" "} + en partenariat avec la communauté{" "} + + beta.gouv.fr + + . +

      +

      Nos méthodes

      +

      + Le service est développé en lien étroit avec les utilisateurs + (employeurs et salariés) et les praticiens du droit du travail (services + du ministère du Travail en région, conseillers du salarié, maisons + d’accès au droit, professeurs en droit du travail...). +

      +

      + Le site sur lequel vous naviguez est en évolution continue et s’enrichit + régulièrement de nouveaux contenus et de nouvelles fonctionnalités. Nous + vous invitons à{" "} + + nous contacter + {" "} + si vous souhaitez nous faire part d’une proposition + d’amélioration ! +

      +       + ); +}; diff --git a/packages/code-du-travail-frontend/src/modules/accessibilite/__tests__/Accessibilite.test.tsx b/packages/code-du-travail-frontend/src/modules/accessibilite/__tests__/Accessibilite.test.tsx new file mode 100644 index 0000000000..ab853bc71e --- /dev/null +++ b/packages/code-du-travail-frontend/src/modules/accessibilite/__tests__/Accessibilite.test.tsx @@ -0,0 +1,10 @@ +import { render } from "@testing-library/react"; +import React from "react"; +import { Accessibilite } from ".."; + +describe("", () => { + it("should match snapshot", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/code-du-travail-frontend/src/modules/accessibilite/__tests__/__snapshots__/Accessibilite.test.tsx.snap b/packages/code-du-travail-frontend/src/modules/accessibilite/__tests__/__snapshots__/Accessibilite.test.tsx.snap new file mode 100644 index 0000000000..742e1f0097 --- /dev/null +++ b/packages/code-du-travail-frontend/src/modules/accessibilite/__tests__/__snapshots__/Accessibilite.test.tsx.snap @@ -0,0 +1,361 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should match snapshot 1`] = ` +
      +
      +
      +

      + Déclaration d'accessibilité +

      +

      + Le Ministère du travail, de l’emploi et de l’insertion s’engage à rendre son service accessible conformément à l’article 47 de la loi n° 2005-102 du 11 février 2005. +

      +

      + À cette fin, il met en œuvre la stratégie et les actions suivantes : +

        +
      • + La réalisation d’un audit de conformité le 19 mai de l’année 2021 +
        • +
      • + La réalisation d’un contre-audit d’ici la fin du premier semestre 2024 +
        • +
      • + La mise en œuvre des recommandations pour maintenir l’objectif de 75% +
        • +
      +

      +

      + Cette déclaration d’accessibilité s’applique au site Internet code.travail.gouv.fr. +

      +

      + État de conformité +

      +

      + Le site Internet code.travail.gouv.fr est en conformité partielle avec le référentiel général d’amélioration de l’accessibilité (RGAA) « version 4.1 ». +

      +

      + Nous tâchons de rendre dès la conception, ce site accessible à toutes et à tous. +

      +

      + Résultat des tests +

      +

      + L’audit de conformité réalisé par Alter Way révèle que : +

      +
        +
      • + [75%] des critères du RGAA version 4.1 sont respectés +
        • +
      +

      + Non-conformité +

      +
        +
      • + Critère 5.7. Pour chaque tableau de données, la technique appropriée permettant d’associer chaque cellule avec ses en-têtes est-elle utilisée (hors cas particuliers) ? +
        • +
      • + Critère 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ? +
        • +
      • + Critère 7.3. Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ? +
        • +
      • + Critère 7.5. Dans chaque page web, les messages de statut sont-ils correctement restitués par les technologies d’assistance ? +
        • +
      • + Critère 11.4. Dans chaque formulaire, chaque étiquette de champ et son champ associé sont-ils accolés (hors cas particuliers) ? +
        • +
      • + Critère 11.10. Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente (hors cas particuliers) ? +
        • +
      • + Critère 12.6. Les zones de regroupement de contenus présentes dans plusieurs pages web (zones d’en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche) peuvent-elles être atteintes ou évitées ? +
        • +
      • + Critère 12.8. Dans chaque page web, l’ordre de tabulation est-il cohérent ? +
        • +
      +

      + Établissement de cette déclaration d’accessibilité +

      +

      + Cette déclaration a été établie le 12 avril 2021. Elle a été mise à jour le 20/10/2023. +

      +

      + Technologies utilisées pour la réalisation du Code du travail numérique +

      +
        +
      • + HTML5 +
        • +
      • + WAI-ARIA +
        • +
      • + CSS +
        • +
      • + JavaScript +
        • +
      +

      + Environnement de test +

      +

      + Les vérifications de restitution de contenus ont été réalisées sur la base de la combinaison fournie par la base de référence du RGAA 4.1, avec les versions suivantes : +

      +
        +
      • + Firefox +
        • +
      • + NVDA +
        • +
      +

      + Outils pour évaluer l’accessibilité +

      +

      + Les vérifications de restitution de contenus ont été réalisées sur la base de la combinaison fournie par la base de référence du RGAA 4.1, avec les versions suivantes : +

      +
        +
      • + wave +
        • +
      • + web developper toolbar +
        • +
      • + headings maps +
        • +
      • + wcag color contrast checker +
        • +
      • + + Validateur w3c + +
        • +
      +

      + Pages du site ayant fait l’objet de la vérification de conformité +

      +
        +
      1. + Page d'accueil : + + + https://code.travail.gouv.fr/ + +
        2. +
      2. + Page mentions légales : + + + https://code.travail.gouv.fr/mentions-legales + +
        3. +
      3. + Page droit du travail : + + + https://code.travail.gouv.fr/droit-du-travail + +
        4. +
      4. + Page boîte à outils : + + + https://code.travail.gouv.fr/outils + +
        5. +
      5. + Page service-public : + + + https://code.travail.gouv.fr/fiche-service-public/arret-maladie-indemnites-journalieres-versees-au-salarie + +
        6. +
      6. + Page information : + + + https://code.travail.gouv.fr/information/covid-19-reagir-en-cas-de-contamination-dans-lentreprise-protocole-national + +
        7. +
      7. + Page statistiques : + + + https://code.travail.gouv.fr/stats + +
        8. +
      8. + Page thème : + + + https://code.travail.gouv.fr/themes/contrat-de-travail + +
        9. +
      9. + Page recherche : + + + https://code.travail.gouv.fr/recherche?q=cong%C3%A9s+pay%C3%A9s + +
        10. +
      10. + Page modèle de courrier : + + + https://code.travail.gouv.fr/modeles-de-courriers/rupture-du-contrat-en-periode-dessai-a-linitiative-du-salarie + +
        11. +
      11. + Page dossier : + + + https://code.travail.gouv.fr/dossiers/ministere-du-travail-notre-dossier-sur-le-coronavirus + +
        12. +
      12. + Page contribution : + + + https://code.travail.gouv.fr/contribution/les-conges-pour-evenements-familiaux + +
        13. +
      13. + Page outil : + + + https://code.travail.gouv.fr/outils/indemnite-licenciement + +
        14. +
      14. + Page glossaire : + + + https://code.travail.gouv.fr/glossaire + +
        15. +
      +

      + Amélioration et contact +

      +

      + Si vous n’arrivez pas à accéder à un contenu ou à un service, vous pouvez contacter le responsable du site Internet code.travail.gouv.fr pour être orienté vers une alternative accessible ou obtenir le contenu sous une autre forme. +

      +

      + E-mail : + + + codedutravailnumerique@travail.gouv.fr + +

      +

      + Nous essayons de répondre le plus rapidement possible. +

      +

      + Voies de recours +

      +

      + Cette procédure est à utiliser dans le cas suivant. +

      +

      + Vous avez signalé au responsable du site internet un défaut d’accessibilité qui vous empêche d’accéder à un contenu ou à un des services du portail et vous n’avez pas obtenu de réponse satisfaisante. +

      +

      + Vous pouvez : +

      +

      +

      + En savoir plus sur l’accessibilité +

      +

      + Pour en savoir plus sur la politique d’accessibilité numérique de l’État : +
      + + https://accessibilite.numerique.gouv.fr + +

      +
      +
      +
      +`; diff --git a/packages/code-du-travail-frontend/src/modules/accessibilite/index.tsx b/packages/code-du-travail-frontend/src/modules/accessibilite/index.tsx new file mode 100644 index 0000000000..8b3851ac58 --- /dev/null +++ b/packages/code-du-travail-frontend/src/modules/accessibilite/index.tsx @@ -0,0 +1,288 @@ +import { Container } from "../layout/Container"; +import Link from "../common/Link"; + +export const Accessibilite = () => { + return ( + +

      Déclaration d'accessibilité

      +

      + Le Ministère du travail, de l’emploi et de l’insertion s’engage à rendre + son service accessible conformément à l’article 47 de la loi n° 2005-102 + du 11 février 2005. +

      +

      + À cette fin, il met en œuvre la stratégie et les actions + suivantes : +

        +
      • + La réalisation d’un audit de conformité le 19 mai de l’année 2021 +
        • +
      • + La réalisation d’un contre-audit d’ici la fin du premier semestre + 2024 +
        • +
      • + La mise en œuvre des recommandations pour maintenir l’objectif de + 75% +
        • +
      +

      +

      + Cette déclaration d’accessibilité s’applique au site Internet + code.travail.gouv.fr. +

      +

      État de conformité

      +

      + Le site Internet code.travail.gouv.fr est en conformité partielle avec + le référentiel général d’amélioration de l’accessibilité (RGAA) « + version 4.1 ». +

      +

      + Nous tâchons de rendre dès la conception, ce site accessible à toutes et + à tous. +

      +

      Résultat des tests

      +

      L’audit de conformité réalisé par Alter Way révèle que :

      +
        +
      • [75%] des critères du RGAA version 4.1 sont respectés
        • +
      + +

      Non-conformité

      +
        +
      • + Critère 5.7. Pour chaque tableau de données, la technique appropriée + permettant d’associer chaque cellule avec ses en-têtes est-elle + utilisée (hors cas particuliers) ? +
        • +
      • + Critère 7.1. Chaque script est-il, si nécessaire, compatible avec les + technologies d’assistance ? +
        • +
      • + Critère 7.3. Chaque script est-il contrôlable par le clavier et par + tout dispositif de pointage (hors cas particuliers) ? +
        • +
      • + Critère 7.5. Dans chaque page web, les messages de statut sont-ils + correctement restitués par les technologies d’assistance ? +
        • +
      • + Critère 11.4. Dans chaque formulaire, chaque étiquette de champ et son + champ associé sont-ils accolés (hors cas particuliers) ? +
        • +
      • + Critère 11.10. Dans chaque formulaire, le contrôle de saisie est-il + utilisé de manière pertinente (hors cas particuliers) ? +
        • +
      • + Critère 12.6. Les zones de regroupement de contenus présentes dans + plusieurs pages web (zones d’en-tête, de navigation principale, de + contenu principal, de pied de page et de moteur de recherche) + peuvent-elles être atteintes ou évitées ? +
        • +
      • + Critère 12.8. Dans chaque page web, l’ordre de tabulation est-il + cohérent ? +
        • +
      +

      Établissement de cette déclaration d’accessibilité

      +

      + Cette déclaration a été établie le 12 avril 2021. Elle a été mise à jour + le 20/10/2023. +

      +

      + Technologies utilisées pour la réalisation du Code du travail numérique +

      +
        +
      • HTML5
        • +
      • WAI-ARIA
        • +
      • CSS
        • +
      • JavaScript
        • +
      +

      Environnement de test

      +

      + Les vérifications de restitution de contenus ont été réalisées sur la + base de la combinaison fournie par la base de référence du RGAA 4.1, + avec les versions suivantes : +

      +
        +
      • Firefox
        • +
      • NVDA
        • +
      +

      Outils pour évaluer l’accessibilité

      +

      + Les vérifications de restitution de contenus ont été réalisées sur la + base de la combinaison fournie par la base de référence du RGAA 4.1, + avec les versions suivantes : +

      +
        +
      • wave
        • +
      • web developper toolbar
        • +
      • headings maps
        • +
      • wcag color contrast checker
        • +
      • + + Validateur w3c + +
        • +
      +

      Pages du site ayant fait l’objet de la vérification de conformité

      +
        +
      1. + Page d'accueil :{" "} + + https://code.travail.gouv.fr/ + +
        2. +
      2. + Page mentions légales :{" "} + + https://code.travail.gouv.fr/mentions-legales + +
        3. +
      3. + Page droit du travail :{" "} + + https://code.travail.gouv.fr/droit-du-travail + +
        4. +
      4. + Page boîte à outils :{" "} + + https://code.travail.gouv.fr/outils + +
        5. +
      5. + Page service-public :{" "} + + https://code.travail.gouv.fr/fiche-service-public/arret-maladie-indemnites-journalieres-versees-au-salarie + +
        6. +
      6. + Page information :{" "} + + https://code.travail.gouv.fr/information/covid-19-reagir-en-cas-de-contamination-dans-lentreprise-protocole-national + +
        7. +
      7. + Page statistiques :{" "} + + https://code.travail.gouv.fr/stats + +
        8. +
      8. + Page thème :{" "} + + https://code.travail.gouv.fr/themes/contrat-de-travail + +
        9. +
      9. + Page recherche :{" "} + + https://code.travail.gouv.fr/recherche?q=cong%C3%A9s+pay%C3%A9s + +
        10. +
      10. + Page modèle de courrier :{" "} + + https://code.travail.gouv.fr/modeles-de-courriers/rupture-du-contrat-en-periode-dessai-a-linitiative-du-salarie + +
        11. +
      11. + Page dossier :{" "} + + https://code.travail.gouv.fr/dossiers/ministere-du-travail-notre-dossier-sur-le-coronavirus + +
        12. +
      12. + Page contribution :{" "} + + https://code.travail.gouv.fr/contribution/les-conges-pour-evenements-familiaux + +
        13. +
      13. + Page outil :{" "} + + https://code.travail.gouv.fr/outils/indemnite-licenciement + +
        14. +
      14. + Page glossaire :{" "} + + https://code.travail.gouv.fr/glossaire + +
        15. +
      +

      Amélioration et contact

      +

      + Si vous n’arrivez pas à accéder à un contenu ou à un service, vous + pouvez contacter le responsable du site Internet code.travail.gouv.fr + pour être orienté vers une alternative accessible ou obtenir le contenu + sous une autre forme. +

      +

      + E-mail :{" "} + + codedutravailnumerique@travail.gouv.fr + +

      +

      Nous essayons de répondre le plus rapidement possible.

      +

      Voies de recours

      +

      Cette procédure est à utiliser dans le cas suivant.

      +

      + Vous avez signalé au responsable du site internet un défaut + d’accessibilité qui vous empêche d’accéder à un contenu ou à un des + services du portail et vous n’avez pas obtenu de réponse satisfaisante. +

      +

      + Vous pouvez : +

        +
      • + + Écrire un message au Défenseur des droits + +
        • +
      • + + Contacter le délégué du Défenseur des droits dans votre région + +
        • +
      • + Envoyer un courrier par la poste (gratuit, ne pas mettre de + timbre) :
        + Défenseur des droits
        + Libre réponse 71120
        + 75342 Paris CEDEX 07 +
        • +
      +

      +

      En savoir plus sur l’accessibilité

      +

      + Pour en savoir plus sur la politique d’accessibilité numérique de + l’État :
      + + https://accessibilite.numerique.gouv.fr + +

      +       + ); +}; diff --git a/packages/code-du-travail-frontend/src/modules/common/Link.tsx b/packages/code-du-travail-frontend/src/modules/common/Link.tsx index 63fa3abfcd..b59a6c0a4b 100644 --- a/packages/code-du-travail-frontend/src/modules/common/Link.tsx +++ b/packages/code-du-travail-frontend/src/modules/common/Link.tsx @@ -14,6 +14,7 @@ const Link = ({ ...props }: Props): JSX.Element => { if (props.target === "_blank" && props.children) { props.title = `${props.title || props.children.toString()} - nouvelle fenêtre`; } + return ; }; diff --git a/packages/code-du-travail-frontend/src/modules/config/DefaultLayout.tsx b/packages/code-du-travail-frontend/src/modules/config/DefaultLayout.tsx index eafafa9a36..3c96d98aa9 100644 --- a/packages/code-du-travail-frontend/src/modules/config/DefaultLayout.tsx +++ b/packages/code-du-travail-frontend/src/modules/config/DefaultLayout.tsx @@ -4,9 +4,7 @@ import { getHtmlAttributes } from "@codegouvfr/react-dsfr/next-appdir/getHtmlAtt import Link from "../common/Link"; import { MatomoAnalytics } from "./MatomoAnalytics"; import { DefaultColorScheme } from "@codegouvfr/react-dsfr/next-appdir"; -import { StartDsfrSystem } from "./StartDsfrSystem"; import { StartDsfrLight } from "./StartDsfrLight"; -import { StartDsfrDark } from "./StartDsfrDark"; type Props = { children: React.ReactNode; @@ -23,9 +21,7 @@ export default function DefaultLayout({ return ( - {defaultColorScheme === "light" && } - {defaultColorScheme === "dark" && } - {defaultColorScheme === "system" && } + { - const { setIsDark } = useIsDark(); - - useEffect(() => { - setIsDark(false); - }, []); - useIframeResizer(); return ( <> diff --git a/packages/code-du-travail-frontend/src/modules/layout/footer/FooterBottom.tsx b/packages/code-du-travail-frontend/src/modules/layout/footer/FooterBottom.tsx index 80a37f613d..c62d88a203 100644 --- a/packages/code-du-travail-frontend/src/modules/layout/footer/FooterBottom.tsx +++ b/packages/code-du-travail-frontend/src/modules/layout/footer/FooterBottom.tsx @@ -7,9 +7,9 @@ export const FooterBottom = () => (
      • - + Accessibilité : partiellement conforme - +
      • diff --git a/packages/code-du-travail-frontend/src/modules/layout/footer/__tests__/__snapshots__/index.test.tsx.snap b/packages/code-du-travail-frontend/src/modules/layout/footer/__tests__/__snapshots__/index.test.tsx.snap index 31bf911c0d..67e6a0e0ec 100644 --- a/packages/code-du-travail-frontend/src/modules/layout/footer/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/code-du-travail-frontend/src/modules/layout/footer/__tests__/__snapshots__/index.test.tsx.snap @@ -363,7 +363,7 @@ exports[`