From fb4c4857b26a09f4db712b2815ce73b6bfe1efe9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Tue, 19 Dec 2023 13:26:11 +0100 Subject: [PATCH] Revert "Revert the Button's disabled state (#2340)" This reverts commit 3361c45afadf9148d35f4ffd95705491ecd56c54. --- .changeset/cold-buses-fail.md | 2 +- .changeset/old-schools-walk.md | 2 +- .changeset/orange-squids-hammer.md | 5 +++++ packages/circuit-ui/components/Button/base.module.css | 3 --- packages/circuit-ui/components/Button/base.spec.tsx | 2 -- packages/circuit-ui/components/Button/base.tsx | 4 ---- 6 files changed, 7 insertions(+), 11 deletions(-) create mode 100644 .changeset/orange-squids-hammer.md diff --git a/.changeset/cold-buses-fail.md b/.changeset/cold-buses-fail.md index 8d0b2ecafe..ea26ac91a7 100644 --- a/.changeset/cold-buses-fail.md +++ b/.changeset/cold-buses-fail.md @@ -1,5 +1,5 @@ --- -'@sumup/circuit-ui': minor +'@sumup/circuit-ui': major --- Changed the NotificationInline's action from the Button to the Anchor component. Update the action props if necessary. diff --git a/.changeset/old-schools-walk.md b/.changeset/old-schools-walk.md index cd4b12ffdb..dda83c13df 100644 --- a/.changeset/old-schools-walk.md +++ b/.changeset/old-schools-walk.md @@ -1,5 +1,5 @@ --- -'@sumup/circuit-ui': minor +'@sumup/circuit-ui': major --- Changed the default size of the CloseButton from 40px to 48px to match the Button component. diff --git a/.changeset/orange-squids-hammer.md b/.changeset/orange-squids-hammer.md new file mode 100644 index 0000000000..eac92e7b48 --- /dev/null +++ b/.changeset/orange-squids-hammer.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': major +--- + +Improved the accessibility of disabled Buttons. The `disabled` attribute has been replaced with the `aria-disabled` attribute which enables the disabled element to receive focus and be perceived by screenreader users. Interactions with the disabled element are blocked by a dummy click handler. diff --git a/packages/circuit-ui/components/Button/base.module.css b/packages/circuit-ui/components/Button/base.module.css index b67066ef33..283e95a081 100644 --- a/packages/circuit-ui/components/Button/base.module.css +++ b/packages/circuit-ui/components/Button/base.module.css @@ -204,9 +204,6 @@ .base[disabled], .base[aria-disabled="true"] { color: var(--cui-fg-normal-disabled); - - /* TODO: Remove in the next major version */ - pointer-events: none; cursor: not-allowed; background-color: var(--cui-bg-highlight-disabled); border-color: transparent; diff --git a/packages/circuit-ui/components/Button/base.spec.tsx b/packages/circuit-ui/components/Button/base.spec.tsx index 4b177fa700..9d3a3515e1 100644 --- a/packages/circuit-ui/components/Button/base.spec.tsx +++ b/packages/circuit-ui/components/Button/base.spec.tsx @@ -72,7 +72,6 @@ describe('Button', () => { const button = screen.getByRole('button'); - expect(button).toBeDisabled(); expect(button).toHaveAttribute('aria-disabled', 'true'); }); @@ -81,7 +80,6 @@ describe('Button', () => { const button = screen.getByRole('button'); - expect(button).toBeDisabled(); expect(button).toHaveAttribute('aria-disabled', 'true'); }); diff --git a/packages/circuit-ui/components/Button/base.tsx b/packages/circuit-ui/components/Button/base.tsx index ed3e3aa71f..54a2852de0 100644 --- a/packages/circuit-ui/components/Button/base.tsx +++ b/packages/circuit-ui/components/Button/base.tsx @@ -190,10 +190,6 @@ export function createButtonComponent( 'aria-live': 'polite', 'aria-busy': Boolean(isLoading), })} - // TODO: Remove in the next major version - {...(!isLink && { - disabled: isDisabled, - })} {...(isDisabled && { 'aria-disabled': true, })}