@iroco/ui 1.15.2 → 1.15.3
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.
|
@@ -19,6 +19,9 @@
|
|
|
19
19
|
readonly?: boolean;
|
|
20
20
|
border?: boolean;
|
|
21
21
|
oninput?: FormEventHandler<HTMLInputElement> | null | undefined;
|
|
22
|
+
showPasswordAriaLabel?: string | null;
|
|
23
|
+
passwordShownAriaLive?: string | null;
|
|
24
|
+
passwordHiddenAriaLive?: string | null;
|
|
22
25
|
}
|
|
23
26
|
|
|
24
27
|
let {
|
|
@@ -36,14 +39,24 @@
|
|
|
36
39
|
border = false,
|
|
37
40
|
autocomplete = 'on',
|
|
38
41
|
oninput,
|
|
42
|
+
showPasswordAriaLabel = 'Show password',
|
|
43
|
+
passwordShownAriaLive = 'password visible',
|
|
44
|
+
passwordHiddenAriaLive = 'password hidden',
|
|
45
|
+
|
|
39
46
|
...rest
|
|
40
47
|
}: Props = $props();
|
|
41
48
|
|
|
42
|
-
|
|
43
|
-
|
|
49
|
+
const HANDLED_KEYS = new Set(['Space', 'Enter']);
|
|
50
|
+
|
|
51
|
+
let passwordShown = $state(false);
|
|
52
|
+
let fieldType: 'password' | 'text' = $derived(passwordShown ? 'text' : 'password');
|
|
53
|
+
|
|
54
|
+
function showPassword() {
|
|
55
|
+
passwordShown = true;
|
|
56
|
+
}
|
|
44
57
|
|
|
45
|
-
function
|
|
46
|
-
|
|
58
|
+
function hidePassword() {
|
|
59
|
+
passwordShown = false;
|
|
47
60
|
}
|
|
48
61
|
|
|
49
62
|
function hasErrors() {
|
|
@@ -74,12 +87,21 @@
|
|
|
74
87
|
/>
|
|
75
88
|
<button
|
|
76
89
|
type="button"
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
90
|
+
onpointerdown={showPassword}
|
|
91
|
+
onpointerup={hidePassword}
|
|
92
|
+
onpointerleave={hidePassword}
|
|
93
|
+
onpointercancel={hidePassword}
|
|
94
|
+
onkeydown={(e) => HANDLED_KEYS.has(e.code) && showPassword()}
|
|
95
|
+
onkeyup={(e) => HANDLED_KEYS.has(e.code) && hidePassword()}
|
|
96
|
+
onblur={hidePassword}
|
|
97
|
+
aria-label={showPasswordAriaLabel}
|
|
98
|
+
aria-pressed={passwordShown}
|
|
80
99
|
>
|
|
81
100
|
<Icon data={eye} />
|
|
82
101
|
</button>
|
|
102
|
+
<div class="password-aria-live" aria-live="assertive">
|
|
103
|
+
{passwordShown ? passwordShownAriaLive : passwordHiddenAriaLive}
|
|
104
|
+
</div>
|
|
83
105
|
</div>
|
|
84
106
|
{#if error != null}
|
|
85
107
|
<p data-testid="error" class="error">
|
|
@@ -304,4 +326,9 @@
|
|
|
304
326
|
display: flex;
|
|
305
327
|
align-items: center;
|
|
306
328
|
color: var(--color-foreground);
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.password-aria-live {
|
|
332
|
+
width: 0;
|
|
333
|
+
overflow: hidden;
|
|
307
334
|
}</style>
|
|
@@ -17,6 +17,9 @@ interface Props extends HTMLInputAttributes {
|
|
|
17
17
|
readonly?: boolean;
|
|
18
18
|
border?: boolean;
|
|
19
19
|
oninput?: FormEventHandler<HTMLInputElement> | null | undefined;
|
|
20
|
+
showPasswordAriaLabel?: string | null;
|
|
21
|
+
passwordShownAriaLive?: string | null;
|
|
22
|
+
passwordHiddenAriaLive?: string | null;
|
|
20
23
|
}
|
|
21
24
|
declare const PasswordInput: import("svelte").Component<Props, {}, "value">;
|
|
22
25
|
type PasswordInput = ReturnType<typeof PasswordInput>;
|