chore(ally): add a quick navigation at the top of the page

# Conflicts: # components/banner/info-banner.tsx # components/header/header-core/index.tsx
annuaire-entreprises-data-gouv-fr · Sep 3, 2024 · eb104c3 · eb104c3
1 parent bd6a72c
commit eb104c3
Show file tree

Hide file tree

Showing 12 changed files with 49 additions and 19 deletions.
diff --git a/app/(header-default)/layout.tsx b/app/(header-default)/layout.tsx
@@ -19,7 +19,9 @@ export default async function LayoutWithSearchBar({
     <>
       <NPSBanner />
       <HeaderServer useSearchBar={true} useAgentCTA={true} />
-      <main className="fr-container">{children}</main>
+      <main className="fr-container" id="contenu">
+        {children}
+      </main>
       <SocialNetworks />
       <QuestionOrFeedback session={session} />
       <Footer />

diff --git a/app/(header-home)/layout.tsx b/app/(header-home)/layout.tsx
@@ -19,7 +19,9 @@ export default async function HomeLayout({
     <>
       <NPSBanner />
       <HeaderServer useSearchBar={false} useAgentCTA={true} />
-      <main className="fr-container">{children}</main>
+      <main className="fr-container" id="contenu">
+        {children}
+      </main>
       <SocialNetworks />
       <QuestionOrFeedback session={session} />
       <Footer />

diff --git a/app/(header-minimal)/layout.tsx b/app/(header-minimal)/layout.tsx
@@ -15,7 +15,9 @@ export default async function HomeLayout({
   return (
     <>
       <HeaderServer useSearchBar={false} useAgentCTA={false} />
-      <main className="fr-container">{children}</main>
+      <main className="fr-container" id="contenu">
+        {children}
+      </main>
       <QuestionOrFeedback session={session} />
     </>
   );

diff --git a/app/(header-search)/rechercher/carte/page.tsx b/app/(header-search)/rechercher/carte/page.tsx
@@ -40,7 +40,11 @@ const MapSearchResultPage = async function UniteLegalePage(
         searchParams={searchFilterParamsJSON}
         currentSearchTerm={searchTerm}
       />
-      <main style={{ maxWidth: '100%', marginBottom: 0 }} className="map">
+      <main
+        id="contenu"
+        style={{ maxWidth: '100%', marginBottom: 0 }}
+        className="map"
+      >
         <StructuredDataSearchAction />
         <HiddenH1 title="Résultats de recherche" />
         <SearchResultsMap

diff --git a/app/(header-search)/rechercher/page.tsx b/app/(header-search)/rechercher/page.tsx
@@ -44,7 +44,7 @@ const SearchResultPage = async function UniteLegalePage(props: AppRouterProps) {
         searchParams={searchFilterParamsJSON}
         currentSearchTerm={searchTerm}
       />
-      <main className="fr-container">
+      <main className="fr-container" id="contenu">
         <StructuredDataSearchAction />
         <HiddenH1 title="Résultats de recherche" />
         <div className="content-container">

diff --git a/app/(header-without-search)/layout.tsx b/app/(header-without-search)/layout.tsx
@@ -1,11 +1,11 @@
-import { Metadata } from 'next';
 import { NPSBanner } from '#components/banner/nps';
 import Footer from '#components/footer';
 import { HeaderServer } from '#components/header/header-server';
 import { meta } from '#components/meta/meta-server';
 import SocialNetworks from '#components/social-network';
 import getSession from '#utils/server-side-helper/app/get-session';
 import QuestionOrFeedback from 'app/_component/question-or-feedback';
+import { Metadata } from 'next';
 
 export const metadata: Metadata = meta({});
 
@@ -19,7 +19,9 @@ export default async function LayoutWithSearchBar({
     <>
       <NPSBanner />
       <HeaderServer useSearchBar={false} useAgentCTA={true} useLogo />
-      <main className="fr-container">{children}</main>
+      <main className="fr-container" id="contenu">
+        {children}
+      </main>
       <SocialNetworks />
       <QuestionOrFeedback session={session} />
       <Footer />

diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -7,7 +7,7 @@ export default function NotFound() {
   return (
     <>
       <HeaderServer useSearchBar={true} useAgentCTA={true} />
-      <main className="fr-container">
+      <main className="fr-container" id="contenu">
         <ErrorNotFoundExplanations />
       </main>
       <QuestionOrFeedback session={null} />

diff --git a/components-ui/icon/wrapper.tsx b/components-ui/icon/wrapper.tsx
@@ -8,15 +8,13 @@ type IProps = {
   size?: number;
   color?: string;
   slug: IIconsSlug;
-  alt: string;
 };
 
 export const Icon: React.FC<PropsWithChildren<IProps>> = ({
   id,
   className = '',
   size = 18,
   color,
-  alt,
   children,
   slug,
 }) => {
@@ -27,6 +25,7 @@ export const Icon: React.FC<PropsWithChildren<IProps>> = ({
   return (
     <span id={id} className={styles.icon + ' ' + className}>
       <span
+        aria-hidden
         style={{
           height: size + 'px',
           width: size + 'px',
@@ -37,7 +36,6 @@ export const Icon: React.FC<PropsWithChildren<IProps>> = ({
           alignItems: 'center',
           justifyContent: 'center',
         }}
-        alt={alt}
       >
         {icon}
       </span>

diff --git a/components/header/header-core/index.tsx b/components/header/header-core/index.tsx
@@ -38,10 +38,27 @@ export const HeaderCore: React.FC<IProps> = ({
 }) => {
   return (
     <>
+      <div id="top" className="fr-skiplinks">
+        <nav
+          className="fr-container"
+          role="navigation"
+          aria-label="Accès rapide"
+        >
+          <ul className="fr-skiplinks__list">
+            <li>
+              <a className="fr-link" href="#contenu">
+                Contenu
+              </a>
+            </li>
+            <li>
+              <a className="fr-link" href="#footer">
+                Pied de page
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
       <LoadBar session={session} />
-      <aside>
-        <InfoBanner />
-      </aside>
       <header
         role="banner"
         className="fr-header"

diff --git a/components/header/menu/espace-agent-link.tsx b/components/header/menu/espace-agent-link.tsx
@@ -12,9 +12,11 @@ export const EspaceAgentLink = ({ pathFrom }: { pathFrom: string }) => (
     onClick={() => logConversionEvent('HEADER_LOGIN')}
     aria-label="Accéder à la page de connexion de l'espace agent public"
   >
-    <span className="fr-sr-only">Accéder à l’espace agent public</span>
-    <Icon slug="accountLine" alt="" aria-hidden>
-      <span className={styles.menuText}>Espace agent public</span>
+    <Icon slug="accountLine">
+      <span className="fr-sr-only">Accéder à l’espace agent public</span>
+      <span aria-hidden className={styles.menuText}>
+        Espace agent public
+      </span>
     </Icon>
   </a>
 );
diff --git a/components/header/menu/index.tsx b/components/header/menu/index.tsx
@@ -63,7 +63,7 @@ const Menu: React.FC<{
       >
         <span className="fr-sr-only">{userText}</span>
         <span aria-hidden className={styles.menuText}>
-          <Icon slug="accountLine" alt="">
+          <Icon slug="accountLine">
             {userText}
             &nbsp;(
             <strong
@@ -101,7 +101,7 @@ const Menu: React.FC<{
           aria-label="Se déconnecter de l'espace agent public"
           href={logoutUrl}
           tabIndex={-1}
-          className="fr-link"
+          className="fr-link no-style-link"
           onMouseDown={logout}
           role="menuitem"
         >

diff --git a/components/header/menu/styles.module.css b/components/header/menu/styles.module.css
@@ -1,5 +1,6 @@
 .menuLogout {
   position: relative;
+  font-size: small;
 }
 .menuLogout > button {
   margin: 0 !important;