Add support for aria-disabled in Button (#5126)

* add support for aria-disabled * fix * Create grumpy-hairs-look.md
primer · Oct 16, 2024 · f574372 · f574372
1 parent c1e27c3
commit f574372
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/.changeset/grumpy-hairs-look.md 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
@@ -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
@@ -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;