fix: use same style for aria-disabled buttons as disabled

packages/button/README.md

@@ -6,6 +6,7 @@
 1. [Button circle](#button-circle)
 1. [Button with left icon](#button-with-left-icon)
 1. [Button with right icon](#button-with-right-icon)
+1. [Disabled Button](#disabled-button)
 
 ## Installation
 
@@ -76,3 +77,38 @@ const RightIconButton = () => (
 );
 export default RightIconButton;
 ```
+
+## Disabled Button
+
+For a better accessibility (users to have focus on disabled buttons), you should use the aria-disabled attribute instead of the disabled attribute.
+
+```javascript
+const DisabledButton = () => (
+  <Button classModifier="disabled" aria-disabled>
+    Lorem Ipsum
+    <i className="glyphicon glyphicon-arrowthin-right" />
+  </Button>
+);
+export default DisabledButton;
+```
+
+Be careful that using the aria-disabled attribute will not disable the button, so you have to handle the disabled state inside your onClick or onSubmit function.
+
+```javascript
+const disabledButton = true;
+
+<form
+  onSubmit={event => {
+    event?.preventDefault();
+    if (!disabledButton) {
+      // call function
+    }
+  }}>
+  <Button classModifier="disabled" aria-disabled={disabledButton}>
+    Lorem Ipsum
+    <i className="glyphicon glyphicon-arrowthin-right" />
+  </Button>
+</form>
+);
+export default DisabledButton;
+```

packages/button/src/Button.stories.tsx

@@ -76,7 +76,7 @@ ButtonSmallStory.args = {
 export const ButtonDisabledStory: Story<ButtonProps> = Template.bind({});
 ButtonDisabledStory.storyName = 'Button disabled';
 ButtonDisabledStory.args = {
-  disabled: true,
+  'aria-disabled': true,
   classModifier: 'disabled',
   children: <span className="af-btn__text">Button disabled</span>,
 };

packages/button/src/button.scss

@@ -83,6 +83,11 @@ $active-sort-table-th: $color-table-sorting !default;
     }
   }
 
+  &[aria-disabled='true'] {
+    /* cursor:pointer set by bootstrap reset needs to be ovveride */
+    cursor: not-allowed;
+  }
+
   &--success {
     background-color: $color-btn-success;
     box-shadow: inset 0 -3px $color-btn-success-dark;