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 = () => 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;