From 08fb4c750f76b5db5ca9a10005a532804d141957 Mon Sep 17 00:00:00 2001
From: Andrea Stagi <stagi.andrea@gmail.com>
Date: Wed, 4 Dec 2024 10:25:54 +0100
Subject: [PATCH] fix: improvements on back to top component

---
 src/BackToTop/BackToTop.tsx | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/BackToTop/BackToTop.tsx b/src/BackToTop/BackToTop.tsx
index 2bcced3aa..e4d7b34cd 100644
--- a/src/BackToTop/BackToTop.tsx
+++ b/src/BackToTop/BackToTop.tsx
@@ -1,27 +1,30 @@
 import React, { useLayoutEffect, useState } from 'react';
 import { Icon } from '../Icon/Icon';
 import classNames from 'classnames';
-import { Button } from '../Button/Button';
 
 export interface BackToTopProps {
   /**
-   * Optional classnames to pass to <a> element
+   * Aria label che definisce lo scopo del componente (default: `Torna su`)
+   */
+  ariaLabel?: string;
+  /**
+   * Classi aggiuntive da usare per il componente
    */
   className?: string;
   /**
-   * Render the dark variant of the back to top button
+   * Renderizza la variante `dark` del componente
    */
   dark?: boolean;
   /**
-   * Render the small variant of the back to top button
+   * Renderizza la variante `small` del componente
    */
   small?: boolean;
   /**
-   * Add a shadow to the button
+   * Aggiunge l'ombra al componente
    */
   shadow?: boolean;
   /**
-   * Configure after how many scrolled pixels the button is shown
+   * Configurazione riguardante dopo quanti pixel di scroll il bottone viene mostrato
    */
   showOffset?: number;
 }
@@ -31,6 +34,7 @@ const backToTop = () => {
 };
 
 export const BackToTop = ({
+  ariaLabel='Torna su',
   className,
   dark = false,
   small = false,
@@ -50,9 +54,8 @@ export const BackToTop = ({
   }, [showOffset]);
 
   return (
-    <Button
-      aria-hidden='true'
-      tabIndex={-1}
+    <a
+      aria-label={ariaLabel}
       className={classNames(
         className,
         'back-to-top',
@@ -66,7 +69,7 @@ export const BackToTop = ({
       style={{ padding: 0 }}
       color={!dark ? 'primary' : ''}
     >
-      <Icon color={dark ? 'secondary' : 'white'} icon='it-arrow-up' style={{ top: 0 }} />
-    </Button>
+      <Icon color={dark ? 'secondary' : 'light'} icon='it-arrow-up' style={{ cursor: 'pointer' }} />
+    </a>
   );
 };