Make disabled button component more accessible through aria-disabled (#…

…509)
Doist · Apr 28, 2021 · 7461c9c · 7461c9c
1 parent c1421a4
commit 7461c9c
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/src/components/button/button.less b/src/components/button/button.less
@@ -8,7 +8,7 @@
     background-color: transparent;
     padding: 0;
 
-    &:disabled {
+    &[aria-disabled='true'] {
         opacity: 0.4;
         cursor: not-allowed;
     }

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -64,8 +64,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
             ref={ref}
             type={type}
             className={className}
-            disabled={disabled || loading}
-            onClick={onClick}
+            aria-disabled={disabled || loading}
+            onClick={disabled || loading ? undefined : onClick}
         >
             {children}
         </button>

diff --git a/src/components/dropdown/__snapshots__/dropdown.test.tsx.snap b/src/components/dropdown/__snapshots__/dropdown.test.tsx.snap
@@ -102,8 +102,8 @@ exports[`Dropdown Dropdown.Box renders the Body component first when top prop is
         size="default"
       >
         <button
+          aria-disabled={false}
           className="reactist_button trigger"
-          disabled={false}
           onClick={[Function]}
           type="button"
         />
@@ -134,8 +134,8 @@ exports[`Dropdown Dropdown.Box renders the Trigger component first when top prop
         size="default"
       >
         <button
+          aria-disabled={false}
           className="reactist_button trigger"
-          disabled={false}
           onClick={[Function]}
           type="button"
         />
@@ -192,8 +192,8 @@ exports[`Dropdown Dropdown.Box renders the Trigger component without crashing 1`
         size="default"
       >
         <button
+          aria-disabled={false}
           className="reactist_button trigger"
-          disabled={false}
           onClick={[Function]}
           type="button"
         />