Skip to content

Commit 7a6445f

Browse files
committed
fix(decrypt-progress): add ARIA progressbar semantics for WCAG AA
1 parent 86dede6 commit 7a6445f

1 file changed

Lines changed: 23 additions & 6 deletions

File tree

src/lib/components/filesharing/DecryptionProgress.svelte

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,36 @@
1111
</script>
1212

1313
<div class="container">
14-
<p class="label">
14+
<p class="label" id="decryption-progress-label">
1515
{$_('filesharing.decryptpanel.downloadingAndDecrypting')}
1616
</p>
17-
<div class="bar-track">
18-
{#if determinate}
17+
{#if determinate}
18+
<div
19+
class="bar-track"
20+
role="progressbar"
21+
aria-labelledby="decryption-progress-label"
22+
aria-valuemin="0"
23+
aria-valuemax="100"
24+
aria-valuenow={Math.round(
25+
Math.max(0, Math.min(100, percentage ?? 0))
26+
)}
27+
>
1928
<div
2029
class="bar-fill"
2130
style="width: {Math.max(0, Math.min(100, percentage ?? 0))}%"
2231
></div>
23-
{:else}
32+
</div>
33+
{:else}
34+
<div
35+
class="bar-track"
36+
role="progressbar"
37+
aria-labelledby="decryption-progress-label"
38+
aria-valuemin="0"
39+
aria-valuemax="100"
40+
>
2441
<div class="bar-indeterminate"></div>
25-
{/if}
26-
</div>
42+
</div>
43+
{/if}
2744
{#if determinate}
2845
<p class="percent">{Math.round(percentage ?? 0)}%</p>
2946
{/if}

0 commit comments

Comments
 (0)