@joewinke/jatui 0.16.0 → 0.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -24,6 +24,13 @@
|
|
|
24
24
|
* Error auto-returns to idle after the shake animation completes.
|
|
25
25
|
*/
|
|
26
26
|
state?: SubmitState;
|
|
27
|
+
/**
|
|
28
|
+
* Toggle-button semantics. When provided, renders `aria-pressed="true"|"false"`
|
|
29
|
+
* so assistive tech announces an on/off toggle (like, subscribe, bold).
|
|
30
|
+
* Omit it for an ordinary button — no `aria-pressed` is rendered.
|
|
31
|
+
* Purely semantic: it adds no styling; pick `variant` from the same state.
|
|
32
|
+
*/
|
|
33
|
+
pressed?: boolean;
|
|
27
34
|
class?: string;
|
|
28
35
|
onclick?: (e: MouseEvent) => void;
|
|
29
36
|
children?: import('svelte').Snippet;
|
|
@@ -38,6 +45,7 @@
|
|
|
38
45
|
loading = false,
|
|
39
46
|
success = false,
|
|
40
47
|
state: submitStateProp = 'idle',
|
|
48
|
+
pressed,
|
|
41
49
|
class: className = '',
|
|
42
50
|
onclick,
|
|
43
51
|
children
|
|
@@ -54,6 +62,9 @@
|
|
|
54
62
|
const isSuccess = $derived(effectiveState === 'success');
|
|
55
63
|
const isError = $derived(effectiveState === 'error');
|
|
56
64
|
|
|
65
|
+
// Only a provided boolean becomes aria-pressed; undefined omits the attribute.
|
|
66
|
+
const ariaPressed = $derived(pressed === undefined ? undefined : pressed ? 'true' : 'false');
|
|
67
|
+
|
|
57
68
|
const variantClass = $derived(
|
|
58
69
|
{
|
|
59
70
|
primary: 'btn-primary',
|
|
@@ -117,7 +128,7 @@
|
|
|
117
128
|
</script>
|
|
118
129
|
|
|
119
130
|
{#if href}
|
|
120
|
-
<a {href} class={buttonClass} role="button" tabindex="0">
|
|
131
|
+
<a {href} class={buttonClass} role="button" tabindex="0" aria-pressed={ariaPressed}>
|
|
121
132
|
{#if children}{@render children()}{/if}
|
|
122
133
|
</a>
|
|
123
134
|
{:else}
|
|
@@ -126,6 +137,7 @@
|
|
|
126
137
|
{type}
|
|
127
138
|
disabled={disabled || isLoading}
|
|
128
139
|
aria-busy={isLoading || undefined}
|
|
140
|
+
aria-pressed={ariaPressed}
|
|
129
141
|
class={buttonClass}
|
|
130
142
|
{onclick}
|
|
131
143
|
onanimationend={onShakeEnd}
|
|
@@ -21,6 +21,13 @@ interface Props {
|
|
|
21
21
|
* Error auto-returns to idle after the shake animation completes.
|
|
22
22
|
*/
|
|
23
23
|
state?: SubmitState;
|
|
24
|
+
/**
|
|
25
|
+
* Toggle-button semantics. When provided, renders `aria-pressed="true"|"false"`
|
|
26
|
+
* so assistive tech announces an on/off toggle (like, subscribe, bold).
|
|
27
|
+
* Omit it for an ordinary button — no `aria-pressed` is rendered.
|
|
28
|
+
* Purely semantic: it adds no styling; pick `variant` from the same state.
|
|
29
|
+
*/
|
|
30
|
+
pressed?: boolean;
|
|
24
31
|
class?: string;
|
|
25
32
|
onclick?: (e: MouseEvent) => void;
|
|
26
33
|
children?: import('svelte').Snippet;
|