🎨 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:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user