fix(link, button): cursor is 'not-allowed' when disabled and loading (#…

…1373)

* fix(button): remove ARIA of the button component

* fix(link): tabIndex is -1 when disabled

* fix(link, button): cursor is 'not-allowed' when disabled and loading

* fix(button): disabled is true when loading

src/button/Button.tsx

@@ -9,7 +9,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     type = 'primary',
     size = 'normal',
     loading = false,
-    disabled: disabledProp = false,
+    disabled = false,
     htmlType = 'button',
     prefix,
     suffix,
@@ -23,6 +23,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     [`${prefixCls}_${type}`]: type,
     [`${prefixCls}_${size}`]: size,
     [`${prefixCls}_loading`]: loading,
+    [`${prefixCls}_disabled`]: disabled,
   });
 
   const prefixIcon = loading ? (
@@ -35,22 +36,14 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
 
   const suffixIcon = suffix && <span className={`${prefixCls}-suffix-icon`}>{suffix}</span>;
 
-  const disabled = disabledProp || loading;
-
-  const other: typeof restProps = {
-    role: 'button',
-    'aria-disabled': disabled,
-  };
-
   return (
     <button
       ref={ref}
       // eslint-disable-next-line react/button-has-type
       type={htmlType}
       className={classes}
-      disabled={disabled}
+      disabled={disabled || loading}
       data-testid="button"
-      {...other}
       {...restProps}
     >
       {prefixIcon}

src/button/style/index.less

@@ -39,13 +39,13 @@
     &:disabled:not(.@{button-prefix-cls}_loading) {
       color: @gray-3;
       background-color: @gray-1;
-      cursor: auto;
+      cursor: not-allowed;
       .elevation(none);
     }
 
     &.@{button-prefix-cls}_loading {
       background-color: @blue-3;
-      cursor: auto;
+      cursor: not-allowed;
       .elevation(2);
     }
   }
@@ -63,13 +63,13 @@
     &:disabled:not(.@{button-prefix-cls}_loading) {
       color: @gray-3;
       background-color: transparent;
-      cursor: auto;
+      cursor: not-allowed;
     }
 
     &.@{button-prefix-cls}_loading {
       color: @blue-3;
       background-color: @gray-1;
-      cursor: auto;
+      cursor: not-allowed;
     }
   }
 
@@ -85,12 +85,12 @@
     &:disabled:not(.@{button-prefix-cls}_loading) {
       color: @gray-3;
       background-color: transparent;
-      cursor: auto;
+      cursor: not-allowed;
     }
     &.@{button-prefix-cls}_loading {
       color: @blue-3;
       background-color: @gray-1;
-      cursor: auto;
+      cursor: not-allowed;
     }
   }
 

src/link/Link.tsx

@@ -5,11 +5,11 @@ import usePrefixCls from '../utils/hooks/use-prefix-cls';
 import { LinkProps } from './interface';
 
 const Link = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
-  const { className, children, prefix, loading = false, disabled = false, ...restProps } = props;
+  const { className, children, prefix, loading = false, disabled: disabledProp = false, ...restProps } = props;
 
   const prefixCls = usePrefixCls('link');
   const classes = classNames([prefixCls, className], {
-    [`${prefixCls}_disabled`]: disabled,
+    [`${prefixCls}_disabled`]: disabledProp,
     [`${prefixCls}_loading`]: loading,
   });
 
@@ -21,8 +21,17 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
     prefix && <span className={`${prefixCls}-prefix-icon`}>{prefix}</span>
   );
 
+  const disabled = disabledProp || loading;
+
   return (
-    <a className={classes} ref={ref} aria-disabled={disabled || loading} data-testid="link" {...restProps}>
+    <a
+      className={classes}
+      ref={ref}
+      aria-disabled={disabled}
+      tabIndex={disabled ? -1 : 0}
+      data-testid="link"
+      {...restProps}
+    >
       {prefixIcon}
       {children}
     </a>

src/link/style/index.less

@@ -19,12 +19,18 @@
 
   &_loading {
     color: @blue-3;
-    pointer-events: none;
+    cursor: not-allowed;
+    &:active {
+      pointer-events: none;
+    }
   }
 
   &[aria-disabled='true']:not(&_loading) {
     color: @gray-3;
-    pointer-events: none;
+    cursor: not-allowed;
+    &:active {
+      pointer-events: none;
+    }
   }
 
   &-prefix-icon {