Skip to content

fix(decrypt): a11y for DecryptionProgress + keep label announceable in banner #250

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rubenhensen merged 3 commits into from
Jun 4, 2026
Merged

fix(decrypt): a11y for DecryptionProgress + keep label announceable in banner #250

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
259b034
fix(filesharing): announce decrypt progress to AT, trim removal comment
dobby-coder[bot] Jun 2, 2026
ed5953b
fix(decrypt): keep DecryptionProgress label accessible inside success…
rubenhensen Jun 4, 2026
98981b2
feat(download): scoped a11y live regions, ServerError report button, …
rubenhensen Jun 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 2 additions & 5 deletions src/lib/components/fallback/Decrypt.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,11 +104,8 @@
},
})

// pg-js auto-unwraps `data:`-mode payloads (single-entry zip
// with `data.bin`) into DecryptDataResult.plaintext. Email
// fallback uploads are always `data:` mode, so this branch is
// the expected one. If we ever receive a multi-file result
// here, fall back to the first entry's bytes.
// Email fallback uploads are `data:` mode → plaintext;
// `files[0]` is a defensive fallback for unexpected shapes.
const plaintext =
result.plaintext ??
new Uint8Array(await result.files[0].blob.arrayBuffer())
Expand Down
5 changes: 2 additions & 3 deletions src/lib/components/filesharing/DecryptionProgress.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
let determinate = $derived(typeof percentage === 'number')
</script>

<div class="container">
<div class="container" role="status" aria-live="polite">

@dobby-coder dobby-coder Bot Jun 4, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Code review] role="status" has an implicit aria-atomic="true", so on the determinate branch the whole region is re-announced each time decryptPct ticks an integer. Progress is already conveyed via the inner role="progressbar" + aria-valuenow — consider scoping the live region to the label or marking .percent with aria-live="off" to reduce chatter. Not a blocker.

<p class="label" id="decryption-progress-label">
{$_('filesharing.decryptpanel.downloadingAndDecrypting')}
</p>
Expand All @@ -35,8 +35,7 @@
class="bar-track"
role="progressbar"
aria-labelledby="decryption-progress-label"
aria-valuemin="0"
aria-valuemax="100"
aria-busy="true"
>
<div class="bar-indeterminate"></div>
</div>
Expand Down
13 changes: 12 additions & 1 deletion src/routes/(app)/download/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -616,8 +616,19 @@
padding: 0;
}

/* Hide the visual label inside the success banner (the banner message
above the bar conveys the same thing) but keep it accessible so the
aria-live region still announces the decrypt transition. */
.success-banner :global(.container .label) {
display: none;
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.banner-check {
Expand Down