From f57437209df3f35901cbb33045f9143285e39268 Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Wed, 16 Oct 2024 10:41:55 -0700
Subject: [PATCH] Add support for `aria-disabled` in `Button` (#5126)

* add support for aria-disabled

* fix

* Create grumpy-hairs-look.md
---
 .changeset/grumpy-hairs-look.md                |  5 +++++
 packages/react/src/Button/Button.stories.tsx   |  6 ++++++
 .../react/src/Button/ButtonBase.module.css     | 18 ++++++++++++------
 3 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/grumpy-hairs-look.md

diff --git a/.changeset/grumpy-hairs-look.md b/.changeset/grumpy-hairs-look.md
new file mode 100644
index 00000000000..d48e0603b40
--- /dev/null
+++ b/.changeset/grumpy-hairs-look.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add support for `aria-disabled` in `Button`
diff --git a/packages/react/src/Button/Button.stories.tsx b/packages/react/src/Button/Button.stories.tsx
index ce55f4fcbdb..975b46910da 100644
--- a/packages/react/src/Button/Button.stories.tsx
+++ b/packages/react/src/Button/Button.stories.tsx
@@ -26,6 +26,11 @@ Playground.argTypes = {
       type: 'boolean',
     },
   },
+  'aria-disabled': {
+    control: {
+      type: 'boolean',
+    },
+  },
   inactive: {
     control: {
       type: 'boolean',
@@ -79,6 +84,7 @@ Playground.args = {
   leadingVisual: null,
   trailingAction: null,
   labelWrap: false,
+  'aria-disabled': false,
 }
 
 export const Default = () => <Button>Default</Button>
diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css
index f4bfb4d1dc1..d3f531f47a3 100644
--- a/packages/react/src/Button/ButtonBase.module.css
+++ b/packages/react/src/Button/ButtonBase.module.css
@@ -36,7 +36,8 @@
     transition: none;
   }
 
-  &:disabled {
+  &:disabled,
+  &[aria-disabled='true']:not([data-loading='true']) {
     cursor: not-allowed;
     box-shadow: none;
 
@@ -263,7 +264,8 @@
       border-color: var(--button-default-borderColor-active);
     }
 
-    &:disabled {
+    &:disabled,
+    &[aria-disabled='true']:not([data-loading='true']) {
       color: var(--control-fgColor-disabled);
       background-color: var(--button-default-bgColor-disabled);
       border-color: var(--button-default-borderColor-disabled);
@@ -306,7 +308,8 @@
       box-shadow: var(--button-primary-shadow-selected);
     }
 
-    &:disabled {
+    &:disabled,
+    &[aria-disabled='true']:not([data-loading='true']) {
       color: var(--button-primary-fgColor-disabled);
       background-color: var(--button-primary-bgColor-disabled);
       border-color: var(--button-primary-borderColor-disabled);
@@ -374,7 +377,8 @@
       }
     }
 
-    &:disabled {
+    &:disabled,
+    &[aria-disabled='true']:not([data-loading='true']) {
       color: var(--button-danger-fgColor-disabled);
       background-color: var(--button-danger-bgColor-disabled);
       border-color: var(--button-default-borderColor-disabled);
@@ -423,7 +427,8 @@
       }
     }
 
-    &:disabled {
+    &:disabled,
+    &[aria-disabled='true']:not([data-loading='true']) {
       color: var(--button-invisible-fgColor-disabled);
       background-color: var(--button-invisible-bgColor-disabled);
       border-color: var(--button-invisible-borderColor-disabled);
@@ -464,7 +469,8 @@
       outline-offset: 2px;
     }
 
-    &:disabled {
+    &:disabled,
+    &[aria-disabled='true']:not([data-loading='true']) {
       color: var(--control-fgColor-disabled);
       background-color: transparent;
       border-color: transparent;