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

* fix(Button): replace disabled for a11y attribute aria-disabled * fix(Button): fix Stylelint * fix(Button): fix Savut comment * fix(Button): fix lint
kronostechnologies · Jul 23, 2024 · b724b3f · b724b3f
1 parent a4c1519
commit b724b3f
Show file tree

Hide file tree

Showing 23 changed files with 259 additions and 123 deletions.
diff --git a/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap b/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap
@@ -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 {
@@ -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 {
@@ -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 {

diff --git a/packages/react/src/components/buttons/abstract-button.tsx b/packages/react/src/components/buttons/abstract-button.tsx
@@ -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,'}

diff --git a/packages/react/src/components/buttons/button.test.tsx.snap b/packages/react/src/components/buttons/button.test.tsx.snap
@@ -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;
@@ -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;
@@ -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
@@ -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;
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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

diff --git a/packages/react/src/components/buttons/button.tsx b/packages/react/src/components/buttons/button.tsx
@@ -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}
@@ -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}