feat(PDYE-809): implamentacion, prueba y revision de atributos de accesibilidad en componentes tipo boton (#635)

JaviMunita · Javiera Munita · web-flow · commit c421c59f4fee · 2024-07-09T11:45:56.000-05:00
Co-authored-by: Javiera Munita &lt;javieramunita@MacBook-Air-de-Javiera.local&gt;
diff --git a/src/atoms/Icons/Base.tsx b/src/atoms/Icons/Base.tsx
@@ -25,7 +25,7 @@ export function Base({
   title,
 }: IconProps): JSX.Element {
   return (
-    <IconChakra w={w} h={h} viewBox={viewBox} color={color} m={m}>
+    <IconChakra w={w} h={h} viewBox={viewBox} color={color} m={m} aria-label=" " aria-hidden>
       <title>icon{title && `-${title}`}</title>
       {children}
     </IconChakra>
diff --git a/src/molecules/Buttons/Btn.tsx b/src/molecules/Buttons/Btn.tsx
@@ -10,6 +10,7 @@ interface colorScheme {
 }
 
 export interface propsBaseBtns {
+  ariaLabel?: string
   children?: React.ReactNode
   disabled?: boolean
   isFullWidth?: boolean
@@ -42,24 +43,25 @@ interface props extends propsBaseBtns {
  * @example <Btn>Lorem</Btn>
  */
 export function Btn({
+  ariaLabel,
   bg,
   borderColorActive = [vars('colors-main-deepSkyBlue'), vars('colors-neutral-white')],
   children,
   color = vars('colors-neutral-white'),
   disabled = false,
   fillLoader = vars('colors-neutral-white'),
+  id,
   isFullWidth = false,
+  isLoading = false,
   leftIcon,
   m = '0',
-  isLoading = false,
   onClick,
   rightIcon,
   rounded = false,
   size = 'regular',
   touchDark = false,
   type = 'button',
-  tabIndex,
-  id,
+  tabIndex = 0,
 }: props): JSX.Element {
   let showChildren = children ?? null
   if (!children && !rightIcon && !leftIcon) {
@@ -84,28 +86,29 @@ export function Btn({
     >
       <Ripples color={touchColor}>
         <Button
+          aria-label={ariaLabel}
           id={id}
-          fontWeight="500"
-          fontSize={size === 'regular' ? 'medium' : 'small'}
+          role="button"
           bg={colorMain}
-          size={size === 'regular' ? 'md' : 'sm'}
           borderRadius={borderRadius}
           color={color}
           className={onlyIcon}
           disabled={disabled && isLoading ? false : disabled}
+          fontWeight="500"
+          fontSize={size === 'regular' ? 'medium' : 'small'}
           height="auto"
-          minHeight={size === 'regular' ? '2.813rem' : '2rem'}
-          minWidth={size === 'regular' ? '9rem' : 'auto'}
-          lineHeight="initial"
           iconSpacing={vars('space-xs')}
           isActive={false}
           isLoading={isLoading}
+          isFullWidth={isFullWidth}
+          lineHeight="initial"
           leftIcon={leftIcon}
+          minHeight={size === 'regular' ? '2.813rem' : '2rem'}
+          minWidth={size === 'regular' ? '9rem' : 'auto'}
           onClick={(e: React.MouseEvent<HTMLElement>) => {
             !isLoading && !disabled && onClick?.(e)
           }}
-          type={type}
-          tabIndex={tabIndex}
+          position="relative"
           paddingTop={
             size === 'regular' ? paddingTopBottom : onlyIcon ? vars('space-xs') : vars('space-xxs')
           }
@@ -114,10 +117,11 @@ export function Btn({
           }
           paddingLeft={size === 'regular' ? vars('space-s') : vars('space-xs')}
           paddingRight={size === 'regular' ? vars('space-s') : vars('space-xs')}
-          position="relative"
-          isFullWidth={isFullWidth}
           rightIcon={rightIcon}
+          type={type}
+          size={size === 'regular' ? 'md' : 'sm'}
           spinner={<Loader fill={fillLoader} />}
+          tabIndex={disabled || isLoading ? -1 : tabIndex}
           _active={{
             bg: bg?.main ?? vars('colors-main-azureRadiance'),
           }}
diff --git a/src/molecules/Buttons/BtnLink.tsx b/src/molecules/Buttons/BtnLink.tsx
@@ -2,25 +2,29 @@ import { vars } from '@theme'
 import { Box } from '@chakra-ui/react'
 
 export interface props {
+  as?: 'button' | 'a'
+  ariaLabel?: string
   children?: React.ReactNode
+  fontSize?: string | '0.875rem'
+  href?: string
+  id?: string
   m?: string
-  as?: 'button' | 'a'
   onClick?: (e: React.MouseEvent<HTMLElement>) => void
-  id?: string
-  href?: string
+  tabIndex?: number
   textDecorationLine?: boolean
-  fontSize?: string | '0.875rem'
 }
 
 export function BtnLink({
+  as = 'button',
+  ariaLabel,
   children,
+  fontSize = '0.875rem',
+  href = '',
+  id,
   m = '0',
   onClick,
-  id,
-  as = 'button',
-  href = '',
+  tabIndex,
   textDecorationLine = true,
-  fontSize = '0.875rem',
 }: props): JSX.Element {
   const typeButton = {
     button: {
@@ -35,19 +39,23 @@ export function BtnLink({
   return (
     <Box
       as={as}
+      aria-label={ariaLabel}
       id={id}
+      role="button"
       backgroundColor="transparent"
       borderStyle="none"
       className="linkButton"
-      width="fit-content"
-      padding=".25em"
+      color={vars('colors-main-deepSkyBlue')}
       fontFamily="Roboto"
       fontStyle="normal"
       fontWeight="500"
       fontSize={fontSize}
       lineHeight="1rem"
+      onClick={onClick}
+      padding=".25em"
+      tabIndex={tabIndex}
       textDecorationLine={textDecorationLine ? 'underline' : 'none'}
-      color={vars('colors-main-deepSkyBlue')}
+      width="fit-content"
       m={m}
       _hover={{
         color: vars('colors-neutral-darkCharcoal'),
diff --git a/src/molecules/Buttons/BtnPrimary.tsx b/src/molecules/Buttons/BtnPrimary.tsx
@@ -7,7 +7,23 @@ import { Btn, propsBaseBtns } from './Btn'
  *
  * @example <BtnPrimary>Lorem</BtnPrimary>
  */
+
+type XOR<T, U> = T | U extends object
+  ? (T extends U ? never : T) | (U extends T ? never : U)
+  : T | U
+interface ButtonWithTextProps extends propsBaseBtns {
+  children: React.ReactNode
+  ariaLabel?: string
+}
+
+interface ButtonWithoutTextProps extends propsBaseBtns {
+  children?: React.ReactNode
+  ariaLabel: string
+}
+
+type PrimaryButtonProps = XOR<ButtonWithTextProps, ButtonWithoutTextProps>
 export function BtnPrimary({
+  ariaLabel,
   children,
   disabled = false,
   isFullWidth = false,
@@ -20,9 +36,10 @@ export function BtnPrimary({
   type = 'button',
   tabIndex,
   id,
-}: propsBaseBtns): JSX.Element {
+}: PrimaryButtonProps): JSX.Element {
   return (
     <Btn
+      ariaLabel={ariaLabel}
       id={id}
       disabled={disabled}
       isFullWidth={isFullWidth}
diff --git a/src/molecules/Buttons/BtnSecondary.tsx b/src/molecules/Buttons/BtnSecondary.tsx
@@ -8,7 +8,23 @@ import { vars } from '@theme'
  *
  * @example <BtnSecondary>Lorem</BtnSecondary>
  */
+
+type XOR<T, U> = T | U extends object
+  ? (T extends U ? never : T) | (U extends T ? never : U)
+  : T | U
+interface ButtonWithTextProps extends propsBaseBtns {
+  children: React.ReactNode
+  ariaLabel?: string
+}
+
+interface ButtonWithoutTextProps extends propsBaseBtns {
+  children?: React.ReactNode
+  ariaLabel: string
+}
+
+type SecondaryButtonProps = XOR<ButtonWithTextProps, ButtonWithoutTextProps>
 export function BtnSecondary({
+  ariaLabel,
   children,
   disabled = false,
   isFullWidth = false,
@@ -21,18 +37,19 @@ export function BtnSecondary({
   type = 'button',
   tabIndex,
   id,
-}: propsBaseBtns): JSX.Element {
+}: SecondaryButtonProps): JSX.Element {
   return (
     <Btn
+      ariaLabel={ariaLabel}
       id={id}
       bg={{
         main: vars('colors-main-veryLightBlue'),
         hover: vars('colors-main-linkWater'),
       }}
-      fillLoader={vars('colors-main-deepSkyBlue')}
       borderColorActive={[vars('colors-main-deepSkyBlue'), vars('colors-neutral-white')]}
       color={vars('colors-main-deepSkyBlue')}
       disabled={disabled}
+      fillLoader={vars('colors-main-deepSkyBlue')}
       isFullWidth={isFullWidth}
       isLoading={isLoading}
       leftIcon={leftIcon}
diff --git a/src/molecules/Buttons/BtnTertiary.tsx b/src/molecules/Buttons/BtnTertiary.tsx
@@ -13,7 +13,13 @@ import {
   Download,
 } from '@/atoms/Icons'
 
+type XOR<T, U> = T | U extends object
+  ? (T extends U ? never : T) | (U extends T ? never : U)
+  : T | U
 export interface propsTertiaryBtn {
+  activeWhenPress?: boolean
+  id?: string
+  iconCustom?: JSX.Element
   iconStatus?:
     | 'answer'
     | 'ahead'
@@ -26,35 +32,44 @@ export interface propsTertiaryBtn {
     | 'record'
     | 'download'
     | 'noIcon'
-  children?: React.ReactNode
-  rightIcon?: boolean
-  iconCustom?: JSX.Element
-  withoutColor?: boolean
   m?: string
-  type?: 'button' | 'submit' | 'reset'
-  tabIndex?: number
-  id?: string
-  activeWhenPress?: boolean
   onClick?: (e: React.MouseEvent<HTMLElement>) => void
   onMouseEnter?: (e: React.MouseEvent<HTMLElement>) => void
   onMouseLeave?: (e: React.MouseEvent<HTMLElement>) => void
+  rightIcon?: boolean
+  type?: 'button' | 'submit' | 'reset'
+  tabIndex?: number
+  withoutColor?: boolean
+}
+
+interface ButtonWithTextProps extends propsTertiaryBtn {
+  children: React.ReactNode
+  ariaLabel?: string
 }
 
+interface ButtonWithoutTextProps extends propsTertiaryBtn {
+  children?: React.ReactNode
+  ariaLabel: string
+}
+
+type ButtonProps = XOR<ButtonWithTextProps, ButtonWithoutTextProps>
+
 export function BtnTertiary({
+  ariaLabel,
+  activeWhenPress = false,
   children,
+  id,
   iconStatus = 'multimedia',
   iconCustom,
-  rightIcon,
-  withoutColor = false,
   m = '0',
-  type = 'button',
-  tabIndex,
-  id,
-  activeWhenPress = false,
   onClick,
   onMouseEnter,
   onMouseLeave,
-}: propsTertiaryBtn): JSX.Element {
+  rightIcon,
+  type = 'button',
+  tabIndex,
+  withoutColor = false,
+}: ButtonProps): JSX.Element {
   const gray = vars('colors-neutral-gray')
   const blue = vars('colors-main-deepSkyBlue')
   const white = vars('colors-neutral-white')
@@ -87,30 +102,32 @@ export function BtnTertiary({
 
   return (
     <Button
+      aria-label={ariaLabel}
       id={id}
+      role="button"
       type={type}
       tabIndex={tabIndex}
-      height="24px"
       background="transparent"
+      borderRadius="12px"
+      color={gray}
       fontFamily="Roboto"
       fontStyle="normal"
       fontWeight="500"
       fontSize="14px"
-      lineHeight="16px"
-      textDecorationLine="underline"
-      borderRadius="12px"
       gap="0.5rem"
-      paddingTop={vars('space-xxs')}
-      paddingBottom={vars('space-xxs')}
-      paddingLeft={vars('space-xs')}
-      paddingRight={vars('space-xs')}
-      color={gray}
-      rightIcon={rIcon}
+      height="24px"
+      lineHeight="16px"
       leftIcon={lIcon}
+      rightIcon={rIcon}
       m={m}
       onClick={onClick}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
+      paddingTop={vars('space-xxs')}
+      paddingBottom={vars('space-xxs')}
+      paddingLeft={vars('space-xs')}
+      paddingRight={vars('space-xs')}
+      textDecorationLine="underline"
       _hover={{
         color: `${blue}`,
       }}
