RocketChat / RocketChat/Rocket.Chat
[Bug] Accessibility (a11y): Missing ARIA tags on "Download file" button in E2EE Message Export Tab
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 46.1k
- Forks
- 13.9k
- Avg merge
- 3d 3h
- Merged PRs (30d)
- 130
Description
📝 Description
The "Download file" button within the End-to-End Encrypted (E2EE) room's "Export Messages" tab has an accessibility flaw. When the button is intended to be in a disabled state, it only receives a CSS styling class (.disabled) instead of using native accessibility attributes.
Because it lacks the standard HTML disabled attribute or the aria-disabled="true" ARIA tag, screen readers will mistakenly announce the button as active and clickable to visually impaired users, resulting in a confusing user experience.
This issue is actively documented in the E2EE tests via a FIXME comment, but has not yet been resolved in the component itself.
🌎 Environment
- Rocket.Chat App Version: (Insert your current version, e.g., 6.x.x)
- NodeJS Version: (Insert version if running locally)
- Operating System: Windows/macOS/Linux
- Browser: All browsers
- Deployment Type: Browser / Web App
🚶 Steps to Reproduce
- Log into a Rocket.Chat instance with End-to-End Encryption enabled.
- Navigate to or create an E2EE room (e.g., an encrypted Direct Message or Channel).
- Open the right-side contextual bar and navigate to the Export Messages tab.
- Observe the "Download file" button/method when it is visually disabled.
- Inspect the DOM element for that button or use a Screen Reader.
🎯 Expected Behavior
The button element should utilize native HTML accessibility attributes when disabled. Specifically, it should use the disabled property or aria-disabled="true" so assistive technologies can appropriately announce its unavailable state.
🛑 Actual Behavior
The button element only has a cosmetic .disabled CSS class appended to it. Screen readers (like VoiceOver or NVDA) will announce it as completely active and clickable.
🛠 Possible Fix
Open the ExportMessagesTab component (or the shared underlying disabled button component it inherits from) and ensure that when the .disabled class is applied, an aria-disabled="true" attribute (or the native HTML disabled property) is rendered simultaneously to the DOM.
Relevant Code Reference/Comments:
In apps/meteor/tests/e2e/e2e-encryption/e2ee-pdf-export.spec.ts (Line 55), there is an existing FIXME explicitly flagging this:
// Initial state check in e2ee-pdf-export.spec.ts
await expect(exportMessagesTab.method).toContainClass('disabled'); // FIXME: looks like the component have an a11y issue
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with apps/meteor/tests/e2e/e2e-encryption/e2ee-pdf-export.spec.ts around line 55 and follow the ExportMessagesTab reference to the component or shared button implementation. Confirm the disabled Download file state in the DOM, then ensure it exposes a native disabled attribute or aria-disabled="true". Done means the E2EE export test still passes and assistive technologies receive the unavailable state.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100