Merge pull request #244 from cnumr/cms

chore: sync avec origin/main

Author: hrenaud

.changeset/fix-card-accessibility-button-tooltip.md

@@ -0,0 +1,10 @@
+---
+'gen-referentiel-core': patch
+---
+
+fix: améliore l'accessibilité des cards et corrige le tooltip du bouton info
+
+- Déplace le lien de la card entière vers le titre uniquement (card-view.tsx) pour respecter les bonnes pratiques a11y (un lien ne doit pas englober toute une card interactive)
+- Ajoute un overlay invisible (`aria-hidden`, `tabIndex=-1`) pour maintenir la surface de clic sur toute la card
+- Déplace le lien sur le titre dans FicheCard (Card.tsx) avec `z-10` pour rester au-dessus de l'overlay
+- Corrige l'affichage du tooltip natif du bouton (i) en ajoutant `pointer-events-none` sur le SVG enfant, permettant au navigateur de cibler le `<button>` et d'afficher son attribut `title`

.changeset/sync-cms.md

@@ -30,21 +30,35 @@ const CardView: FunctionComponent<CardViewProps> = ({
     layoutClass = 'h-full flex-col divide-y-2 divide-primary';
   }
 
+  const href = `${type === CardType.FICHES ? 'fiches/' : ''}${entry.node._sys.filename}`;
+
   return (
-    <li className="tohide box interactive border-neutral-transparent py-2 transition-all md:py-6">
+    <li className="tohide box interactive relative border-neutral-transparent py-2 transition-all md:py-6">
+      {/* Overlay pour étendre la surface de clic à toute la carte — aria-hidden et tabIndex=-1 pour l'a11y */}
       <Link
-        href={`${type === CardType.FICHES && 'fiches/'}${entry.node._sys.filename}`}
-        className={`flex no-underline h-full ${layoutClass}`}
-        title={`Voir la fiche : ${entry.node.title}`}>
+        href={href}
+        className="absolute inset-0 z-0"
+        aria-hidden="true"
+        tabIndex={-1}
+      />
+      <div className={`flex h-full ${layoutClass}`}>
         {type === CardType.FICHES ? (
           <FicheCard
             item={entry}
             lang={lang}
+            href={href}
           />
         ) : (
-          <h3 className="mt-0">{entry.node.title}</h3>
+          <h3 className="mt-0">
+            <Link
+              href={href}
+              className="relative z-10 no-underline"
+              title={`Voir la fiche : ${entry.node.title}`}>
+              {entry.node.title}
+            </Link>
+          </h3>
         )}
-      </Link>
+      </div>
     </li>
   );
 };

components/card-view.tsx

@@ -10,12 +10,14 @@ import {
 import { isStringInUi, useTranslations } from '../../../i18n/utils';
 
 import { FunctionComponent } from 'react';
+import Link from 'next/link';
 import { slugify } from '../../../src/js/utils';
 import { ui } from '../../../i18n/ui';
 
 interface FicheCardProps {
   item: FichesConnectionEdges;
   lang?: keyof typeof ui;
+  href: string;
 }
 
 const PUBLIC_BASE = process.env.PUBLIC_BASE ? process.env.PUBLIC_BASE : '';
@@ -26,6 +28,7 @@ const REF_NAME = process.env.NEXT_PUBLIC_REF_NAME
 export const FicheCard: FunctionComponent<FicheCardProps> = ({
   item,
   lang = 'fr',
+  href,
 }) => {
   const fiche: any = item.node;
 
@@ -168,11 +171,16 @@ export const FicheCard: FunctionComponent<FicheCardProps> = ({
           {REF_NAME}
           {fiche.refID}
         </span>
-        <span className="flex-auto">{fiche.title}</span>
+        <Link
+          href={href}
+          className="relative z-10 flex-auto no-underline"
+          title={`Voir la fiche : ${fiche.title}`}>
+          {fiche.title}
+        </Link>
         <button
           role="img"
           title={getMetas()}
-          className="size-6 flex-none text-primary">
+          className="relative z-10 size-6 flex-none text-primary">
           <svg
             stroke="currentColor"
             fill="none"
@@ -182,7 +190,7 @@ export const FicheCard: FunctionComponent<FicheCardProps> = ({
             height="200px"
             width="200px"
             xmlns="http://www.w3.org/2000/svg"
-            className="size-6">
+            className="pointer-events-none size-6">
             <path
               strokeLinecap="round"
               strokeLinejoin="round"

components/pages/fiche/Card.tsx

@@ -59,6 +59,12 @@ git reset HEAD -- $PROTECTED_PATHS 2>/dev/null || true
 git checkout HEAD -- $PROTECTED_PATHS 2>/dev/null || true
 git clean -fd -- $PROTECTED_PATHS 2>/dev/null || true
 
+# Restaurer uniquement le champ name du package.json local (version est celle d'upstream)
+echo -e "${YELLOW}Restauration du champ name dans package.json...${NC}"
+LOCAL_NAME=$(git show HEAD:package.json | node -e "let d=''; process.stdin.resume().on('data', c => d+=c).on('end', () => console.log(JSON.parse(d).name));")
+node -e "const fs=require('fs'); const p=JSON.parse(fs.readFileSync('package.json','utf8')); p.name='$LOCAL_NAME'; fs.writeFileSync('package.json', JSON.stringify(p, null, 2)+'\n');"
+git add package.json
+
 # Commit du merge
 echo -e "${YELLOW}Commit du merge...${NC}"
 git commit -m "chore: sync upstream (contenu local préservé)" || {