fix(PDYE-849): role botones (#636)

Co-authored-by: Javiera Munita <javieramunita@MacBook-Air-de-Javiera.local>

Author: JaviMunita

src/molecules/Buttons/Btn.tsx

@@ -19,6 +19,7 @@ export interface propsBaseBtns {
   isLoading?: boolean
   onClick?: (e: React.MouseEvent<HTMLElement>) => void
   rightIcon?: React.ReactElement
+  role?: 'button' | 'link'
   size?: 'regular' | 'small'
   type?: 'button' | 'submit' | 'reset'
   tabIndex?: number
@@ -57,6 +58,7 @@ export function Btn({
   m = '0',
   onClick,
   rightIcon,
+  role = 'button',
   rounded = false,
   size = 'regular',
   touchDark = false,
@@ -88,7 +90,7 @@ export function Btn({
         <Button
           aria-label={ariaLabel}
           id={id}
-          role="button"
+          role={role}
           bg={colorMain}
           borderRadius={borderRadius}
           color={color}

src/molecules/Buttons/BtnLink.tsx

@@ -10,19 +10,21 @@ export interface props {
   id?: string
   m?: string
   onClick?: (e: React.MouseEvent<HTMLElement>) => void
+  role?: 'button' | 'link'
   tabIndex?: number
   textDecorationLine?: boolean
 }
 
 export function BtnLink({
-  as = 'button',
+  as = 'a',
   ariaLabel,
   children,
   fontSize = '0.875rem',
   href = '',
   id,
   m = '0',
   onClick,
+  role = 'link',
   tabIndex,
   textDecorationLine = true,
 }: props): JSX.Element {
@@ -41,7 +43,7 @@ export function BtnLink({
       as={as}
       aria-label={ariaLabel}
       id={id}
-      role="button"
+      role={role}
       backgroundColor="transparent"
       borderStyle="none"
       className="linkButton"

src/molecules/Buttons/BtnPrimary.tsx

@@ -32,6 +32,7 @@ export function BtnPrimary({
   isLoading = false,
   onClick,
   rightIcon,
+  role = 'button',
   size = 'regular',
   type = 'button',
   tabIndex,
@@ -48,6 +49,7 @@ export function BtnPrimary({
       m={m}
       onClick={onClick}
       rightIcon={rightIcon}
+      role={role}
       size={size}
       type={type}
       tabIndex={tabIndex}

src/molecules/Buttons/BtnSecondary.tsx

@@ -33,6 +33,7 @@ export function BtnSecondary({
   isLoading = false,
   onClick,
   rightIcon,
+  role = 'button',
   size = 'regular',
   type = 'button',
   tabIndex,
@@ -56,6 +57,7 @@ export function BtnSecondary({
       m={m}
       onClick={onClick}
       rightIcon={rightIcon}
+      role={role}
       size={size}
       touchDark
       type={type}

src/molecules/Buttons/BtnTertiary.tsx

@@ -37,6 +37,7 @@ export interface propsTertiaryBtn {
   onMouseEnter?: (e: React.MouseEvent<HTMLElement>) => void
   onMouseLeave?: (e: React.MouseEvent<HTMLElement>) => void
   rightIcon?: boolean
+  role?: 'button' | 'link'
   type?: 'button' | 'submit' | 'reset'
   tabIndex?: number
   withoutColor?: boolean
@@ -66,6 +67,7 @@ export function BtnTertiary({
   onMouseEnter,
   onMouseLeave,
   rightIcon,
+  role = 'button',
   type = 'button',
   tabIndex,
   withoutColor = false,
@@ -104,7 +106,7 @@ export function BtnTertiary({
     <Button
       aria-label={ariaLabel}
       id={id}
-      role="button"
+      role={role}
       type={type}
       tabIndex={tabIndex}
       background="transparent"