PDYE-809: aria-label y aria-pressed todos los botones

src/molecules/Buttons/Btn.tsx

@@ -10,6 +10,8 @@ interface colorScheme {
 }
 
 export interface propsBaseBtns {
+  ariaLabel?: string
+  ariaPressed?: boolean
   children?: React.ReactNode
   disabled?: boolean
   isFullWidth?: boolean
@@ -22,6 +24,7 @@ export interface propsBaseBtns {
   type?: 'button' | 'submit' | 'reset'
   tabIndex?: number
   id?: string
+  role?: string
 }
 interface props extends propsBaseBtns {
   bg?: colorScheme
@@ -42,38 +45,49 @@ interface props extends propsBaseBtns {
  * @example <Btn>Lorem</Btn>
  */
 export function Btn({
+  ariaLabel,
+  ariaPressed = false,
   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,
 }: props): JSX.Element {
   let showChildren = children ?? null
   if (!children && !rightIcon && !leftIcon) {
     showChildren = 'Button'
   }
 
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLElement> | KeyboardEvent): void => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      onClick
+    }
+  }
+
   const paddingTopBottom = '.75rem' // xxs + xs spacial units
   const borderRadius = rounded ? '12px' : vars('radii-small')
   const colorMain = bg?.main ?? vars('colors-main-deepSkyBlue')
   const touchColor = touchDark ? 'rgba(160, 160, 160, 0.2)' : 'rgba(255, 255, 255, 0.2)'
   const onlyIcon = !children && (rightIcon ?? leftIcon) ? 'onlyIcon' : ''
 
   return (
-    <Box
+    <Box     
+      as='button'
+      aria-pressed={ariaPressed}
       margin={m}
       sx={{
         '.react-ripples': {
@@ -83,29 +97,31 @@ export function Btn({
       }}
     >
       <Ripples color={touchColor}>
-        <Button
+        <Button          
+          aria-label={ariaLabel}
+
           id={id}
-          fontWeight="500"
-          fontSize={size === 'regular' ? 'medium' : 'small'}
           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}
+          onKeyPress={handleKeyPress}
+          position="relative"
           paddingTop={
             size === 'regular' ? paddingTopBottom : onlyIcon ? vars('space-xs') : vars('space-xxs')
           }
@@ -114,10 +130,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={tabIndex}
           _active={{
             bg: bg?.main ?? vars('colors-main-azureRadiance'),
           }}

src/molecules/Buttons/BtnLink.tsx

@@ -2,25 +2,31 @@ import { vars } from '@theme'
 import { Box } from '@chakra-ui/react'
 
 export interface props {
+  as?: 'button' | 'a'
+  ariaLabel?: string
+  ariaPressed?: boolean
   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,
+  ariaPressed = false,
   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: {
@@ -32,22 +38,35 @@ export function BtnLink({
     },
   }
 
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLElement> | KeyboardEvent): void => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      onClick
+    }
+  }
+
   return (
     <Box
       as={as}
+      aria-label={ariaLabel}
+      aria-pressed={ariaPressed}
       id={id}
+      onClick={onClick}
+      onKeyPress={handleKeyPress}
+      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"
+      padding=".25em"
+      tabIndex={tabIndex}
       textDecorationLine={textDecorationLine ? 'underline' : 'none'}
-      color={vars('colors-main-deepSkyBlue')}
+      width="fit-content"
       m={m}
       _hover={{
         color: vars('colors-neutral-darkCharcoal'),

src/molecules/Buttons/BtnPrimary.tsx

@@ -8,6 +8,8 @@ import { Btn, propsBaseBtns } from './Btn'
  * @example <BtnPrimary>Lorem</BtnPrimary>
  */
 export function BtnPrimary({
+  ariaLabel,
+  ariaPressed = false,
   children,
   disabled = false,
   isFullWidth = false,
@@ -21,9 +23,13 @@ export function BtnPrimary({
   tabIndex,
   id,
 }: propsBaseBtns): JSX.Element {
+
   return (
     <Btn
+      ariaLabel={ariaLabel}
+      ariaPressed={ariaPressed}
       id={id}
+      role="button"
       disabled={disabled}
       isFullWidth={isFullWidth}
       isLoading={isLoading}

src/molecules/Buttons/BtnSecondary.tsx

@@ -9,6 +9,8 @@ import { vars } from '@theme'
  * @example <BtnSecondary>Lorem</BtnSecondary>
  */
 export function BtnSecondary({
+  ariaLabel,
+  ariaPressed = false,
   children,
   disabled = false,
   isFullWidth = false,
@@ -24,15 +26,17 @@ export function BtnSecondary({
 }: propsBaseBtns): JSX.Element {
   return (
     <Btn
+      ariaLabel={ariaLabel}
+      ariaPressed={ariaPressed}
       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}

src/molecules/Buttons/BtnTertiary.tsx

@@ -14,6 +14,12 @@ import {
 } from '@/atoms/Icons'
 
 export interface propsTertiaryBtn {
+  ariaLabel?: string
+  ariaPressed?: boolean
+  activeWhenPress?: boolean
+  children?: React.ReactNode
+  id?: string
+  iconCustom?: JSX.Element
   iconStatus?:
     | 'answer'
     | 'ahead'
@@ -26,40 +32,45 @@ 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
 }
 
 export function BtnTertiary({
+  ariaLabel,
+  ariaPressed = false,
+  activeWhenPress = false,
   children,
+  id,
   iconStatus = 'multimedia',
   iconCustom,
-  rightIcon,
-  withoutColor = false,
   m = '0',
-  type = 'button',
-  tabIndex,
-  id,
-  activeWhenPress = false,
   onClick,
   onMouseEnter,
   onMouseLeave,
+  rightIcon,
+  type = 'button',
+  tabIndex,
+  withoutColor = false,
 }: propsTertiaryBtn): JSX.Element {
   const gray = vars('colors-neutral-gray')
   const blue = vars('colors-main-deepSkyBlue')
   const white = vars('colors-neutral-white')
   const colorIcon = withoutColor ? vars('colors-main-blueGrey') : blue
 
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLElement> | KeyboardEvent): void => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      onClick
+    }
+  }
+
   const btnIcons = {
     ahead: <GoAhead color={colorIcon} />,
     answer: <TextBubble color={colorIcon} />,
@@ -87,30 +98,34 @@ export function BtnTertiary({
 
   return (
     <Button
+      aria-label={ariaLabel}
+      aria-pressed={ariaPressed}
       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}
       m={m}
       onClick={onClick}
+      onKeyPress={handleKeyPress}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
+      paddingTop={vars('space-xxs')}
+      paddingBottom={vars('space-xxs')}
+      paddingLeft={vars('space-xs')}
+      paddingRight={vars('space-xs')}
+      rightIcon={rIcon}
+      textDecorationLine="underline"
       _hover={{
         color: `${blue}`,
       }}