🎨 Palette: Improve Button loading state accessibility
- Add `aria-busy` attribute to Button when loading. - Refactor Button rendering to keep children in DOM (visually hidden) instead of unmounting. - Fix layout shift regression by replicating flex properties in content wrapper. - Move inline styles to CSS modules. - Add tests for loading state accessibility. Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
This commit is contained in:
@@ -19,4 +19,13 @@ describe('Button', () => {
|
||||
const button = screen.getByTestId('custom-button');
|
||||
expect(button).toBeTruthy();
|
||||
});
|
||||
|
||||
it('renders loading state correctly', () => {
|
||||
render(<Button isLoading>Submit</Button>);
|
||||
const button = screen.getByRole('button', { name: /submit/i }) as HTMLButtonElement;
|
||||
expect(button.getAttribute('aria-busy')).toBe('true');
|
||||
expect(button.disabled).toBe(true);
|
||||
// Verify text is present (opacity: 0 doesn't remove from DOM)
|
||||
expect(screen.getByText('Submit')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user