From 4e68b18e652ab6de2667fa3c91866ed5b10d3f1c Mon Sep 17 00:00:00 2001
From: Martin Stievenart <stievenart.m@gmail.com>
Date: Wed, 27 Dec 2023 12:00:45 +0100
Subject: [PATCH] fix: use same style for aria-disabled buttons as disabled

---
 packages/button/README.md              | 36 ++++++++++++++++++++++++++
 packages/button/src/Button.stories.tsx |  2 +-
 packages/button/src/button.scss        |  5 ++++
 3 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/packages/button/README.md b/packages/button/README.md
index dc6a49d9e..2ae15d2e3 100644
--- a/packages/button/README.md
+++ b/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;
+```
diff --git a/packages/button/src/Button.stories.tsx b/packages/button/src/Button.stories.tsx
index 5d6af3a11..cb0f0a86b 100644
--- a/packages/button/src/Button.stories.tsx
+++ b/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>,
 };
diff --git a/packages/button/src/button.scss b/packages/button/src/button.scss
index fb85291c0..6fe3b6db1 100644
--- a/packages/button/src/button.scss
+++ b/packages/button/src/button.scss
@@ -18,6 +18,11 @@ $active-sort-table-th: $color-table-sorting !default;
   }
 }
 
+button[aria-disabled='true'] {
+  /* cursor:pointer set by bootstrap reset needs to be ovveride */
+  cursor: not-allowed !important;
+}
+
 .af-btn {
   font-family: $font-family-base;
   background-color: $color-azur;