From d9fac12c7aeba54297da039f684876cee491acf1 Mon Sep 17 00:00:00 2001 From: kevbarns Date: Mon, 31 Aug 2026 11:17:30 +0200 Subject: [PATCH 1/2] feat(BackToTop): add the BackToTop component Picks up the work started in #139 by @sylvainlg, who confirmed it could be taken over, and addresses the review left open there. The default is the DSFR canonical form: an `` carrying `fr-link`, the `arrow-up-fill` icon on the left and the "Haut de page" label. The anchor is what moves the navigation focus back to the top of the page, not just the scroll, so it stays the default rather than a scripted scroll. For pages that cannot set `id="top"` on their topmost element, `targetRef` renders a ` + )} + + ); + }) +); + +function scrollBackTo(element: HTMLElement | null) { + if (element === null) { + return; + } + + // An anchor gets the focus move for free from the browser, a scripted scroll does + // not: without this, keyboard and screen reader users stay where they were while the + // viewport jumps. An element that isn't already reachable has to be made + // programmatically focusable first. + if (element.tabIndex < 0) { + element.tabIndex = -1; + } + + element.focus({ "preventScroll": true }); + + element.scrollIntoView({ + "behavior": window.matchMedia("(prefers-reduced-motion: reduce)").matches + ? "auto" + : "smooth", + "block": "start" + }); +} + +BackToTop.displayName = symToStr({ BackToTop }); + +const { useTranslation, addBackToTopTranslations } = createComponentI18nApi({ + "componentName": symToStr({ BackToTop }), + "frMessages": { + /* spell-checker: disable */ + "back to top": "Haut de page" + /* spell-checker: enable */ + } +}); + +addBackToTopTranslations({ + "lang": "en", + "messages": { + "back to top": "Back to top" + } +}); +addBackToTopTranslations({ + "lang": "es", + "messages": { + "back to top": "Volver arriba" + } +}); +addBackToTopTranslations({ + "lang": "de", + "messages": { + "back to top": "Zum Seitenanfang" + } +}); + +export { addBackToTopTranslations }; + +export default BackToTop; diff --git a/src/bin/only-include-css-of-used-components.ts b/src/bin/only-include-css-of-used-components.ts index 00773b1a4..f113324a9 100644 --- a/src/bin/only-include-css-of-used-components.ts +++ b/src/bin/only-include-css-of-used-components.ts @@ -125,6 +125,7 @@ export const REACT_DSFR_MODULE_TO_DSFR_COMPONENTS: Record +\`\`\` + +When no \`id\` can be set on the top of the page, pass a \`targetRef\` instead. A +\`