GeotrekCE · dtrucs · Nov 19, 2024 · Nov 13, 2024 · Nov 13, 2024 · Nov 13, 2024
diff --git a/frontend/src/components/Icons/AlertTriangle/index.tsx b/frontend/src/components/Icons/AlertTriangle/index.tsx
@@ -3,9 +3,8 @@ import { GenericIconProps } from '../types';
 
 export const AlertTriangle: React.FC<GenericIconProps> = ({
   color = 'currentColor',
-  opacity,
-  className,
   size,
+  ...props
 }) => {
   return (
     <svg
@@ -14,8 +13,7 @@ export const AlertTriangle: React.FC<GenericIconProps> = ({
       viewBox="0 0 49 49"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      opacity={opacity}
+      {...props}
     >
       <path
         fillRule="evenodd"

diff --git a/frontend/src/components/Icons/Printer/index.tsx b/frontend/src/components/Icons/Printer/index.tsx
@@ -3,9 +3,8 @@ import { GenericIconProps } from '../types';
 
 export const Printer: React.FC<GenericIconProps> = ({
   color = 'currentColor',
-  opacity,
-  className,
   size,
+  ...props
 }) => {
   return (
     <svg
@@ -14,8 +13,7 @@ export const Printer: React.FC<GenericIconProps> = ({
       viewBox="0 0 30 30"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      opacity={opacity}
+      {...props}
     >
       <path
         d="M7.5 11.25V2.5h15v8.75M7.5 22.5H5A2.5 2.5 0 012.5 20v-6.25a2.5 2.5 0 012.5-2.5h20a2.5 2.5 0 012.5 2.5V20a2.5 2.5 0 01-2.5 2.5h-2.5"

diff --git a/frontend/src/components/Icons/ThreeDMap/index.tsx b/frontend/src/components/Icons/ThreeDMap/index.tsx
@@ -3,9 +3,8 @@ import { GenericIconProps } from '../types';
 
 export const ThreeDMap: React.FC<GenericIconProps> = ({
   color = 'currentColor',
-  opacity,
-  className,
   size,
+  ...props
 }) => {
   return (
     <svg
@@ -14,8 +13,7 @@ export const ThreeDMap: React.FC<GenericIconProps> = ({
       viewBox="0 0 31 31"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      opacity={opacity}
+      {...props}
     >
       <path
         fillRule="evenodd"

diff --git a/frontend/src/components/pages/details/components/DetailsButton/DetailsButton.tsx b/frontend/src/components/pages/details/components/DetailsButton/DetailsButton.tsx
@@ -3,12 +3,12 @@ import React from 'react';
 interface DetailsButtonProps {
   url?: string;
   onClick?: (event: React.MouseEvent) => void;
-  children: JSX.Element;
+  children: React.ReactNode;
 }
 
 export const DetailsButton: React.FC<DetailsButtonProps> = ({ url, onClick, children }) => {
   const className =
-    'h-12 w-12 grid place-items-center rounded-full shadow-lg text-primary1 bg-white cursor-pointer hover:text-primary1-light transition-all';
+    'size-12 grid place-items-center rounded-full shadow-lg text-primary1 bg-white hover:text-primary1-light transition';
 
   if (url === undefined) {
     return (

diff --git a/...d/src/components/pages/details/components/DetailsButtonDropdown/DetailsButtonDropdown.tsx b/...d/src/components/pages/details/components/DetailsButtonDropdown/DetailsButtonDropdown.tsx
@@ -6,7 +6,7 @@ interface DetailsButtonDropdownProps {
     label: string;
     size: number;
   }[];
-  children: JSX.Element;
+  children: React.ReactNode;
 }
 
 export const DetailsButtonDropdown: React.FC<DetailsButtonDropdownProps> = ({

diff --git a/...end/src/components/pages/details/components/DetailsDownloadIcons/DetailsDownloadIcons.tsx b/...end/src/components/pages/details/components/DetailsDownloadIcons/DetailsDownloadIcons.tsx
@@ -1,22 +1,23 @@
+import { useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useMediaPredicate } from 'react-media-hook';
+
 import { AlertTriangle } from 'components/Icons/AlertTriangle';
 import { Reservation } from 'components/Icons/Reservation';
 import { ThreeDMap } from 'components/Icons/ThreeDMap';
 import { Printer } from 'components/Icons/Printer';
 import { DetailsButton } from 'components/pages/details/components/DetailsButton';
-import { useState } from 'react';
 import ToolTip from 'components/ToolTip';
-import { useIntl } from 'react-intl';
 import { Download } from 'components/Icons/Download';
 import { Details } from 'modules/details/interface';
 import { ThreeD } from 'components/3D';
 import { getMapConfig } from 'components/Map/config';
-import { useMediaPredicate } from 'react-media-hook';
 import useHasMounted from 'hooks/useHasMounted';
-import { OutdoorCourseDetails } from '../../../../../modules/outdoorCourse/interface';
-import { OutdoorSiteDetails } from '../../../../../modules/outdoorSite/interface';
-import { TouristicContentDetails } from '../../../../../modules/touristicContent/interface';
-import { TouristicEventDetails } from '../../../../../modules/touristicEvent/interface';
-import { getGlobalConfig } from '../../../../../modules/utils/api.config';
+import { OutdoorCourseDetails } from 'modules/outdoorCourse/interface';
+import { OutdoorSiteDetails } from 'modules/outdoorSite/interface';
+import { TouristicContentDetails } from 'modules/touristicContent/interface';
+import { TouristicEventDetails } from 'modules/touristicEvent/interface';
+import { getGlobalConfig } from 'modules/utils/api.config';
 import { DetailsButtonDropdown } from '../DetailsButtonDropdown';
 import { useDetailsAndMapContext } from '../../DetailsAndMapContext';
 
@@ -54,6 +55,16 @@ export const DetailsDownloadIcons: React.FC<DetailsTopIconsProps> = ({
     'elevationAreaUrl' in details &&
     !isTouchScreen;
 
+  const isReportFeatureEnabled =
+    displayReport && getGlobalConfig().enableReport && Boolean(details.id);
+
+  const isReservationWidgetFeatureEnabled =
+    displayReservationWidget &&
+    'reservation' in details &&
+    'reservation_id' in details &&
+    getGlobalConfig().reservationPartner &&
+    getGlobalConfig().reservationProject;
+
   const dropdownButtonOptions = [];
   if ('gpxUri' in details) {
     dropdownButtonOptions.push({
@@ -73,7 +84,7 @@ export const DetailsDownloadIcons: React.FC<DetailsTopIconsProps> = ({
   return (
     <div
       id="details_topDownloadIcons"
-      className="flex justify-between items-center mx-4 desktop:mr-12 desktop:ml-auto menu-download"
+      className="flex justify-between items-center gap-4 desktop:mr-12 desktop:ml-auto menu-download"
       data-testid={'download-button'}
     >
       {open3D && is3DfeatureEnabled && (
@@ -86,51 +97,60 @@ export const DetailsDownloadIcons: React.FC<DetailsTopIconsProps> = ({
         />
       )}
 
-      <div className="flex space-x-4">
-        {details.pdfUri && (
-          <ToolTip toolTipText={intl.formatMessage({ id: 'tooltip.print' })} invertPosition>
-            <DetailsButton url={details.pdfUri}>
-              <Printer size={30} />
-            </DetailsButton>
-          </ToolTip>
-        )}
+      {details.pdfUri && (
+        <ToolTip toolTipText={intl.formatMessage({ id: 'tooltip.print' })} invertPosition>
+          <DetailsButton url={details.pdfUri}>
+            <Printer size={30} aria-hidden />
+            <span className="sr-only">
+              <FormattedMessage id="tooltip.print" />
+            </span>
+          </DetailsButton>
+        </ToolTip>
+      )}
 
-        {dropdownButtonOptions.length > 0 && (
-          <ToolTip toolTipText={intl.formatMessage({ id: 'details.download' })} invertPosition>
-            <DetailsButtonDropdown options={dropdownButtonOptions}>
-              <Download className="text-primary1" size={size} />
-            </DetailsButtonDropdown>
-          </ToolTip>
-        )}
+      {dropdownButtonOptions.length > 0 && (
+        <ToolTip toolTipText={intl.formatMessage({ id: 'details.download' })} invertPosition>
+          <DetailsButtonDropdown options={dropdownButtonOptions}>
+            <Download className="text-primary1" size={size} aria-hidden />
+            <span className="sr-only">
+              <FormattedMessage id="details.download" />
+            </span>
+          </DetailsButtonDropdown>
+        </ToolTip>
+      )}
 
-        {displayReport && Number(details.id) && getGlobalConfig().enableReport && (
-          <ToolTip toolTipText={intl.formatMessage({ id: 'report.title' })} invertPosition>
-            <DetailsButton url="#details_report" onClick={() => setReportVisibility(true)}>
-              <AlertTriangle size={size} />
-            </DetailsButton>
-          </ToolTip>
-        )}
+      {isReportFeatureEnabled && (
+        <ToolTip toolTipText={intl.formatMessage({ id: 'report.title' })} invertPosition>
+          <DetailsButton url="#details_report" onClick={() => setReportVisibility(true)}>
+            <AlertTriangle size={size} aria-hidden />
+            <span className="sr-only">
+              <FormattedMessage id="report.title" />
+            </span>
+          </DetailsButton>
+        </ToolTip>
+      )}
 
-        {displayReservationWidget &&
-          (details as Details).reservation &&
-          (details as Details).reservation_id &&
-          getGlobalConfig().reservationPartner &&
-          getGlobalConfig().reservationProject && (
-            <ToolTip toolTipText={intl.formatMessage({ id: 'search.book' })} invertPosition>
-              <DetailsButton url="#details_reservationWidget">
-                <Reservation width={30} height={30} />
-              </DetailsButton>
-            </ToolTip>
-          )}
+      {isReservationWidgetFeatureEnabled && (
+        <ToolTip toolTipText={intl.formatMessage({ id: 'search.book' })} invertPosition>
+          <DetailsButton url="#details_reservationWidget">
+            <Reservation width={30} height={30} aria-hidden />
+            <span className="sr-only">
+              <FormattedMessage id="search.book" />
+            </span>
+          </DetailsButton>
+        </ToolTip>
+      )}
 
-        {is3DfeatureEnabled && (
-          <ToolTip toolTipText={intl.formatMessage({ id: 'tooltip.show3D' })} invertPosition>
-            <DetailsButton onClick={() => setOpen3D(true)}>
-              <ThreeDMap size={size} />
-            </DetailsButton>
-          </ToolTip>
-        )}
-      </div>
+      {is3DfeatureEnabled && (
+        <ToolTip toolTipText={intl.formatMessage({ id: 'tooltip.show3D' })} invertPosition>
+          <DetailsButton onClick={() => setOpen3D(true)}>
+            <ThreeDMap size={size} aria-hidden />
+            <span className="sr-only">
+              <FormattedMessage id="tooltip.show3D" />
+            </span>
+          </DetailsButton>
+        </ToolTip>
+      )}
     </div>
   );
 };
diff --git a/frontend/src/components/pages/details/components/DetailsTopIcons/DetailsTopIcons.tsx b/frontend/src/components/pages/details/components/DetailsTopIcons/DetailsTopIcons.tsx
@@ -25,18 +25,25 @@ interface DetailsTopIconsProps {
 }
 
 interface IconProps {
+  className?: string;
   height?: number;
   width?: number;
   src?: string;
 }
 
-const Icon: React.FC<IconProps> = ({ src = '', ...props }) => {
+const Icon: React.FC<IconProps> = ({ src, ...props }) => {
   if (!src) {
     return null;
   }
   if (RegExp(/(.*).svg/).test(src)) {
     return (
-      <SVG src={src} {...props} className="text-white" preProcessor={optimizeAndDefineColor()} />
+      <SVG
+        src={src}
+        {...props}
+        className={cn('text-white', props.className)}
+        preProcessor={optimizeAndDefineColor()}
+        aria-hidden
+      />
     );
   }
   return <Image loading="lazy" src={src} {...props} alt="" />;
@@ -49,30 +56,25 @@ export const DetailsTopIcons: React.FC<DetailsTopIconsProps> = ({
   displayReservationWidget = true,
 }) => {
   return (
-    <>
+    <div
+      id="details_topRoundIcons"
+      className="flex justify-between items-center min-w-0 mx-4 desktop:mx-12 menu-download"
+    >
+      {practice && <ActivityLogo type={type} src={practice.pictogramUri} />}
       <div
-        id="details_topRoundIcons"
-        className="flex justify-between items-center mx-4 desktop:mx-12 menu-download"
+        className={cn(
+          (type === 'TREK' || type === 'OUTDOOR_SITE' || type === 'TOURISTIC_EVENT') &&
+            'desktop:hidden',
+        )}
       >
-        {practice && <ActivityLogo type={type} src={practice.pictogramUri} />}
-        <div className="flex space-x-4">
-          <div
-            className={
-              type === 'TREK' || type === 'OUTDOOR_SITE' || type === 'TOURISTIC_EVENT'
-                ? 'desktop:hidden'
-                : undefined
-            }
-          >
-            <DetailsDownloadIcons
-              details={details}
-              size={30}
-              displayReport={type === 'TREK'}
-              displayReservationWidget={displayReservationWidget}
-            />
-          </div>
-        </div>
+        <DetailsDownloadIcons
+          details={details}
+          size={30}
+          displayReport={type === 'TREK'}
+          displayReservationWidget={displayReservationWidget}
+        />
       </div>
-    </>
+    </div>
   );
 };
 
@@ -82,18 +84,12 @@ const ActivityLogo: React.FC<{
 }> = ({ src, type = null }) => (
   <div
     className={cn(
-      `size-12 desktop:size-18 rounded-full
-      flex items-center justify-center
-      shadow-md
-    bg-primary1`,
+      'size-12 desktop:size-18 rounded-full',
+      'flex items-center justify-center',
+      'shadow-md bg-primary1',
       getActivityColorClassName(type, { withBackground: true }),
     )}
   >
-    <div className="desktop:hidden">
-      <Icon src={src} height={40} width={40} />
-    </div>
-    <div className="hidden desktop:block">
-      <Icon src={src} height={53} width={53} />
-    </div>
+    <Icon src={src} className="size-10 desktop:size-13" height={53} width={53} />
   </div>
 );