🎨 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

@@ -24,14 +24,18 @@ export function Button({
type={type}
className={`${styles.button} ${styles[variant]} ${styles[size]} ${className || ''}`}
disabled={disabled || isLoading}
aria-busy={isLoading}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
{...props}
>
{isLoading ? (
<span className={styles.loader} />
) : (
children
<span className={`${styles.content} ${isLoading ? styles.contentHidden : ''}`}>
{children}
</span>
{isLoading && (
<span className={styles.loaderWrapper} aria-hidden="true">
<span className={styles.loader} />
</span>
)}
</motion.button>
);