Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(Button): replace disabled for a11y attribute aria-disabled #950

Merged
merged 4 commits into from
Jul 23, 2024
Merged

fix(Button): replace disabled for a11y attribute aria-disabled #950

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a97e19a
fix(Button): replace disabled for a11y attribute aria-disabled
LarryMatte Jul 22, 2024
849108b
fix(Button): fix Stylelint
LarryMatte Jul 22, 2024
6fa07ed
fix(Button): fix Savut comment
LarryMatte Jul 22, 2024
1bbde33
fix(Button): fix lint
LarryMatte Jul 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,10 +84,11 @@ exports[`BentoMenuButton Matches Snapshot (productGroups and externalLinks) 1`]
color: #FFFFFF;
}

.c3:disabled {
.c3[aria-disabled='true'] {
background-color: transparent;
border-color: transparent;
color: #006296;
cursor: not-allowed;
}

.c3 > svg {
Expand Down Expand Up @@ -904,10 +905,11 @@ exports[`BentoMenuButton Matches Snapshot (productLinks and externalLinks) 1`] =
color: #FFFFFF;
}

.c3:disabled {
.c3[aria-disabled='true'] {
background-color: transparent;
border-color: transparent;
color: #006296;
cursor: not-allowed;
}

.c3 > svg {
Expand Down Expand Up @@ -1636,10 +1638,11 @@ exports[`BentoMenuButton Matches Snapshot (tag="nav") 1`] = `
color: #FFFFFF;
}

.c3:disabled {
.c3[aria-disabled='true'] {
background-color: transparent;
border-color: transparent;
color: #006296;
cursor: not-allowed;
}

.c3 > svg {
Expand Down
3 changes: 2 additions & 1 deletion packages/react/src/components/buttons/abstract-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,10 +121,11 @@ const getButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemePr
color: ${theme.component[`button-${buttonType}${inversionSuffix}-hover-text-color`]};
}

&:disabled {
&[aria-disabled='true'] {
background-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-background-color`]};
border-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-border-color`]};
color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-text-color`]};
cursor: not-allowed;
${buttonType === 'destructive-primary' && css`
&,
${focusable !== false && '&:focus,'}
Expand Down
65 changes: 40 additions & 25 deletions packages/react/src/components/buttons/button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,15 +82,16 @@ exports[`Button has destructive styles (inverted) 1`] = `
color: #7B1A15;
}

