🎨 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:
google-labs-jules[bot]
2026-01-27 01:42:19 +00:00
parent 9223331ee9
commit 6d94ac7b93
4 changed files with 42 additions and 4 deletions

View File

@@ -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();
});
});