Better link managment

garronej · garronej · commit 941f5241e4b6 · 2022-12-11T18:51:23.000+01:00
diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
@@ -142,6 +142,15 @@ export const Header = memo(
                                             );
                                         })()}
                                     </div>
+                                    {/*
+                                    <div class="fr-header__operator">
+                                        <a href="/" title="Accueil - [À MODIFIER - texte alternatif de l’image : nom de l'opérateur ou du site serviciel] - République Française">
+                                            <img class="fr-responsive-img" style="width:3.5rem;" src="../../../example/img/placeholder.9x16.png" alt="[À MODIFIER - texte alternatif de l’image]" />
+                                            <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
+                                        </a>
+                                    </div>
+                                    */}
+
                                     {(quickAccessItems.length > 0 ||
                                         renderSearchInput !== undefined) && (
                                         <div
diff --git a/src/lib/routing.tsx b/src/lib/routing.tsx
@@ -3,12 +3,8 @@ import type { ReactNode } from "react";
 
 import type { DetailedHTMLProps, AnchorHTMLAttributes } from "react";
 
-interface AriaEnabled {
-    [key: `aria-${string}`]: string | boolean;
-}
-
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface LinkProps extends AriaEnabled {
+export interface LinkProps extends React.AriaAttributes {
     className?: string;
     children?: ReactNode;
 }
@@ -18,7 +14,8 @@ export type HTMLAnchorProps = DetailedHTMLProps<
     HTMLAnchorElement
 >;
 
-const context = createContext<CreateLinkProviderPrams["Link"]>(props => <a {...props} />);
+//NOTE: Here we have use as any because the module augmentation that we define in ../next applies unfortunately.
+const context = createContext<CreateLinkProviderPrams["Link"]>(props => <a {...(props as any)} />);
 
 type CreateLinkProviderPrams = {
     Link: (props: LinkProps) => ReturnType<React.FC>;
diff --git a/src/next.tsx b/src/next.tsx
@@ -34,6 +34,8 @@ import DefaultDocument from "next/document";
 import { getAssetUrl } from "./lib/tools/getAssetUrl";
 import { setLangToUseIfProviderNotUsed } from "./lib/i18n";
 import { getColors } from "./lib/colors";
+import { createDsfrLinkProvider } from "./lib/routing";
+import Link from "next/link";
 import "./dsfr/dsfr.css";
 import "./dsfr/utility/icons/icons.css";
 
@@ -50,6 +52,15 @@ const fontUrlByFileBasename = {
     "Spectral-ExtraBold": spectralExtraBoldWoff2Url
 } as const;
 
+type InferLinkProps<Link> = Link extends React.ForwardRefExoticComponent<infer Props>
+    ? Props
+    : never;
+
+declare module "./lib/routing" {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface LinkProps extends InferLinkProps<typeof Link> {}
+}
+
 export type Params = Params.WithDarkModeCookie | Params.WithoutDarkModeCookie;
 export namespace Params {
     export type Common = StartDsfrReactParams & {
@@ -135,6 +146,8 @@ export function createNextDsfrIntegrationApi(params: Params): NextDsfrIntegratio
         }
     }
 
+    const { DsfrLinkProvider } = createDsfrLinkProvider({ Link });
+
     const isDarkPropKey = "dsfrIsDark";
 
     function withDsfr<AppComponent extends NextComponentType<any, any, any>>(
@@ -155,7 +168,7 @@ export function createNextDsfrIntegrationApi(params: Params): NextDsfrIntegratio
             }, []);
 
             return (
-                <>
+                <DsfrLinkProvider>
                     <Head>
                         {process.env.NODE_ENV !== "development" &&
                             objectKeys(fontUrlByFileBasename)
@@ -197,7 +210,7 @@ export function createNextDsfrIntegrationApi(params: Params): NextDsfrIntegratio
                             <App {...(props as any)} />
                         </SsrIsDarkProvider>
                     )}
-                </>
+                </DsfrLinkProvider>
             );
         }
 
diff --git a/test/integration/next/pages/_app.tsx b/test/integration/next/pages/_app.tsx
@@ -6,13 +6,6 @@ import { Header } from "@codegouvfr/react-dsfr/Header";
 import { createEmotionSsrAdvancedApproach } from "tss-react/next";
 import { useStyles } from "tss-react/dsfr";
 import { fr } from "@codegouvfr/react-dsfr";
-import type { LinkProps as NextLinkProps } from "next/link";
-
-declare module "@codegouvfr/react-dsfr" {
-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
-    export interface LinkProps extends NextLinkProps { }
-
-}
 
 const {
     withDsfr,