.c1:disabled {
.c1[aria-disabled='true'] {
background-color: #FFFFFF;
border-color: #FFFFFF;
color: #F99D99;
cursor: not-allowed;
}

.c1:disabled,
.c1:disabled:focus,
.c1:disabled:hover {
.c1[aria-disabled='true'],
.c1[aria-disabled='true']:focus,
.c1[aria-disabled='true']:hover {
background-color: #FFFFFF;
border-color: #FFFFFF;
color: #F99D99;
Expand Down Expand Up @@ -186,15 +187,16 @@ exports[`Button has destructive styles 1`] = `
color: #FFFFFF;
}

.c1:disabled {
.c1[aria-disabled='true'] {
background-color: #F99D99;
border-color: #F99D99;
color: #FFFFFF;
cursor: not-allowed;
}

.c1:disabled,
.c1:disabled:focus,
.c1:disabled:hover {
.c1[aria-disabled='true'],
.c1[aria-disabled='true']:focus,
.c1[aria-disabled='true']:hover {
background-color: #F99D99;
border-color: #F99D99;
color: #FFFFFF;
Expand Down Expand Up @@ -290,10 +292,11 @@ exports[`Button has destructive-secondary styles (inverted) 1`] = `
color: #7B1A15;
}

.c1:disabled {
.c1[aria-disabled='true'] {
background-color: transparent;
border-color: #F99D99;
color: #F99D99;
cursor: not-allowed;
}

<button
Expand Down Expand Up @@ -386,15 +389,16 @@ exports[`Button has destructive-secondary styles 1`] = `
color: #FFFFFF;
}

.c1:disabled {
.c1[aria-disabled='true'] {
background-color: #F99D99;
border-color: #F99D99;
color: #FFFFFF;
cursor: not-allowed;
}

.c1:disabled,
.c1:disabled:focus,
.c1:disabled:hover {
.c1[aria-disabled='true'],
.c1[aria-disabled='true']:focus,
.c1[aria-disabled='true']:hover {
background-color: #F99D99;
border-color: #F99D99;
color: #FFFFFF;
Expand Down Expand Up @@ -498,10 +502,11 @@ exports[`Button has left and right icons 1`] = `
color: #FFFFFF;
}

.c1:disabled {
.c1[aria-disabled='true'] {
background-color: #84C6EA;
border-color: #84C6EA;
color: #FFFFFF;
cursor: not-allowed;
}

<button
Expand Down Expand Up @@ -612,10 +617,11 @@ exports[`Button has mobile styles 1`] = `
color: #FFFFFF;
}

.c1:disabled {
.c1[aria-disabled='true'] {
background-color: #84C6EA;
border-color: #84C6EA;
color: #FFFFFF;
cursor: not-allowed;
}

<button
Expand Down Expand Up @@ -708,15 +714,16 @@ exports[`Button has primary disabled styles 1`] = `
color: #FFFFFF;
}

.c1:disabled {
.c1[aria-disabled='true'] {
background-color: #84C6EA;
border-color: #84C6EA;
color: #FFFFFF;
cursor: not-allowed;
}

<button
aria-disabled="true"
class="c0 c1"
disabled=""
type="button"
>
Primary Button
Expand Down Expand Up @@ -805,10 +812,11 @@ exports[`Button has primary styles (inverted) 1`] = `
color: #003A5A;
}

.c1:disabled {
.c1[aria-disabled='true'] {
background-color: #006296;
border-color: #006296;
color: #84C6EA;
cursor: not-allowed;
}

<button
Expand Down Expand Up @@ -901,10 +909,11 @@ exports[`Button has primary styles 1`] = `
color: #FFFFFF;
}

.c1:disabled {
.c1[aria-disabled='true'] {
background-color: #84C6EA;
border-color: #84C6EA;
color: #FFFFFF;
cursor: not-allowed;
}

<button
Expand Down Expand Up @@ -997,10 +1006,11 @@ exports[`Button has secondary styles (inverted) 1`] = `
color: #84C6EA;
}

.c1:disabled {
.c1[aria-disabled='true'] {
background-color: transparent;
border-color: #006296;
color: #006296;
cursor: not-allowed;
}

<button
Expand Down Expand Up @@ -1093,10 +1103,11 @@ exports[`Button has secondary styles 1`] = `
color: #003A5A;
}

.c1:disabled {
.c1[aria-disabled='true'] {
background-color: transparent;
border-color: #84C6EA;
color: #84C6EA;
cursor: not-allowed;
}

<button
Expand Down Expand Up @@ -1189,10 +1200,11 @@ exports[`Button has small styles 1`] = `
color: #FFFFFF;
}

.c1:disabled {
.c1[aria-disabled='true'] {
background-color: #84C6EA;
border-color: #84C6EA;
color: #FFFFFF;
cursor: not-allowed;
}

<button
Expand Down Expand Up @@ -1285,10 +1297,11 @@ exports[`Button has small styles on mobile 1`] = `
color: #FFFFFF;
}

.c1:disabled {
.c1[aria-disabled='true'] {
background-color: #84C6EA;
border-color: #84C6EA;
color: #FFFFFF;
cursor: not-allowed;
}

<button
Expand Down Expand Up @@ -1381,10 +1394,11 @@ exports[`Button has tertiary styles (inverted) 1`] = `
color: #FFFFFF;
}

.c1:disabled {
.c1[aria-disabled='true'] {
background-color: transparent;
border-color: transparent;
color: #006296;
cursor: not-allowed;
}

<button
Expand Down Expand Up @@ -1477,10 +1491,11 @@ exports[`Button has tertiary styles 1`] = `
color: #000000;
}

.c1:disabled {
.c1[aria-disabled='true'] {
background-color: transparent;
border-color: transparent;
color: #B7BBC2;
cursor: not-allowed;
}

<button
Expand Down
24 changes: 21 additions & 3 deletions packages/react/src/components/buttons/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,24 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
const { isMobile } = useDeviceContext();
const iconSize = props?.size === 'small' && !isMobile ? '16' : '24';

const handleClick = (event: MouseEvent<HTMLButtonElement>): void => {
if (disabled) {
event.preventDefault();
event.stopPropagation();
} else if (onClick) {
onClick(event);
}
};

const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {
if (disabled) {
event.preventDefault();
event.stopPropagation();
} else if (onKeyDown) {
onKeyDown(event);
}
};

return (
<StyledButton
autoFocus={autofocus}
Expand All @@ -95,12 +113,12 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
type={type}
buttonType={buttonType}
className={className}
disabled={disabled}
aria-disabled={disabled ? 'true' : undefined}
focusable={focusable}
onClick={onClick}
onClick={handleClick}
onFocus={onFocus}
onBlur={onBlur}
onKeyDown={onKeyDown}
onKeyDown={handleKeyDown}
{...props /* eslint-disable-line react/jsx-props-no-spreading *//* To spread aria-* and data-* */}
>
{children}
Expand Down
Loading
Loading