Skip to content

Commit c421c59

Browse files
JaviMunitaJaviera Munita
JaviMunita
and
Javiera Munita
authored
feat(PDYE-809): implamentacion, prueba y revision de atributos de accesibilidad en componentes tipo boton (#635)
Co-authored-by: Javiera Munita <javieramunita@MacBook-Air-de-Javiera.local>
1 parent 014cb64 commit c421c59

File tree

6 files changed

+116
-53
lines changed

6 files changed

+116
-53
lines changed

‎src/atoms/Icons/Base.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export function Base({
2525
title,
2626
}: IconProps): JSX.Element {
2727
return (
28-
<IconChakra w={w} h={h} viewBox={viewBox} color={color} m={m}>
28+
<IconChakra w={w} h={h} viewBox={viewBox} color={color} m={m} aria-label=" " aria-hidden>
2929
<title>icon{title && `-${title}`}</title>
3030
{children}
3131
</IconChakra>

‎src/molecules/Buttons/Btn.tsx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ interface colorScheme {
1010
}
1111

1212
export interface propsBaseBtns {
13+
ariaLabel?: string
1314
children?: React.ReactNode
1415
disabled?: boolean
1516
isFullWidth?: boolean
@@ -42,24 +43,25 @@ interface props extends propsBaseBtns {
4243
* @example <Btn>Lorem</Btn>
4344
*/
4445
export function Btn({
46+
ariaLabel,
4547
bg,
4648
borderColorActive = [vars('colors-main-deepSkyBlue'), vars('colors-neutral-white')],
4749
children,
4850
color = vars('colors-neutral-white'),
4951
disabled = false,
5052
fillLoader = vars('colors-neutral-white'),
53+
id,
5154
isFullWidth = false,
55+
isLoading = false,
5256
leftIcon,
5357
m = '0',
54-
isLoading = false,
5558
onClick,
5659
rightIcon,
5760
rounded = false,
5861
size = 'regular',
5962
touchDark = false,
6063
type = 'button',
61-
tabIndex,
62-
id,
64+
tabIndex = 0,
6365
}: props): JSX.Element {
6466
let showChildren = children ?? null
6567
if (!children && !rightIcon && !leftIcon) {
@@ -84,28 +86,29 @@ export function Btn({
8486
>
8587
<Ripples color={touchColor}>
8688
<Button
89+
aria-label={ariaLabel}
8790
id={id}
88-
fontWeight="500"
89-
fontSize={size === 'regular' ? 'medium' : 'small'}
91+
role="button"
9092
bg={colorMain}
91-
size={size === 'regular' ? 'md' : 'sm'}
9293
borderRadius={borderRadius}
9394
color={color}
9495
className={onlyIcon}
9596
disabled={disabled && isLoading ? false : disabled}
97+
fontWeight="500"
98+
fontSize={size === 'regular' ? 'medium' : 'small'}
9699
height="auto"
97-
minHeight={size === 'regular' ? '2.813rem' : '2rem'}
98-
minWidth={size === 'regular' ? '9rem' : 'auto'}
99-
lineHeight="initial"
100100
iconSpacing={vars('space-xs')}
101101
isActive={false}
102102
isLoading={isLoading}
103+
isFullWidth={isFullWidth}
104+
lineHeight="initial"
103105
leftIcon={leftIcon}
106+
minHeight={size === 'regular' ? '2.813rem' : '2rem'}
107+
minWidth={size === 'regular' ? '9rem' : 'auto'}
104108
onClick={(e: React.MouseEvent<HTMLElement>) => {
105109
!isLoading && !disabled && onClick?.(e)
106110
}}
107-
type={type}
108-
tabIndex={tabIndex}
111+
position="relative"
109112
paddingTop={
110113
size === 'regular' ? paddingTopBottom : onlyIcon ? vars('space-xs') : vars('space-xxs')
111114
}
@@ -114,10 +117,11 @@ export function Btn({
114117
}
115118
paddingLeft={size === 'regular' ? vars('space-s') : vars('space-xs')}
116119
paddingRight={size === 'regular' ? vars('space-s') : vars('space-xs')}
117-
position="relative"
118-
isFullWidth={isFullWidth}
119120
rightIcon={rightIcon}
121+
type={type}
122+
size={size === 'regular' ? 'md' : 'sm'}
120123
spinner={<Loader fill={fillLoader} />}
124+
tabIndex={disabled || isLoading ? -1 : tabIndex}
121125
_active={{
122126
bg: bg?.main ?? vars('colors-main-azureRadiance'),
123127
}}

‎src/molecules/Buttons/BtnLink.tsx‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,29 @@ import { vars } from '@theme'
22
import { Box } from '@chakra-ui/react'
33

44
export interface props {
5+
as?: 'button' | 'a'
6+
ariaLabel?: string
57
children?: React.ReactNode
8+
fontSize?: string | '0.875rem'
9+
href?: string
10+
id?: string
611
m?: string
7-
as?: 'button' | 'a'
812
onClick?: (e: React.MouseEvent<HTMLElement>) => void
9-
id?: string
10-
href?: string
13+
tabIndex?: number
1114
textDecorationLine?: boolean
12-
fontSize?: string | '0.875rem'
1315
}
1416

1517
export function BtnLink({
18+
as = 'button',
19+
ariaLabel,
1620
children,
21+
fontSize = '0.875rem',
22+
href = '',
23+
id,
1724
m = '0',
1825
onClick,
19-
id,
20-
as = 'button',
21-
href = '',
26+
tabIndex,
2227
textDecorationLine = true,
23-
fontSize = '0.875rem',
2428
}: props): JSX.Element {
2529
const typeButton = {
2630
button: {
@@ -35,19 +39,23 @@ export function BtnLink({
3539
return (
3640
<Box
3741
as={as}
42+
aria-label={ariaLabel}
3843
id={id}
44+
role="button"
3945
backgroundColor="transparent"
4046
borderStyle="none"
4147
className="linkButton"
42-
width="fit-content"
43-
padding=".25em"
48+
color={vars('colors-main-deepSkyBlue')}
4449
fontFamily="Roboto"
4550
fontStyle="normal"
4651
fontWeight="500"
4752
fontSize={fontSize}
4853
lineHeight="1rem"
54+
onClick={onClick}
55+
padding=".25em"
56+
tabIndex={tabIndex}
4957
textDecorationLine={textDecorationLine ? 'underline' : 'none'}
50-
color={vars('colors-main-deepSkyBlue')}
58+
width="fit-content"
5159
m={m}
5260
_hover={{
5361
color: vars('colors-neutral-darkCharcoal'),

‎src/molecules/Buttons/BtnPrimary.tsx‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,23 @@ import { Btn, propsBaseBtns } from './Btn'
77
*
88
* @example <BtnPrimary>Lorem</BtnPrimary>
99
*/
10+
11+
type XOR<T, U> = T | U extends object
12+
? (T extends U ? never : T) | (U extends T ? never : U)
13+
: T | U
14+
interface ButtonWithTextProps extends propsBaseBtns {
15+
children: React.ReactNode
16+
ariaLabel?: string
17+
}
18+
19+
interface ButtonWithoutTextProps extends propsBaseBtns {
20+
children?: React.ReactNode
21+
ariaLabel: string
22+
}
23+
24+
type PrimaryButtonProps = XOR<ButtonWithTextProps, ButtonWithoutTextProps>
1025
export function BtnPrimary({
26+
ariaLabel,
1127
children,
1228
disabled = false,
1329
isFullWidth = false,
@@ -20,9 +36,10 @@ export function BtnPrimary({
2036
type = 'button',
2137
tabIndex,
2238
id,
23-
}: propsBaseBtns): JSX.Element {
39+
}: PrimaryButtonProps): JSX.Element {
2440
return (
2541
<Btn
42+
ariaLabel={ariaLabel}
2643
id={id}
2744
disabled={disabled}
2845
isFullWidth={isFullWidth}

‎src/molecules/Buttons/BtnSecondary.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,23 @@ import { vars } from '@theme'
88
*
99
* @example <BtnSecondary>Lorem</BtnSecondary>
1010
*/
11+
12+
type XOR<T, U> = T | U extends object
13+
? (T extends U ? never : T) | (U extends T ? never : U)
14+
: T | U
15+
interface ButtonWithTextProps extends propsBaseBtns {
16+
children: React.ReactNode
17+
ariaLabel?: string
18+
}
19+
20+
interface ButtonWithoutTextProps extends propsBaseBtns {
21+
children?: React.ReactNode
22+
ariaLabel: string
23+
}
24+
25+
type SecondaryButtonProps = XOR<ButtonWithTextProps, ButtonWithoutTextProps>
1126
export function BtnSecondary({
27+
ariaLabel,
1228
children,
1329
disabled = false,
1430
isFullWidth = false,
@@ -21,18 +37,19 @@ export function BtnSecondary({
2137
type = 'button',
2238
tabIndex,
2339
id,
24-
}: propsBaseBtns): JSX.Element {
40+
}: SecondaryButtonProps): JSX.Element {
2541
return (
2642
<Btn
43+
ariaLabel={ariaLabel}
2744
id={id}
2845
bg={{
2946
main: vars('colors-main-veryLightBlue'),
3047
hover: vars('colors-main-linkWater'),
3148
}}
32-
fillLoader={vars('colors-main-deepSkyBlue')}
3349
borderColorActive={[vars('colors-main-deepSkyBlue'), vars('colors-neutral-white')]}
3450
color={vars('colors-main-deepSkyBlue')}
3551
disabled={disabled}
52+
fillLoader={vars('colors-main-deepSkyBlue')}
3653
isFullWidth={isFullWidth}
3754
isLoading={isLoading}
3855
leftIcon={leftIcon}

‎src/molecules/Buttons/BtnTertiary.tsx‎

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,13 @@ import {
1313
Download,
1414
} from '@/atoms/Icons'
1515

16+
type XOR<T, U> = T | U extends object
17+
? (T extends U ? never : T) | (U extends T ? never : U)
18+
: T | U
1619
export interface propsTertiaryBtn {
20+
activeWhenPress?: boolean
21+
id?: string
22+
iconCustom?: JSX.Element
1723
iconStatus?:
1824
| 'answer'
1925
| 'ahead'
@@ -26,35 +32,44 @@ export interface propsTertiaryBtn {
2632
| 'record'
2733
| 'download'
2834
| 'noIcon'
29-
children?: React.ReactNode
30-
rightIcon?: boolean
31-
iconCustom?: JSX.Element
32-
withoutColor?: boolean
3335
m?: string
34-
type?: 'button' | 'submit' | 'reset'
35-
tabIndex?: number
36-
id?: string
37-
activeWhenPress?: boolean
3836
onClick?: (e: React.MouseEvent<HTMLElement>) => void
3937
onMouseEnter?: (e: React.MouseEvent<HTMLElement>) => void
4038
onMouseLeave?: (e: React.MouseEvent<HTMLElement>) => void
39+
rightIcon?: boolean
40+
type?: 'button' | 'submit' | 'reset'
41+
tabIndex?: number
42+
withoutColor?: boolean
43+
}
44+
45+
interface ButtonWithTextProps extends propsTertiaryBtn {
46+
children: React.ReactNode
47+
ariaLabel?: string
4148
}
4249

50+
interface ButtonWithoutTextProps extends propsTertiaryBtn {
51+
children?: React.ReactNode
52+
ariaLabel: string
53+
}
54+
55+
type ButtonProps = XOR<ButtonWithTextProps, ButtonWithoutTextProps>
56+
4357
export function BtnTertiary({
58+
ariaLabel,
59+
activeWhenPress = false,
4460
children,
61+
id,
4562
iconStatus = 'multimedia',
4663
iconCustom,
47-
rightIcon,
48-
withoutColor = false,
4964
m = '0',
50-
type = 'button',
51-
tabIndex,
52-
id,
53-
activeWhenPress = false,
5465
onClick,
5566
onMouseEnter,
5667
onMouseLeave,
57-
}: propsTertiaryBtn): JSX.Element {
68+
rightIcon,
69+
type = 'button',
70+
tabIndex,
71+
withoutColor = false,
72+
}: ButtonProps): JSX.Element {
5873
const gray = vars('colors-neutral-gray')
5974
const blue = vars('colors-main-deepSkyBlue')
6075
const white = vars('colors-neutral-white')
@@ -87,30 +102,32 @@ export function BtnTertiary({
87102

88103
return (
89104
<Button
105+
aria-label={ariaLabel}
90106
id={id}
107+
role="button"
91108
type={type}
92109
tabIndex={tabIndex}
93-
height="24px"
94110
background="transparent"
111+
borderRadius="12px"
112+
color={gray}
95113
fontFamily="Roboto"
96114
fontStyle="normal"
97115
fontWeight="500"
98116
fontSize="14px"
99-
lineHeight="16px"
100-
textDecorationLine="underline"
101-
borderRadius="12px"
102117
gap="0.5rem"
103-
paddingTop={vars('space-xxs')}
104-
paddingBottom={vars('space-xxs')}
105-
paddingLeft={vars('space-xs')}
106-
paddingRight={vars('space-xs')}
107-
color={gray}
108-
rightIcon={rIcon}
118+
height="24px"
119+
lineHeight="16px"
109120
leftIcon={lIcon}
121+
rightIcon={rIcon}
110122
m={m}
111123
onClick={onClick}
112124
onMouseEnter={onMouseEnter}
113125
onMouseLeave={onMouseLeave}
126+
paddingTop={vars('space-xxs')}
127+
paddingBottom={vars('space-xxs')}
128+
paddingLeft={vars('space-xs')}
129+
paddingRight={vars('space-xs')}
130+
textDecorationLine="underline"
114131
_hover={{
115132
color: `${blue}`,
116133
}}

0 commit comments

Comments
 (0)