diff --git a/.changeset/beige-moles-glow.md b/.changeset/beige-moles-glow.md new file mode 100644 index 0000000000..75abe5aa08 --- /dev/null +++ b/.changeset/beige-moles-glow.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': patch +--- + +Fixed the conditional rendering of aria attributes in loading buttons. diff --git a/packages/circuit-ui/components/Button/Button.spec.tsx b/packages/circuit-ui/components/Button/Button.spec.tsx index 4f32759e22..272ec89c6a 100644 --- a/packages/circuit-ui/components/Button/Button.spec.tsx +++ b/packages/circuit-ui/components/Button/Button.spec.tsx @@ -206,5 +206,27 @@ describe('Button', () => { const actual = await axe(wrapper); expect(actual).toHaveNoViolations(); }); + + it('should have aria-busy and aria-live for a loading button', () => { + const { getByRole } = renderButton(render, { + ...baseProps, + isLoading: true, + loadingLabel: 'Loading...', + }); + const button = getByRole('button'); + + expect(button).toHaveAttribute('aria-live', 'polite'); + expect(button).toHaveAttribute('aria-busy', 'true'); + }); + + it('should not have aria-busy and aria-live for a regular button', () => { + const { getByRole } = renderButton(render, { + ...baseProps, + }); + const button = getByRole('button'); + + expect(button).not.toHaveAttribute('aria-live'); + expect(button).not.toHaveAttribute('aria-busy'); + }); }); }); diff --git a/packages/circuit-ui/components/Button/Button.tsx b/packages/circuit-ui/components/Button/Button.tsx index 17217f8f53..944ae0af03 100644 --- a/packages/circuit-ui/components/Button/Button.tsx +++ b/packages/circuit-ui/components/Button/Button.tsx @@ -372,10 +372,11 @@ export const Button = forwardRef( return (