feat(ui): active page indicator (#573)

numerique-gouv · Oct 4, 2024 · 16792ed · 16792ed
1 parent ae42d45
commit 16792ed
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/packages/~/app/layout/src/__snapshots__/main.test.tsx.snap b/packages/~/app/layout/src/__snapshots__/main.test.tsx.snap
@@ -89,7 +89,7 @@ exports[`Main Layout 1`] = `
         "
         class="flex min-h-screen flex-col"
       >
-        <div class="flex flex-1 flex-col"><div class="flex min-h-full flex-grow flex-col"><header role="banner" class="fr-header"><div class="fr-header__body"><div class="fr-container"><div class="fr-header__body-row"><div class="fr-header__brand fr-enlarge-link"><div class="fr-header__brand-top"><div class="fr-header__logo"><p class="fr-logo">République<br/>Française</p></div></div><div class="fr-header__service"><a href="/" title="Accueil "><p class="fr-header__service-title">Hyyypertool</p></a><p class="fr-header__service-tagline">hyyyyyyyypertool</p></div></div><div class="fr-header__tools"><div class="fr-header__tools-links"><ul class="fr-btns-group"><li><a class="fr-btn fr-btn--sm fr-btn--tertiary-no-outline fr-fi-logout-box-r-line fr-btn--icon-left" href="/auth/logout">Lara Croft</a></li></ul></div></div></div></div></div><div class="fr-header__menu fr-modal"><div class="fr-container"><nav class="fr-nav" id="navigation-494" role="navigation" aria-label="Menu principal"><ul class="fr-nav__list"><li class="fr-nav__item"><a class="fr-nav__link" href="/moderations" target="_self">Moderations</a></li><li class="fr-nav__item"><a class="fr-nav__link" href="/users" target="_self">Utilisateurs</a></li><li class="fr-nav__item"><a class="fr-nav__link" href="/organizations" target="_self">Organisations</a></li><li class="fr-nav__item"><a class="fr-nav__link" href="/organizations/domains" target="_self">Domaines à verifier</a></li></ul></nav></div></div></header><div class="relative flex flex-1 flex-col">✅</div></div></div>
+        <div class="flex flex-1 flex-col"><div class="flex min-h-full flex-grow flex-col"><header role="banner" class="fr-header"><div class="fr-header__body"><div class="fr-container"><div class="fr-header__body-row"><div class="fr-header__brand fr-enlarge-link"><div class="fr-header__brand-top"><div class="fr-header__logo"><p class="fr-logo">République<br/>Française</p></div></div><div class="fr-header__service"><a href="/" title="Accueil "><p class="fr-header__service-title">Hyyypertool</p></a><p class="fr-header__service-tagline">hyyyyyyyypertool</p></div></div><div class="fr-header__tools"><div class="fr-header__tools-links"><ul class="fr-btns-group"><li><a class="fr-btn fr-btn--sm fr-btn--tertiary-no-outline fr-fi-logout-box-r-line fr-btn--icon-left" href="/auth/logout">Lara Croft</a></li></ul></div></div></div></div></div><div class="fr-header__menu fr-modal"><div class="fr-container"><nav class="fr-nav" id="navigation-494" role="navigation" aria-label="Menu principal"><ul class="fr-nav__list"><li class="fr-nav__item"><a aria-current="false" class="fr-nav__link" href="/moderations" target="_self">Moderations</a></li><li class="fr-nav__item"><a aria-current="false" class="fr-nav__link" href="/users" target="_self">Utilisateurs</a></li><li class="fr-nav__item"><a aria-current="false" class="fr-nav__link" href="/organizations" target="_self">Organisations</a></li><li class="fr-nav__item"><a aria-current="false" class="fr-nav__link" href="/organizations/domains" target="_self">Domaines à verifier</a></li></ul></nav></div></div></header><div class="relative flex flex-1 flex-col">✅</div></div></div>
         <footer class="container mx-auto flex flex-row justify-between p-2">
           <div>© 2222 🇫🇷</div>
           <a

diff --git a/packages/~/app/layout/src/main.tsx b/packages/~/app/layout/src/main.tsx
@@ -83,6 +83,8 @@ function Tools({ username }: { username?: string | undefined }) {
 }
 
 function Nav() {
+  const { req } = useRequestContext();
+
   return (
     <nav
       class="fr-nav"
@@ -93,6 +95,7 @@ function Nav() {
       <ul class="fr-nav__list">
         <li class="fr-nav__item">
           <a
+            aria-current={req.routePath.startsWith("/moderations")}
             class="fr-nav__link"
             href={urls.moderations.$url().pathname}
             target="_self"
@@ -102,6 +105,7 @@ function Nav() {
         </li>
         <li class="fr-nav__item">
           <a
+            aria-current={req.routePath.startsWith("/users")}
             class="fr-nav__link"
             href={urls.users.$url().pathname}
             target="_self"
@@ -111,6 +115,10 @@ function Nav() {
         </li>
         <li class="fr-nav__item">
           <a
+            aria-current={
+              req.routePath.startsWith("/organizations") &&
+              !req.routePath.startsWith("/organizations/domains")
+            }
             class="fr-nav__link"
             href={urls.organizations.$url().pathname}
             target="_self"
@@ -120,6 +128,7 @@ function Nav() {
         </li>
         <li class="fr-nav__item">
           <a
+            aria-current={req.routePath.startsWith("/organizations/domains")}
             class="fr-nav__link"
             href={urls.organizations.domains.$url().pathname}
             target="_self"